This recipe covers the usage of the sepia filter to process a video captured from a remote peer or local web camera using WebRTC. This is a popular filter often used as a special effect for making video applications more friendly and warm.
The following steps will show you how to use the sepia filter:
Add a control element to the main web page of the application you're developing—using this object we will control the value of the applied Sepia filter:
Sepia <input type="range" oninput="changeSepia(this.valueAsNumber);" value="0" step="0.1" min="0" max="1">
Add an appropriate JavaScript function:
function changeSepia(val) { var v = document.getElementById("localVideo"); v.style.webkitFilter="sepia(" + 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 a raw video in the web camera, with no filter applied. In the following screenshot, you can...