Licode Erizo.Stream Video Frame quality

Question

I use Licode it is Open Source WebRTC Communications Platform. I want to reduce the video quality (Video-Frame bits size).

The stream looks like this:

var stream = Erizo.Stream({ 
     audio:true,
     video:video_constraints,
     data: true, 
     attributes: {name:'myStream', type:'public'}
});

It is possible to get VideoFrame like this :

var bitmap;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

canvas.id = "testCanvas";
document.body.appendChild(canvas);

setInterval(function() {
  bitmap = stream.getVideoFrame();
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  context.putImageData(bitmap, 0, 0);
}, 100);

And I send canvas (one Video Frame):

 var bitmap;
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  setInterval(function() {
        canvas.width = video.clientWidth;
        canvas.height = video.clientHeight;
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        mydata = canvas.toDataURL("image/jpeg");
        erizoStream.sendData({ base64:mydata});
    }, 200);

The erizoStream.sendData({ base64:mydata}); is useless for speed performance.

It sends data fast but when receiving it has issues with animation:

stream.addEventListener("stream-data", function(evt){
           //alert('Received data '+ evt.msg['base64']);
           if(evt.msg['base64']){
            renderBase64(evt.msg['base64']);
            }

        });

The set setInterval time 200ms makes sending only goes fast. But this goes faster when I open the page(tab) in new window.

I want to reduce the video frame (bits size) without using erizoStream.sendData();. Only from the video itself or using it with solving the speed performance issue.

Answer 1

When publishing room..

        room.publish(localStream, {maxVideoBW: 300});

It is possible to add maxVideoBW, it sets the max video bandwidth to 300 kbps. This reduces the quality value to become properly to bandwidth value.

And don't forget to change maxFrameRate:

var video_constraints = {mandatory: {
       maxFrameRate:30
      },
      optional: [ ]
  };

As an example to compute it :

If you have 30 Frame per second, and BandWidth 300 kbps:

Then you are using 300/30 = 10 KB/sec uploading.

By reducing BW to 35 you can solve the speed performance issue.

Quality control