Camera Processor v0.9.5

A Simple to Use Webcam Filter Framework.

Installation

$ npm install camera-processor

Extra Packages

• @camera-processor/virtual-background - Easy-to-use background masking.

• More coming in the future...

Basic Concepts

Frame Analyzers

Frame Analyzers take frames from your camera and asynchronously give back some information about them that your app and Frame Renderers can use.

Frame Renderers

Frame Renderers take the information given to them by the Frame Analyzers and use Render Modes to draw things on top of the camera.

Render Modes

Render Modes give you a canvas and a canvas context that Frame Renderers can use to draw. There are 2 Render Modes that come with this library - _2DRenderMode and WebGLRenderMode (Unfinished).

Camera Processor

The Camera Processor is the main component of this library. It combines the Frame Analyzers with the Frame Renderers and a frame loop.

Usage

A Simple Mock Example

1import CameraProcessor from 'camera-processor';
2
3const camera_processor = new CameraProcessor();
4camera_processor.setCameraStream(camera_stream); // Set the camera stream from somewhere
5camera_processor.start(); // You have to explicitly start it after setCameraStream
6
7// Add some analyzer (the first argument is the name and it's very important)
8const some_analyzer = camera_processor.addAnalyzer('some_analyzer', new SomeAnalyzer());
9// Add some renderer that might or might not use data from the analyzers
10const some_renderer = camera_processor.addRenderer(new SomeRenderer());
11
12const output_stream = camera_processor.getOutputStream(); // Get the output stream and use it

Accessing Data From the Analyzers

1// Get the data for the last frame from all analyzers
2const analyzer_data = camera_processor.analyzer.data;
3
4// This object has a key for every name you used with addAnalyzer
5// And the value of this key is the data for the last frame returned by that analyzer
6console.log(analyzer_data);
7// > { some_analyzer: ... }

Checking Performance

1console.log(camera_processor.performance);
2// > {
3//     fps: ...,
4//     frameTime: {
5//       analyze: ...,
6//       render: ...,
7//       total: ...
8//     }
9//   }

Performance Options

1camera_processor.setPerformanceOptions({
2  useTimeWorker: true, // Schedule callbacks in a worker to stop camera-processor from being throttled after minimizing tab
3  useIdle: false, // use requestIdleCallback if available (false by default)
4  everyNFrames: 2, // Run every n frames and skip the others (1 by default - run every frame)
5  idealFPS: 30 // Your ideal FPS (Only works with TimeWorker)
6});
7// *requestIdleCallback - https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback

Passthrough Mode

1// Stop all analyzers and renderers and just pass the camera stream through the output stream
2camera_processor.passthrough = true;

Start/Stop

1camera_processor.start(); // Start/Resume (has to be called explicitly in the beginning)
2camera_processor.stop(); // Stop/Pause (also freezes the camera through the output stream)
3// Use passthrough mode if you just want to stop all renderers and analyzers
4
5// All analyzers and renderers have the same start/stop methods
6// to start and stop them individually but unlike the CameraProcessor
7// they're are started by default
8some_analyzer.start();
9some_renderer.stop();
10
11// Check if the CameraProcessor or any analyzer/renderer is running
12console.log(camera_processor.isRunning);
13console.log(some_analyzer.isRunning);

Freeing The Camera Stream

1// Free the camera stream when you know you won't use it again
2// This function loses the reference to the stream.
3// It takes in one parameter - destroy (false by default)
4// If destroy is true, the camera stream and all it's tracks
5// will be stopped and removed.
6camera_processor.freeCameraStream(true);

Typescript Tip

1type AnalyzerData = { some_analyzer: SomeType };
2
3// This will give you special typing for the camera_processor.analyzer.data
4const camera_processor = new CameraProcessor<AnalyzerData>();

A Note On Streams And Tracks

CameraProcessor will automatically pause (not stop) to save performance when there are no output tracks active. Restrain from using stream.clone() or track.clone() because the new cloned tracks can't and won't count as active.

A Note On Browser Support

Safari is currently not supported.

Extending Library Functionality

Writing Frame Analyzers

1import { FrameAnalyzer } from 'camera-processor';
2
3class SomeAnalyzer extends FrameAnalyzer {
4  async analyze(camera_video, camera_processor) {
5    // Do something with camera_video
6    return some_data;
7  }
8}
9
10// camera_processor.addAnalyzer('some_analyzer', new SomeAnalyzer());

Writing Frame Renderers

1import { FrameRenderer, RENDER_MODE } from 'camera-processor';
2
3// Check 'Using The Camera Renderer' below for more details on 'renderer' and 'RENDER_MODE'
4class SomeRenderer extends FrameRenderer {
5  render(analyzer_data, camera_video, renderer, camera_processor) {
6    renderer.use(RENDER_MODE._2D); // Switch to the specified Render Mode (always do this at the start)
7
8    renderer.ctx.fillStyle = 'green';
9    renderer.ctx.fillRect(0, 0, renderer.width, renderer.height);
10  }
11}
12
13// camera_processor.addRenderer(new SomeRenderer());

Using The Camera Renderer

1// In the render method of a FrameRenderer you have access to the CameraRenderer (renderer)
2renderer.use(RENDER_MODE._2D); // Switch to that canvas and canvas context
3
4// Note: A FrameRenderer can use multiple different RenderModes one after another and the image will
5// be copied from the previous one to the next so that you can make incremental changes to the image
6// by rendering transparent things on top of it.
7
8renderer.canvas; // Access the current RenderMode's canvas
9renderer.ctx; // Access the current RenderMode's canvas context
10
11renderer.width; // Access the camera's width
12renderer.height; // Access the camera's height

RENDER_MODE is an enum that allows you to specify what kind of canvas context you want to use.
RENDER_MODE._2D will use a 2d canvas.
RENDER_MODE.WebGL will use a webgl2/webgl canvas. (Unfinished)

TODO

• Implement some kind of API for resizing CanvasSources and getting their ImageData back. (Will be useful for FrameAnalyzers and FrameRenderers)
• Finish implementing WebGLRenderMode to allow rendering with WebGL.
• (Possibly finished) Fix the output stream freezing when the page is hidden. (using time-worker and OffscreenCanvas)