Stream processing options

Once you have set up any video stream from either a local or remote source to display within a <video> element on your page, you can then access this data to process it in any number of ways. You can create filters to change colors, create chromakey effects, or do facial/object recognition, just to name a few.

Here's a brief overview of how you access the data within these streams to set up this type of processing:

1. Set up a <canvas> element in the DOM.

   • declaratively then via getElementById or similar

   • createElement("canvas"), then appendChild()

2. Get a 2D drawing context for <canvas>.

   canvas_context = canvas.getContext('2d');

3. Draw the <video> frames onto <canvas>.

   canvas_context.drawImage(video, top, left, width, height);

4. Get the RGBA Uint8ClampedArray of the pixels.

   context.getImageData(top, left, width, height).data;

5. Loop through the typed array to process pixel rows and columns.

   for (...) { for (...) { … } …  }

6. Render results.

   • using HTML/JS/CSS...