一旦进入虚拟现实模式A相框，摄像头饲料变黑色

Question

这里是我的代码如下，我是相当新的使用一个框架，这是非常有趣的，我似乎无法解决为什么我有问题，更有经验的人可以帮我吗？

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画布。进入vr模式时，您只能看到aframe画布，这就是您的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浏览器似乎在plunker或codepen中调用时禁用了userMedia。似乎在我的电脑上的VRMODE和android的firefox上工作。我的手机在飞机上是歪的4某种原因，我想它有一个低劣的摄像头和无记忆：对

随意修改我的笔： https://codepen.io/gftruj/pen/jwEyQN

CSS的部分是吃剩的，更好的确保视频Feed具有两个维度的权力。正如我在aframe网站上看到的那样，我应该将视频放在<a-video>元素内：https://aframe.io/docs/0.5.0/primitives/a-video.html，但将其作为<a-plane> src似乎工作正常。