In this recipe, we will cover the process of controlling the saturation of a video being captured from the web camera using WebRTC. Saturation is rarely used as a control available to users. Although for some kinds of applications it might be very useful.
Perform the following steps:
Add a control element to you application's main web page—using this object we will change the saturation's level:
Saturation <input type="range" oninput="changeSaturation(this.valueAsNumber);" value="0" step="0.1" min="0" max="10">
Add an appropriate JavaScript function:
function changeSaturation(val) { var v = document.getElementById("localVideo"); v.style.webkitFilter="saturate(" + val + ")"; };
Here
localVideo
is the ID property of the HTML video tag for the local video playback.Navigate your web browser to the web page. You will first see an unprocessed video from the web camera with normal saturation. The following screenshot depicts such a situation:
On the left...