Skip to content
ixfx

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.

Frames

Section titled “Frames”

Video.frames returns frames as a generator.

import { Video } from 'https://unpkg.com/@ixfx/visual/bundle'


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

Section titled “Capture”

Video.capture returns frames to a callback function.

import { Video } from 'https://unpkg.com/@ixfx/visual/bundle'


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

Importing

Section titled “Importing”
// Sub module
import { Video } from "@ixfx/visual.js"
// Eg: Video.frames();


// Whole module
import * as Visual from "@ixfx/visual.js"
// Eg: Visual.Video.frames();


// From bundle
import { Visual } from "@ixfx"
// Eg: Visual.Video.frames();


// And within your HTML's <HEAD> </HEAD> block:
<script type="importmap">{ "imports": { "@ixfx":"/ixfx/index.js", "@ixfx/": "/ixfx/" } }</script>