Search code examples
htmlaugmented-realityaframear.js

Camera feed goes black once entering VR Mode in A-Frame

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.

Solution

  • from what i see You create a <video> element OVER the aframe canvas. When entering vr mode, You see only the aframe canvas, which is why your 100%/100% video probably dissapears.

    I think You should make a <a-video> element, and set the "src" as Your localMediaStream. Moreover You'd need a object to texture with your video.
    Not sure if it will take it though, never tried before. You should check out https://github.com/jeromeetienne/AR.js/

    Btw it seems Your method is quite deprecated: https://developer.mozilla.org/pl/docs/Web/API/Navigator/getUserMedia
    it seems you should use navigator.mediaDevices.getUserMedia() now: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

    UPDATE: I made a small pen which manages to texture a plane with my camera feed, tried on firefox, works great, my chrome seems to disable userMedia when called within plunker or codepen. Seems to work when in VRMODE both on my pc, and firefox for android. The plane on my phone is crooked 4 some reason, i guess it has a shitty camera and no memory :p

    Feel free to modify my pen: https://codepen.io/gftruj/pen/jwEyQN My ugly face as a FREE BONUS!!

    The css part is a leftover, better make sure that video feed has the power of two dimensions. As i see on the aframe website, i should put the video inside the <a-video> element: https://aframe.io/docs/0.5.0/primitives/a-video.html , though putting it as a <a-plane> src seems to work fine.