Change the quality webRTC

Question

This question is not asking about resolutions and frameRates on getUserMedia().

It is about how to reduce/increase the quality of the one frame in video when using getUSerMedia().

Here Demo of using getUserMedia().

How to change the Quality of the video? //Please Fiddle answer.

code:

var video_constraints = {mandatory: {
       maxWidth: 320,
       maxHeight: 240,
       maxAspectRatio:4/3,
       maxFrameRate:1
      },
      optional: [ ]
 };

var constraints = {audio: true, video: video_constraints };
navigator.getUserMedia(constraints, successCallback, errorCallback);

Answer 1

If not resolution or frame rate, I assume you're either talking about bit rate or camera settings (white balance, exposure, contrast, etc.).

The video stream provided by getUserMedia should give you uncompressed video at the highest quality available from the camera hardware. There is no way to adjust the camera settings; they are fully automatic, controlled by the camera driver and/or operating system. If you want to adjust the image, you can process it with canvas, using either a 2d or webgl context. There are multiple libraries available to help you with that.

As for the bit rate, this only becomes an issue when you are transmitting the video over peer connection. This is also done adaptively and automatically.

Regardless of the quality and size of provided media streams, the network stack implements its own flow and congestion control algorithms: every connection starts by streaming audio and video at a low bitrate (<500 Kbps) and then begins to adjust the quality of the streams to match the available bandwidth.

Source: High Performance Browser Networking