All the filters described in this chapter can be combined and work together. In this recipe, we will cover this topic using a simple practical example—combining two filters: brightness and contrast.
Follow the given steps:
Add two control objects to the page for each of the filters we plan to use:
Brightness<br> <input type="range" oninput="doFilter('brightness', this.valueAsNumber);" value="0" step="0.1" min="0" max="10"> <br> Contrast<br> <input type="range" oninput="doFilter('contrast', this.valueAsNumber);" value="0" step="0.1" min="0" max="10"> <br>Add a global variable where we will store the values for each filter:
var filters = {};Add an appropriate JavaScript function that will be called when value of the controls (introduced in the step 1) is changing:
function doFilter(filtername, val) { filters[filtername] = val; var v = document.getElementById("localVideo"); var f = ""; for (var fname in filters) { f ...