Until now, we considered standard filters only. In this recipe, we will cover the basic case of custom video processing. Using that approach, you can implement your own filters and processing algorithms.
As an example, we will implement the pixelization effect.
Put a canvas object somewhere on the application's web page. This canvas will be used for getting frames from the video. The visibility option is set to
hidden—we don't want to show this canvas to the user, we will use it for our internal, technical purposes only.<canvas id="canva" width="384px" height="288px" style="visibility:hidden;"></canvas>
Put another canvas object on the web page. This canvas will be used to show the result of the video processing:
<canvas id="fcanva" width="384px" height="288px"></canvas>
Add a button, which will enable the processing:
<button onclick="pixelize(10)">Pixelize</button><br>
Implement the
pixelizefunction. This function...