Skip to content
ixfx

Frame processor

Module Io

The Io.FrameProcessor allows reading and processing of frames from a camera or video file. The FrameProcessor is useful writing code that supports either kind of source, and when you want to manually request frames.

By default nothing is shown. But you can show the canvas FrameProcessor is using to capture frames, or a raw preview.

import { FrameProcessor } from 'https://unpkg.com/ixfx/dist/io.js'
const fp = new FrameProcessor({
  showCanvas:true,
  showPreview:true
});

Once created, call getFrame to get an ImageData frame. With this, you can manually scan through the pixels of the image.

Capturing from a camera

import { FrameProcessor } from 'https://unpkg.com/ixfx/dist/io.js'
const fp = new FrameProcessor();
fp.useCamera();

If you have several cameras, you might need to specify which one. At times you may also want to restrict the frame size, since processing smaller images is faster than large.

fp.useCamera({
  // Get camera facing user (other possible value is 'environment')
  facingMode: `user`,
  // Get a frame size as close to this as possible
  ideal: {
    width: 1024,
    height: 768
  }
})

Camera constraints can also be specified when creating the FrameProcessor instance:

const fp = new FrameProcessor({
  cameraContraints: {
    deviceId: `Logitech Superduper Cam`
  }
});


fp.useCamera(); // Will use settings when created

Capturing from a file

import { FrameProcessor } from 'https://unpkg.com/ixfx/dist/io.js'
const fp = new FrameProcessor();
fp.useVideo(file);

useVideo takes a File instance.