I want to open AR directly when i paste the link

🌵 Needle Engine
, ,
1

when i create a project and host it i want open directly AR

2

Hello, Burhanuddin! To enable your project to directly open in Augmented Reality (AR) when pasting a link, you typically need to make use of WebXR API along with appropriate URL parameters that signal the browser to initiate an AR session.

Here’s a general step-by-step approach you can follow:

  1. Setup your environment: Ensure your project is using Needle Engine with WebXR support enabled.

  2. Configure the HTML: Make sure your HTML page is set to launch AR using specific parameters. You can use the WebXR navigator.xr to request an AR session.

  3. URL parameters: You should design your link to include the necessary parameters for engaging AR. For instance, you can employ a hash or query parameters in your link that your JavaScript can read upon loading the page.

  4. JavaScript to handle AR initiation: Add JavaScript code to check the URL parameters on page load and call the WebXR API to begin the AR session.

Here’s a sample code outline:

import { AR, XRSession } from "@needle-tools/engine";

document.addEventListener("DOMContentLoaded", async () => {
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('ar')) {
    try {
      const session = await navigator.xr.requestSession('immersive-ar');
      // Initialize your AR experience here with Needle Engine
      // e.g. initializeNeedleEngine(session);
    } catch (error) {
      console.error("Failed to start AR session:", error);
    }
  }
});

Key Points:

  • Ensure your hosting supports HTTPS, as AR functionalities require secure contexts.
  • Familiarize yourself with the navigator.xr methods to manage session requests properly.
  • Test your link in compatible browsers that support WebXR (like Chrome or Firefox).

Feel free to share the specific version of Needle Engine and any additional configurations you’re using if you need more tailored support! You can also check the documentation and API references for further details: Needle Engine Docs and WebXR Docs.

1 replies left - Get a PRO license for more AI replies.
thread_687LakpCoaqNfZczEkgWYS2o
Reply to this message to continue the conversation

3

please provide me full script

4

Hi Burhanuddin! Below is a full script that you can use to set up your project so that it opens in Augmented Reality (AR) directly when a user visits a URL with a specific parameter. Make sure you have configured your project to use Needle Engine properly.

Full Script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR Experience</title>
    <script src="https://cdn.jsdelivr.net/npm/@needle-tools/engine"></script>
</head>
<body>
    <h1>Welcome to the AR Experience!</h1>
    <script>
        // This function initializes the AR session with Needle Engine
        async function startAR() {
            try {
                const session = await navigator.xr.requestSession('immersive-ar', {
                    requiredFeatures: ['local-floor', 'hand-tracking'] // Add features as needed
                });
                console.log("AR Session started:", session);
                // Initialize your Needle Engine scene here
                // For example:
                // initializeNeedleEngine(session);
            } catch (error) {
                console.error("Failed to start AR session:", error);
            }
        }

        // Check for the 'ar' URL parameter
        document.addEventListener("DOMContentLoaded", () => {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.has('ar')) {
                startAR(); // Start AR if the parameter is present
            }
        });
    </script>
</body>
</html>

Usage:

  • Save this as an index.html file and host it on a server.
  • When you want to open the AR experience, link to it with ?ar as a URL parameter, for example: https://yourdomain.com/index.html?ar.

Important Notes:

  • Ensure your server is HTTPS to test AR features properly.
  • Modify the initializeNeedleEngine(session); comment with actual code to initialize your Needle Engine scene.

Feel free to ask if you have any further questions or need additional features implemented!

0 replies left - Get a PRO license for more AI replies.
thread_687LakpCoaqNfZczEkgWYS2o
Reply to this message to continue the conversation

5

This is not working

6

Hi Burhanuddin_Limdiwal, I’m sorry but I can’t help you right now. You have reached the maximum number of replies. :nerd_face:. Please try again later or get a PRO license for more AI help.
**

7

Hello,

You can do that after some user interaction - this is a browser security measure. Just like with audio the browser requires the user to interact with the website (e.g. by clicking a button or clicking somewhere on the website) before it can music or before a web AR session can start.

What you can do is create a simple website with just a button that says “Start the experience” (or something similar) and then immediately start a Needle Engine webxr (AR) session.

Here’s an example on Stackblitz for reference (not that you might need to copy the main.ts code into your own file and relevant sections from index.html and then open the localhost URL on your phone or AR capable device)

Needle Engine: Start AR automatically - StackBlitz

This is the relevant code that you can add to your project (checkout the main.ts file)

import { NeedleXRSession } from "@needle-tools/engine"

window.addEventListener('pointerdown', () => {
  if (!NeedleXRSession.active) NeedleXRSession.start('ar');
});
8

Please provide more information what you tried and what is happening on your end.

9

It freeze the AR when i open in my mobile
before that it was working fine

10

Could you share a link?

11

Hello @Burhanuddin_Limdiwal do you have a link to share or did you solve the issue?