在 A-Frame 中进入 VR 模式后，摄像头画面变黑

Question

下面是我的代码，我对使用 a-frame 还很陌生，它很有趣，但我似乎无法弄清楚为什么会遇到这个问题，有经验的人可以帮助我吗？

var errorCallback = function(e) {
  console.log('Not working!', e);
};

navigator.getUserMedia({
  video: true,
  audio: true
}, function(localMediaStream) {
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(localMediaStream);


  video.onloadedmetadata = function(e) {
    // Ready to go. Do some stuff.
  };
}, errorCallback);

video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.min.js"></script>


<video autoplay></video>
<a-scene>
  <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
  <a-entity position="0 0 3.8">
    <a-camera>
    </a-camera>
  </a-entity>
  <a-sky opacity="0"></a-sky>
</a-scene>

相机在您不处于 VR 模式时工作，但当您在一帧中进入 VR 模式时，背景变为黑色而不是显示相机画面。有谁知道为什么？我以前在其他网站上寻求过帮助，但没有任何帮助。

Answer 1

据我所知，您创建了一个 <video> 元素 OVER aframe canvas。进入 vr 模式时，您只能看到帧 canvas，这就是为什么您的 100%/100% 视频可能会消失。

我认为你应该制作一个 <a-video> 元素，并将 "src" 设置为你的 localMediaStream。此外，您需要一个对象来为您的视频添加纹理。
不确定它是否会接受它，之前从未尝试过。你应该看看 https://github.com/jeromeetienne/AR.js/

顺便说一句，您的方法似乎已被弃用： https://developer.mozilla.org/pl/docs/Web/API/Navigator/getUserMedia
看来你现在应该使用 navigator.mediaDevices.getUserMedia() ： https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

更新： 我制作了一支小笔，它设法用我的相机进给对平面进行纹理处理，在 firefox 上试过，效果很好，我的 chrome 似乎禁用了 userMedia在 plunker 或 codepen 中调用时。在我的电脑上和火狐 android 上都处于 VRMODE 时似乎可以工作。我 phone 上的飞机歪了 4 不知何故，我猜它有一个糟糕的相机而且没有内存 :p

欢迎修改我的笔： https://codepen.io/gftruj/pen/jwEyQN

css部分是剩余的，最好确保视频源具有二维能力。正如我在 aframe 网站上看到的那样，我应该将视频放在 <a-video> 元素中：https://aframe.io/docs/0.5.0/primitives/a-video.html，尽管将其作为 <a-plane> src 似乎可以正常工作。

在 A-Frame 中进入 VR 模式后，摄像头画面变黑

Camera feed goes black once entering VR Mode in A-Frame

html

augmented-reality

aframe

ar.js