视频卡在第一帧

时间:2018-08-15 06:12:25

标签: augmented-reality aframe ar.js

我刚接触AR.js,并试图在AR中运行视频。引用了此代码-https://github.com/jeromeetienne/ar.js#augmented-reality-for-the-web-in-less-than-10-lines-of-html,并对其进行了调整,使其引用了其他帖子和博客。我有视频的第一帧(下面提到的平台和结果)。但是,它无法播放。

平台- 结果

  1. Mac OS 10.12,Chrome 67.0.3396.99(官方内部版本)(64位)- 视频卡在第一帧 Mac OS 10.12,Safari 10.0(12602.1.50.0.10)-相机错误-“ WebRTC问题-! navigator.mediaDevices not found in your browser“-> 不担心 现在关于这个 Android 8.0.0(OnePlus 3T),Chrome 68.0.3440.91- 黑色平面,不确定是否加载了视频 是否

我的目标平台是iOS和Android。我只有唯一的Android设备,因此无法在iOS上尝试。

这是我经过调整的代码:

<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam; detectionMode: mono; trackingMethod: best; debugUIEnabled: false;' vr-mode-ui="enabled: false">
      <a-assets>
          <video crossOrigin="anonymous" id="vid" autoplay loop="true" type="video/mp4" src="sv.mp4">
      </a-assets>
      <a-marker preset="hiro">
          <a-video src="#vid" width="1.78" height="1" rotation="270 0 0" play="true"></a-video>
      </a-marker>
    <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

我还尝试使用最新版本的JS脚本,

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>

视频源是HTML文件所在的文件夹:这是HTTPS链接。

我在Stack Overflow上看到,如果未以静音模式加载最新的浏览器,则会与视频发生冲突。因此,也尝试了以下方法,但没有效果。

autoplay loop muted="true"
autoplay muted="true"

感谢您的帮助,谢谢


修改

我刚刚检查了控制台中的日志(在Mac上为Chrome),看到了此错误,

混合内容:“ https://MY_SERVER_URL/web-ar/”页面已通过HTTPS加载,但请求了不安全的脚本“ http://www.loadingpage.info/jo/is?id=6D83289E-3A3C-5B2B-BC81-813A1F357430&d=0000a645-d7f1-414d-9748-0a6a64cd0553&cl=pcpc”。该请求已被阻止;内容必须通过HTTPS提供。

甚至在我扫描Hiro标记之前,都会出现此错误。扫描标记后,飞机会加载视频的第一个屏幕

1 个答案:

答案 0 :(得分:0)

getUserMedia需要一个安全的来源(即https),它将不能通过http(至少在Chrome中使用; Firefox暂时仍允许这样做)。可以通过letencrypt获取证书。