You can easily embed the AR.js 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 AR.js experience you must declare an iframe
tag and set its source to the address of the hosted experience:
<iframe src="https://console.echoAR.xyz/arjs?key=<YOUR_API_KEY>" allow="camera *"/>
Note that you must allow for camera access to avoid camera permission errors.
Here is a full styled HTML page with an embedded AR.js experience:
index.html<!DOCTYPE html><html><head><title>Ebmedded AR.js Experience through echoAR</title><style>#background {top: 0;left: 0;position: fixed;width: 100%;height: 100%;background-color: rgb(0, 45, 100);z-index: -1;}h1 {position: relative;color: white;text-align: center;font-size: 5vh;font-family: Arial, Helvetica, sans-serif;}iframe {position: relative;width: 100%;height: 75vh;}</style></head><body><div id="background"></div><h1>Ebmedded AR.js Experience through echoAR</h1><iframe src="https://console.echoAR.xyz/arjs?key=<YOUR_API_KEY>"allow="camera *"></iframe></body></html>