A-FrameのVRモードに入ると、カメラのフィードは黒くなります。

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 canvasを作成します。 vrモードに入ると、あなたは100％/ 100％ビデオがおそらく消えてしまう理由である、フレームキャンバスだけを見ることができます。

私は<a-video>要素を作成し、あなたのlocalMediaStreamとして "src"を設定するべきだと思います。さらに、あなたのビデオをテクスチャするオブジェクトが必要になります。
それはそれを取るかどうかわからない、前に試したことはありません。 https://developer.mozilla.org/pl/docs/Web/API/Navigator/getUserMedia
あなたが今）navigator.mediaDevices.getUserMediaを（使用する必要がありそうです：： はUPDATE https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

：私は小さなを作ったあなたはhttps://github.com/jeromeetienne/AR.js/

はところでそれはあなたの方法が非常に推奨されませんようですチェックアウトする必要があります私のカメラのフィードで飛行機にテクスチャをつけたり、Firefoxで試してみたり、素晴らしい作品を作ってくれたペンは、プラカードやcodepenの中で呼び出されたときに私のchromeはuserMediaを無効にしているようだ。私のPCの両方でVRMODEに、アンドロイドのためにfirefoxの両方で動作するようです。 P

は私のペンを変更してお気軽に： https://codepen.io/gftruj/pen/jwEyQN

CSS部分が良く、残っている自分の携帯電話上の飛行機は、私はそれがくだらないカメラなしメモリを持っていると思い、4曲がっ何らかの理由でありますビデオフィードのパワーが2次元であることを確認してください。私はaframeのウェブサイトで見るように、<a-video>の要素の中にビデオを入れてください：https://aframe.io/docs/0.5.0/primitives/a-video.html、それを<a-plane> srcとするのはうまくいくようですが。