This recipe shows how to change the brightness of a video using the HTML5 filter. If you develop a video application, it's usually a good idea to give some control on the video to customers, allowing them to change the contrast, brightness, and other parameters of the video.
Follow the given steps:
Add the following control element to the main web page of your application—using this object we will change the brightness:
Brightness <input type="range" oninput="changeBrightness(this.valueAsNumber);" value="0" step="0.1" min="0" max="10">
Add the appropriate JavaScript function:
function changeBrightness(val) { var v = document.getElementById("localVideo"); v.style.webkitFilter="brightness(" + val + ")"; };Here,
localVideois 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. The following screenshot depicts such a situation:
On the...