This recipe shows how to work with a filter that deals with the colors of the processed video. We will make a video less colorized and then make it black and white. This recipe can be used as a kind of simple special effect for a video.
Perform the following steps:
Add the control button to the main web page of your application:
<button onclick="doGrayScale()">do grayscale</button>
Add an appropriate JavaScript function:
function doGrayScale() { var v = document.getElementById("localVideo"); v.style.webkitFilter="grayscale(50%)"; };
Here,
localVideo
is the ID property of the HTML video tag for the local video playback.Navigate your browser to the web page. You will first see an unprocessed video from the web camera. The following screenshot depicts such a situation:
Now click on the do grayscale button—you will see that the image has become less colorized, as shown in the following screenshot:
This happened because we applied the grayscale...