Web Browser Web Stream Has Extremely Slow Performance / Frame Rate

Question

I am trying to test WebRTC and want to display my own stream as well as peer stream. Currently, I have a simple gasket to get the camera stream and tube into the video element, however the frame rate is extremely low. The rare thing about this is that I can try the examples from the WebRTC website and they work flawlessly. The video is smooth and no problem. I go to the console and my code resembles them. What can happen? I tried to create a fiddle and run this code in brackets, but it still runs 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. Note that I use the new navigator.mediaDevices() API instead of navigator.getUserMedia() , but I don’t see how it matters with 1. I use the padding provided by the WebRTC group called adapter.js , which they themselves use. 2. I do not think that you get the capture of the video stream will affect performance.

Answer 1

Well, I feel really stupid for this ... I was a little deceived by the fact that the video element will update the displayed image without having to do anything other than transmit the output stream, which means that the image will be updated but only for very long intervals, making yourself look as if the video is lagging. What I forgot to do was actually play() video or add autoplay as my property ... now it works well.