一旦进入A-Frame中的VR模式，相机进纸就会变黑

Question

以下是我的代码，我使用a-frame相当新，而且非常有趣，而且我似乎无法理解我为什么会这样做如果遇到这个问题，有经验的人可以帮助我吗？

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

当您处于VR模式时相机正常工作，但是当您在相框中进入VR模式时，背景会变为黑色而不是显示相机输入。有谁知道为什么？我之前曾在其他网站上寻求帮助，但没有帮助。

Answer 1

从我看到你创建一个<video>元素 OVER aframe画布。进入vr模式时，您只能看到aframe画布，这就是为什么您的100％/ 100％视频可能会消失的原因。

我认为你应该制作一个<a-video>元素，并设置＆＃34; src＆＃34;作为您的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似乎在plunker或codepen中调用时禁用了userMedia。似乎在我的电脑上的VRMODE和Firefox的Firefox中工作。我的手机上的飞机是弯曲的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似乎工作正常。