Function capture

Captures frames from a video element. It can send pixel data to a function or post to a worker script.

Example: Using a function

import {Video} from 'https://unpkg.com/ixfx/dist/visual.js'

// Capture from a VIDEO element, handling frame data
// imageData is ImageData type: https://developer.mozilla.org/en-US/docs/Web/API/ImageData
Video.capture(sourceVideoEl, {
 onFrame(imageData => {
   // Do something with pixels...
 });
});
Copy

Example: Using a worker

import {Video} from 'https://unpkg.com/ixfx/dist/visual.js'

Video.capture(sourceVideoEl, {
 workerScript: `./frameProcessor.js`
});
Copy

In frameProcessor.js:

const process = (frame) => {
 // ...process frame

 // Send image back?
 self.postMessage({frame});
};

self.addEventListener(`message`, evt => {
  const {pixels, width, height} = evt.data;
  const frame = new ImageData(new Uint8ClampedArray(pixels),
    width, height);

  // Process it
  process(frame);
});
Copy

Options:

• canvasEl: CANVAS element to use as a buffer (optional)
• maxIntervalMs: Max frame rate (0 by default, ie runs as fast as possible)
• showCanvas: Whether buffer canvas will be shown (false by default)
• workerScript: If this specified, this URL will be loaded as a Worker, and frame data will be automatically posted to it

Implementation: frames are captured using a animation-speed loop to a hidden canvas. From there the pixel data is extracted and sent to either destination. In future the intermediate drawing to a canvas could be skipped if it becomes possible to get pixel data from an ImageBitmap.