Record a video in the browser or directly on the File System from a canvas region (2D/WebGL/WebGPU) as MP4, WebM, MKV, MOV, GIF, PNG/JPG Sequence using WebCodecs and Wasm when available.

npm install canvas-record

import { Recorder, RecorderStatus, Encoders } from "canvas-record";
import createCanvasContext from "canvas-context";
import { AVC } from "media-codecs";

// Setup
const pixelRatio = devicePixelRatio;
const width = 512;
const height = 512;
const { context, canvas } = createCanvasContext("2d", {
  width: width * pixelRatio,
  height: height * pixelRatio,
  contextAttributes: { willReadFrequently: true },
});
Object.assign(canvas.style, { width: `${width}px`, height: `${height}px` });

const mainElement = document.querySelector("main");
mainElement.appendChild(canvas);

// Animation
let canvasRecorder;

function render() {
  const width = canvas.width;
  const height = canvas.height;

  const t = canvasRecorder.frame / canvasRecorder.frameTotal || Number.EPSILON;

  context.clearRect(0, 0, width, height);
  context.fillStyle = "red";
  context.fillRect(0, 0, t * width, height);
}

const tick = async () => {
  render();

  if (canvasRecorder.status !== RecorderStatus.Recording) return;
  await canvasRecorder.step();

  if (canvasRecorder.status !== RecorderStatus.Stopped) {
    requestAnimationFrame(() => tick());
  }
};

canvasRecorder = new Recorder(context, {
  name: "canvas-record-example",
  encoderOptions: {
    codec: AVC.getCodec({ profile: "Main", level: "5.2" }),
  },
});

// Start and encode frame 0
await canvasRecorder.start();

// Animate to encode the rest
tick(canvasRecorder);

Encoder comparison:

Note:

• WebCodecs encoderOptions allow different codecs to be used: VP8/VP9/AV1/HEVC. See media-codecs to get a codec string from human readable options and check which ones are supported in your browser with github.io/media-codecs.
• WebCodecs 5-10x faster than H264MP4Encoder and 20x faster than FFmpeg (it needs to mux files after writing png to virtual FS)
• FFmpeg (mp4 and webm) and WebCodecs (mp4) have a AVC maximum frame size of 9437184 pixels. That's fine until a bit more than 4K 16:9 @ 30fps. So if you need 4K Square or 8K exports, be patient with H264MP4Encoder (which probably also has the 4GB memory limit) or use Frame encoder and mux them manually with FFmpeg CLI (ffmpeg -framerate 30 -i "%05d.jpg" -b:v 60M -r 30 -profile:v baseline -pix_fmt yuv420p -movflags +faststart output.mp4)
• MP4Wasm is embedded from mp4-wasm for ease of use (FFmpeg will require encoderOptions.corePath)

Roadmap:

• add debug logging
• use WebWorkers for gifenc

canvas-record

Re-export Recorder, RecorderStatus, all Encoders and utils.

Recorder

Encoder

FFmpegEncoder

FrameEncoder

GIFEncoder

H264MP4Encoder

MediaCaptureEncoder

MP4WasmEncoder

WebCodecsEncoder

isWebCodecsSupported : boolean

Check for WebCodecs support on the current platform.

estimateBitRate(width, height, frameRate, motionRank, bitrateMode) ⇒ number

Estimate the bit rate of a video rounded to nearest megabit. Based on "H.264 for the rest of us" by Kush Amerasinghe.

onStatusChangeCb : function

A callback to notify on the status change. To compare with RecorderStatus enum values.

RecorderOptions : object

Options for recording. All optional.

RecorderStartOptions : object

Options for recording initialisation. All optional.

EncoderExtensions : "mp4" | "webm" | "png" | "jpg" | "gif" | "mkv" | "mov"

EncoderTarget : "in-browser" | "file-system"

FFmpegEncoderOptions : object

FFmpegEncoderEncoderOptions : module:@ffmpeg/ffmpeg/dist/esm/types.js~FFMessageLoadConfig

GIFEncoderOptions : object

GIFEncoderQuantizeOptions : object

GIFEncoderEncoderOptions : object

H264MP4EncoderOptions : object

H264MP4EncoderEncoderOptions : module:h264-mp4-encoder~H264MP4Encoder

MediaCaptureEncoderOptions : object

MediaCaptureEncoderEncoderOptions : MediaRecorderOptions

MP4WasmEncoderOptions : object

MP4WasmEncoderEncoderOptions : VideoEncoderConfig

WebCodecsEncoderOptions : object

WebCodecsEncoderEncoderOptions : VideoEncoderConfig

WebCodecsMuxerOptions : module:mediabunny~OutputOptions

Re-export Recorder, RecorderStatus, all Encoders and utils.

Kind: global class

• Recorder
  • new Recorder(context, [options])
  • .defaultOptions : RecorderOptions
  • .mimeTypes : object
  • .start([startOptions])
  • .step()
  • .stop() ⇒ ArrayBuffer | Uint8Array | Array.<Blob> | undefined
  • .dispose()

Create a Recorder instance

Sensible defaults for recording so that the recorder "just works".

Kind: instance property of Recorder

A mapping of extension to their mime types

Kind: instance property of Recorder

Start the recording by initializing and optionally calling the initial step.

Kind: instance method of Recorder

Encode a frame and increment the time and the playhead. Calls await canvasRecorder.stop() when duration is reached.

Kind: instance method of Recorder

Stop the recording and return the recorded buffer. If options.download is set, automatically start downloading the resulting file. Is called when duration is reached or manually.

Kind: instance method of Recorder

Clean up the recorder and encoder

Kind: instance method of Recorder

Kind: global class Properties

• Encoder
  • new Encoder(options)
  • .supportedExtensions : Array.<Extensions>
  • .supportedTargets : Array.<EncoderTarget>
  • .init(options)
  • .encode(frame, [frameNumber])
  • .stop() ⇒ ArrayBuffer | Uint8Array | Array.<Blob> | undefined
  • .dispose()

Base Encoder class. All Encoders extend it and its methods are called by the Recorder.

The extension the encoder supports

Kind: instance property of Encoder

The target to download the file to.

Kind: instance property of Encoder

Setup the encoder: load binary, instantiate muxers, setup file system target...

Kind: instance method of Encoder

Encode a single frame. The frameNumber is usually used for GOP (Group Of Pictures).

Kind: instance method of Encoder

Stop the encoding process and cleanup the temporary data.

Kind: instance method of Encoder

Clean up the encoder

Kind: instance method of Encoder

Kind: global class

Kind: global class

Kind: global class

Kind: global class

Kind: global class

Kind: global class

Kind: global class

Enum for recorder status

Kind: global enum Read only: true Example

// Check recorder status before continuing
if (canvasRecorder.status !== RecorderStatus.Stopped) {
  rAFId = requestAnimationFrame(() => tick());
}

Check for WebCodecs support on the current platform.

Kind: global constant

Estimate the bit rate of a video rounded to nearest megabit. Based on "H.264 for the rest of us" by Kush Amerasinghe.

Kind: global function Returns: number - A bitrate value in bits per second

Example

// Full HD (1080p)
const bitRate = estimateBitRate(1920, 1080, 30, "variable");
const bitRateMbps = bitRate * 1_000_000; // => 13 Mbps

A callback to notify on the status change. To compare with RecorderStatus enum values.

Kind: global typedef

Options for recording. All optional.

Kind: global typedef Properties

Options for recording initialisation. All optional.

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef See: FFmpeg#load

Kind: global typedef Properties

Kind: global typedef See: QuantizeOptions Properties

Kind: global typedef See: WriteFrameOpts Properties

Kind: global typedef Properties

Kind: global typedef See: h264-mp4-encoder#api

Kind: global typedef Properties

Kind: global typedef See: MediaRecorder#options

Kind: global typedef Properties

Kind: global typedef See: VideoEncoder.configure

Kind: global typedef Properties

Kind: global typedef See: VideoEncoder.configure

Kind: global typedef See: mediabunny#output-formats

All MIT:

• mp4-wasm
• h264-mp4-encoder
• @ffmpeg/ffmpeg
• gifenc
• mediabunny

MIT. See license file.