WordPress帖子中的增强现实iFrame

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>

它按预期工作

[当我尝试使用WordPress帖子添加同一iFrame时

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

我收到错误

网络摄像头错误
名称：NotAllowedError
消息：在当前上下文中，用户代理或平台不允许该请求

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

我已经测试过使用Elementor的HTML和Custom 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"，它将提示要求使用照相机的通知。

WordPress帖子中的增强现实iFrame

问题描述投票：0回答：1

1个回答

最新问题

WordPress帖子中的增强现实iFrame

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1