Video frame data is the pixel information exposed for one decoded video frame. It separates the interesting work—altering pixels—from the repetitive work of starting a stream and delivering frames. A canvas can refresh from that data at a chosen interval, but intervals that are too slow look choppy while very short intervals can strain the browser. section 15.3
Adding video snow
A custom filter receives image data and walks through its values four at a time. For selected pixels, it replaces the color channels with random values, then returns the modified data. A range input controls the probability of changing each pixel, producing an adjustable snow effect over a live camera feed. section 15.3
Listing 15.17. Custom filter demo to introduce video “snow”
<wcia-video
frameDataMode="imagedata" #1
canvasRefreshInterval="50"
useCamera
useCanvasForDisplay>
</wcia-video>
<p>Amount of snow</p>
<input type="range" min="0" step=".01" max="1" value="0.7"
oninput="snow = event.target.value"> #2
<script>
var snow = .7;
const customfilter = function(pxs) { #3
for (var c = 0; c < pxs.data.length; c+=4) {
if (Math.random() < snow) {
pxs.data[c] = Math.random() * 255;
pxs.data[c+1] = Math.random() * 255;
pxs.data[c+2] = Math.random() * 255;
}
}
return pxs;
};
document.querySelector('wcia-video').addEventListener
('frameupdate', function(event) { #4
var data = event.detail;
data.canvascontext.putImageData(
customfilter(data.framedata), 0, 0, 0, 0, data.width, data.height );
});
</script>
Inspect the complete custom-filter example, including the frame-data mode, refresh interval, adjustable control, pixel loop, and frameupdate handler. section 15.3
