In this recipe, we will learn how to control the video's hue. Usually, you will not use this filter in your applications, although, sometimes it might be helpful; for example when you're using some kind of specific video equipment that might need this way of processing video.
Follow the given steps:
Add a control element to the application's main web page—using this object we will change the video's hue:
Hue <input type="range" oninput="changeHue(this.valueAsNumber);" value="0" step="20" min="0" max="360">
Here, you can see that we have set the max value as
360—this is because the hue's value is tied to degrees. In this universe, we have 360 degrees, so the maximum value for this filter is set to 360.Add an appropriate JavaScript function:
function changeHue(val) { var v = document.getElementById("localVideo"); v.style.webkitFilter="hue-rotate(" + val + "deg)"; };We have also added the
degpostfix to the filter's value—it means degree. Here,localVideo...