Here's my code below, I'm fairly new to using a-frame and it's pretty interesting, and I can't seem to work out why I'm having the issue, can someone more experienced help me out?
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>
The camera works when you aren't in VR mode, but when you do enter VR mode in a-frame, the background becomes black instead of showing the camera feed. Does anyone know why? I've asked for help on other websites before, but nothings helped.