1

我有一个托管在 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 WebAR

当我尝试使用将相同的 iFrame 添加到 WordPress 帖子中时

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

我得到错误

网络摄像头错误

名称：NotAllowedError

消息：在当前上下文中，用户代理或平台不允许该请求

错误

然后这就是我在帖子中看到的 - https://weblog.tiagoperes.eu/testing/

带有 AR 内容的 WordPress 无法正常工作

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

4

1 回答 1

1

发生此问题是因为需要请求相机许可。为了修复它，我将 iframe 更改为

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

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

WordPress中的增强现实

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

于 2020-05-25T05:51:56.863 回答