Browser web cam stream has extremely low performance/frame rate

Question

I am trying to test WebRTC and want to display my own stream as well as the peer's stream. I currently have a simple shim to obtain the camera's stream and pipe that into a video element, however the frame rate is extremely low. The rare thing about this is that I can try examples from the WebRTC site and they work flawlessly.. The video is smooth and there are no problems. I go to the console and my code resembles theirs.. What could be happening? I tried to create both a fiddle and run that code within brackets but it still performs horribly.

video = document.getElementById('usr-cam');

  navigator.mediaDevices.getUserMedia({video : {
      width : {exact : 320},
      height : {exact: 240}
  }})
  .then(function(stream){


      if(navigator.mozGetUserMedia)
      {
        video.mozSrcObject = stream;
      }
      else
      { 
         video.srcObject = stream;
      }



  })
  .catch(function(e){
      alert(e);
  });

Pretty much everything I do. Take into account that I am using the new navigator.mediaDevices() API instead of navigator.getUserMedia() but I don't see how that would matter since 1.I am using a shim provided by the WebRTC group named adapter.js which they themselves use. 2. I don't think how you obtain hold of the video stream would affect performance.

Answer 1

Alright, I feel very stupid for this one... I was kind of deceived by the fact that the video element will update the displayed image without you having to do anything but pipe the output stream, which means the image will update but just at really long intervals, making it seem as if the video is lagging. What I forgot to do was actually play() the video or add autoplay as its property... it works well now.