Add a control element to the main web page of your application—using this object we will control the video's opacity:

Opacity
<input type="range" oninput="changeOpacity(this.valueAsNumber);" value="1" step="0.1" min="0" max="1">

Add an appropriate JavaScript function:

function changeOpacity(val) {
  var v = document.getElementById("localVideo");
  v.style.webkitFilter="opacity(" + 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 no filter applied. The following screenshot depicts this stage:

On the left-hand side of the page, you can see a control described as Opacity. Try to move it to the left and...