AR.js: How to enable/disable camera and show/hide AR content on click of a button

Question

All the examples and code that demonstrates AR.js AR capabilities over browser, works as soon as the web page is loaded. However, I would like to provide an option to the user, to manually start and stop the scanning process and the hide AR content.

Basically, I would like to load the a-frame, AR.js scripts and other a-frame html elements only when a uses clicks a button on a webpage.

Please let me know if there are any parameters in AR.js that can be passed to signal the user's intent to start the camera/scan/show our content.

---

Version of scripts:
A-Frame Version: 0.7.1 (Date 18-10-2017, Commit #b9a751e)
three Version: ^0.87.0
WebVR Polyfill Version: ^0.9.36

---

Answer 1

since ar.js appends the camera feed to the body element, it's quite hard to contain it within a container on a typical website. I'd recommend:

1) Having a ar scene within in a external .html file, so you could place it inside an <i-frame>
2) When a button is clicked (or any other event) create the iframe, and place it on your website:

function addScene() {
  var scene = document.createElement("i-frame")
  scene.setAttribute("src", "ar.html")
  scene.setAttribute("height", "300")
  scene.setAttribute("width", "300")
  document.querySelector("#somecontainer").appendChild(scene)
}

Check it out on this glitch.