Kamera-Feed wird schwarz, sobald der VR-Modus in A-Frame aufgerufen wird

Question

Hier ist mein Code unten, ich bin ziemlich neu in der Verwendung von A-Frame und es ist ziemlich interessant, und ich kann nicht scheinen, warum ich das habe Problem, kann jemand erfahrener mir helfen?

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>

Die Kamera funktioniert, wenn Sie nicht im VR-Modus sind, aber wenn Sie im VR-Modus in einem Rahmen tun geben, wird der Hintergrund schwarz statt die Kamera Zufuhr zeigt. Weiß jemand warum? Ich habe schon vorher auf anderen Websites um Hilfe gebeten, aber nichts half.

Answer 1

von dem, was ich sehe, erstellen Sie einElement OVER die Leinwand Leinwand. Wenn Sie den vr-Modus aufrufen, sehen Sie nur die Bildanzeige, weshalb Ihr 100%/100% Video wahrscheinlich verschwindet.

Ich denke, Sie sollten ein <a-video> Element machen, und legen Sie die "src" als Ihre localMediaStream. Darüber hinaus benötigen Sie ein Objekt, mit dem Sie Ihr Video strukturieren können.
Ich bin mir nicht sicher, ob es es jemals nehmen wird, noch nie zuvor. Sie sollten https://github.com/jeromeetienne/AR.js/

Besuche

Btw es scheint Ihre Methode ziemlich veraltet ist: https://developer.mozilla.org/pl/docs/Web/API/Navigator/getUserMedia
es scheint, dass Sie navigator.mediaDevices.getUserMedia() jetzt verwenden sollten: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

UPDATE: ich machte einen kleinen Stift, der es schafft, ein Flugzeug mit meinem Kamera-Feed zu strukturieren, probierte Firefox aus, funktioniert super, mein Chrom scheint UserMedia zu deaktivieren, wenn man innerhalb von Plunker oder CodePen aufgerufen wird. Scheint zu arbeiten, wenn in VRMODE sowohl auf meinem PC, als auch Firefox für Android. Das Flugzeug auf meinem Handy ist 4 krumm aus irgendeinem Grund, ich denke, es hat eine beschissene Kamera und kein Gedächtnis: p

Fühlen Sie sich frei meine Feder zu ändern: https://codepen.io/gftruj/pen/jwEyQN

Der CSS-Teil ist ein Überbleibsel, besser Stellen Sie sicher, dass der Video-Feed zwei Dimensionen hat. Wie ich auf der aframe Website zu sehen, soll ich das Video im Innern des <a-video> Element setzen: https://aframe.io/docs/0.5.0/primitives/a-video.html, obwohl es als <a-plane> src setzen scheint gut zu funktionieren.