DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Create an AR Face Tracking Experience
echo3D for echo3D

Posted on

How to Create an AR Face Tracking Experience

Calling all AR developers and content creators! Looking to create an AR face tracking experience? With echo3D’s 3D-ready cloud platform, you can create an AR Face experience with ease.

FaceAR is a web-based library that enables you to view your 3D content through a web browser and supports face tracking. With echo3D, you can manage, stream, and update 3D/XR content to your app on any device.

πŸ“² Adding 3D Content

Add any type of hologram through the console. You can choose any type of target.

Click the β€œAdd to Cloud” button at the top of the sidebar or the empty card in the Content page to add a new entry (hologram and target) to the project.

Choose a Hologram

You can either select files from local storage or choose from the displayed sample models.

Use the search bar to find free 3D models that you can instantly add to the console.

You can find additional free 3D models on Sketchfab, TurboSquid, Sketchup’s 3D Warehouse, Clara.io, Thangs, Poly Haven, Archive3D, and Free3D.

You can create your own 3D models with Tinkercad, Blender, KenShape, Fusion 360, MagicaVoxel, Maya, Maya LT, Maxon Cinema4D or use 3D scanning apps.

Set a Target

Select β€œAnywhere” as the target which would sets a surface target. Your hologram will show up on any detectable surface (including your face!).

Click β€œDone” to upload your hologram.

  • You did it! πŸŽ‰ Your content will be displayed in the Content page. Any issues? click here to learn more about adding content).

πŸš€ Launching the FaceAR App

Option 1: Scan a QR code

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

Click on the β€œQR code” icon to generate and show the QR codes. Choose the β€œSee on a face” 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. Your camera should open in the browser.

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.

  • You did it! πŸŽ‰

Option 2: Go directly to website

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

https://api.echo3D.co/facear?key=<YOUR_API_KEY>

Your camera should open in the browser.

  • You did it! πŸŽ‰

πŸ‘€ Seeing 3D Content in AR

Now that the camera is running in your browser, keep the camera pointed to a face to see the 3D model appear.

πŸ’— Capturing the AR Moment

You can snap a picture of the AR scene by clicking the β€œcamera” button on the bottom of the screen.

An image will be captured and saved to your device.

  • Share it with others! πŸ’—

πŸ”‘ Password-Protecting Content

You can password-protect FaceAR experiences so that users that access the experience will be prompted to enter a password. If you’d like to password-protect the 3D content, go back to the console and add metadata to set a password. After adding metadata, relaunch the experience. on echo3D, β€œpasswd” is a pre-defined metadata key to password-protect content (type should be β€œstring” and you can add any value as your password, for example β€œ1a2B3c4D5e6”).

πŸ“Transforming Content

You can move, scale, rotate, and add text to 3D content in FaceAR by updating the 3D content’s metadata on echo3D. By updating metadata, you’ll be able to persistently transform your 3D content.

If the content is too big or too small or if you’d like to move or rotate it, go back to the console and add metadata to affect its transformation. After adding or changing metadata you can instantly see the changes in the browser even while the experience is running.

See here for a list of words the system uses as pre-defined metadata keys to control transformations (x, y, z, scale, height, width, etc.).

Remember to refresh the browser after adding metadata with FaceAR experiences for the changes to take effect.

πŸ”’ Embed into Website or App using iframe

You can easily embed the FaceAR experience generated and hosted through the console to any web page. The web page can be part of a website or integrated in a mobile app.

In order to embed the FaceAR experience you must declare an iframe tag and set its source to the address of the hosted experience:

Using iframe

In order to embed the FaceAR experience you must declare an iframe tag and set its source to the address of the hosted experience:

<iframe src=”https://api.echo3D.co/facear?key=<YOUR_API_KEY>" allow="camera *"/>

Note that you must allow for camera access to avoid camera permission errors.

Click here for a code example of a full styled HTML page and more information on how to embed an FaceAR experience with iframe.

❔ Troubleshooting

  • I can’t see the 3D asset!

Are you pointing to the right target? Make sure to point your phone to a face.

  • Is your asset too small/big?

It might be the case that your 3D assets it too small or too big to appear in the camera view. Scale the model by adding a metadata key named scale to the 3D models. See how to add metadata in the Data Page section of the documentation.

Now rescan the QR code to rebuild and refresh your FaceAR app.

  • I am getting some other error.

Let’s talk! Ask on Slack or send an email to support@echo3D.co and please attach a screenshot of the error you are experiencing.

Troubleshoot issues here. You can check out our full documentation for other useful tutorials here and also reach out to our
support team here.


echo3D (www.echo3D.co; Techstars 19’) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.