WordPress 中的增强现实 iFrame Post

Question

我在 cPanel 中托管了一个 HTML 文件 - 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>

打开后可以看到如下内容

如果我使用另一个 HTML 文件测试将此文件放入 iFrame - 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>

它按预期工作

当我尝试使用

将相同的 iFrame 添加到 WordPress Post 时

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

我收到错误

Webcam Error

Name: NotAllowedError

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

然后这是我在 post - https://weblog.tiagoperes.eu/testing/

中看到的

我测试过使用 Elementor 的 HTML 和自定义 HTML 元素以及使用 WordPress 编辑器添加 iframe，但在所有选项中仍然存在相同的错误。在 Windows 10 计算机和 Android 设备上使用 Chrome 和 Firefox 对此进行了测试。在所有情况下，错误仍然存在。

Answer 1

出现这个问题是因为需要申请相机权限。为了修复它，我将 iframe 更改为

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

其中包括allow="camera"会提示要求使用相机的通知，接受后我们可以看到如下

注意：另请注意使用 HTTPS 而不是 HTTP 的重要性。

WordPress 中的增强现实 iFrame Post

Augmented Reality iFrame in a WordPress Post

wordpress

augmented-reality

aframe

ar.js

webxr