wordpress augmented-reality aframe ar.js webxr

Augmented Reality iFrame in a WordPress Post

I've got an HTML file hosted in cPanel - https://ar.tiagoperes.eu/ar.html

<!DOCTYPE html>
<html lang="en">
  <head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
    <script>
    AFRAME.registerComponent('foo', {
      init: function() {
        this.el.addEventListener("click", (e)=>{
          console.log(e)
          document.querySelector("a-animation").emit("buttonpressed")
        })
      }
    })
    </script>
  </head>
<body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs="sourceType: webcam;">
    <a-marker preset="hiro" cursor='rayOrigin: mouse'>
          <a-box position="0 0 0" scale='2 2 2' material="opacity: 0.5;" foo>
          <a-animation begin="buttonpressed" dur="750" attribute="scale" to="2 4 4" direction="alternate"></a-animation>
      </a-box>
    </a-marker>
  <a-camera-static/>
    </a-scene>
</body>
</html>

By opening it, you'll be able to see the following

If i test placing this file in an iFrame using another HTML file - https://ar.tiagoperes.eu/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>  
  <body>
    <h1>Hi there!</h1>

    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>
 <iframe src="ar.html" width="300px" height="300px"></iframe> 
    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->

  </body>
</html>

it works as expected

When I try to add the same iFrame into a WordPress Post using

<iframe src="https://ar.tiagoperes.eu/ar.html" width="300px" height="300px"></iframe>

I get the error

Webcam Error

Name: NotAllowedError

Message: The request is not allowed by the user agent or the platform in the current context

and then this is what I see in the post - https://weblog.tiagoperes.eu/testing/

I've tested adding the iframe using Elementor's HTML and Custom HTML elements and also using the WordPress Editor but in all of the options the same error remained. Tested this using Chrome and Firefox in both a Windows 10 computer and an Android device. In all of the scenarios, the error persisted.

Solution

This problem happens because one needs to ask for camera permission. To fix it, I changed the iframe to

<iframe src="https://ar.tiagoperes.eu/ar.html" width="300px" height="300px" allow="camera"></iframe>

which includes allow="camera" that will prompt the notification asking to use the camera and after accepting we can see the following

Note: notice also the importance of using HTTPS instead of HTTP.