📲 Deploy Experience

Learn how to use our system with AR.js.

AR.js is a free open-source library that enables you to view your 3D content through a web browser and supports features like Image Tracking, Location-based AR, and Marker tracking.

Adding 3D content

Add a model hologram or video hologram through the console. You can choose any type of target. Here's how:

Launching the AR.js app

Option 1: Scan a QR code

Once the 3D hologram is set you can view it instantly with AR.js.

Click on the icon to generate and show the QR codes. Choose the "See on an Image" tab.

Scan the QR code with your phone's camera app or with a QR reader app.

Latest iOS and Android phones are able to read QR code with their default camera apps.

Click the pop-up message to get redirected to our website. Your browser should open.

You might need to allow camera access. In iOS, we recommend using the Safari browser. In Android, Chrome browser is recommended as the default browser.

Your camera should open in the browser.

Option 2: Go directly to website

Instead of scanning the QR code, you can also browse directly to:

https://console.echoAR.xyz/arjs?key=<YOUR_API_KEY>

Your camera should open in the browser.

Seeing 3D content in AR

Now that the camera is running in your browser, follow the instructions based on the type of target you chose to upload previously:

Surface Target

Surface detection is not yet supported for AR.js experiences. Instead you can use a QR marker.

Keep the camera pointed to the QR code to see the 3D model appear.

Image target

Instead of QR code, you can use your own images to generate image markers for your AR experience by setting an image target. Your content will appear in AR when the image marker is detected in your camera frame.

After uploading your hologram with an image target, our system converts your image to an image marker.

The image marker is different from the original image and contains a white and black border.

View the marker by clicking on the image thumbnail on the card and then the Marker tab.

You can also quickly download the generated image marker to your computer by clicking "Download marker" in the content card.

Keep the camera pointed to the image marker to see the 3D model appear.

Location target

Location targets have to be very precise since location-based AR.js (GeoAR.js) doesn't have much tolerance for inaccurate locations

Make sure to activate GPS on your phone

Your content will appear only when your device is around the specific location you set.

Instead of scanning the QR code, you can also browse directly to:

https://console.echoAR.xyz/geoarjs?key=<YOUR_API_KEY>&entry=<ENTRY_ID>

Your camera should open in the browser. Look around you to see the 3D model appear.