Video

Module Visual.Video

This module has two functions for reading frames. Video.frames gives generator-style access, Video.capture gives callback-style access.

Both give back frames as ImageData. See Image Data for tips on how to read pixel values from these objects.

In both cases, you can use the maxIntervalMs option to set the speed at which frames are read. By default the value is 0, reading as fast as possible. If you’re doing heavy processing, you may want to increase this value to not overload your device.

Tip

See Camera to see these functions in action.

Frames

Video.frames returns frames as a generator.

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

const ctx = canvasEl.getContext(`2d`);
for await (const frame of Video.frames(videoEl)) {
  // TODO: Some processing of pixels

  // Draw image on to the visible canvas
  ctx.putImageData(frame, 0, 0);
}

Capture

Video.capture returns frames to a callback function.

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

// Capture from a VIDEO element, handling frame data
Video.capture(sourceVideoEl, {
  onFrame(imageData => {
    // Do something with pixels...
  });
});