A video effect transforms live video imagery to change how it looks or is presented. The interesting part may be pixel manipulation, while a reusable video component hides the repetitive work of starting the stream and exposing frame data. section 15.3
A browser-based effect can evolve in small steps:
- Start with a camera-backed video component, then render frames through its internal canvas. section 15.3
- Control refresh timing: a 50-millisecond interval is usable, while slower updates become choppy and overly frequent updates strain the browser. section 15.3
- Apply a built-in black-and-white filter or provide a custom function that changes pixel data. section 15.3
- Move to WebGL for filters such as sepia, greyscale, and edge detection, or supply custom vertex and fragment shaders. section 15.3
Adding video snow
A custom filter can listen for frame updates, iterate through image data, and randomly replace RGB values. A range input controls the snow amount, turning pixel processing into an interactive live-camera effect. section 15.3
Listing 15.16. Setting a video filter
<wcia-video useCamera useCanvasForDisplay canvasRefreshInterval="50"> #1
</wcia-video>
<script type="module">
import Filters from #2
'../filters/canvas/filters.js';
document.querySelector('wcia-video').canvasFilter =
Filters.toBlackAndWhite; #3
</script>
Browse the minimal component markup and module code for assigning a black-and-white canvas filter. section 15.3
