canvas-record

A one trick pony package to record and download a video from a canvas animation.

Installation

npm install canvas-record

Usage

import canvasRecord from "canvas-record";
import canvasContext from "canvas-context";

const width = 100;
const height = 100;
const { context, canvas } = canvasContext("2d", {
  width,
  height,
});
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function record() {
  // Create recorder
  const canvasRecorder = canvasRecord(canvas);
  canvasRecorder.start();

  // Start canvas animation
  animate();

  // Let it run for 2 seconds
  await sleep(2000);

  // Stop and dispose
  canvasRecorder.stop();
  canvasRecorder.dispose();
}

record();

API

Modules

canvasRecord

Typedefs

CanvasRecordOptions : Object

Options for canvas creation. All optional.

canvasRecord

• canvasRecord
  • canvasRecord(canvas, [options]) ⇒ Object ⏏
    • ~filename
    • ~stream
    • ~recorder
    • ~start([timeslice])
    • ~step()
    • ~stop() ⇒ Array.<Blob> | Array
    • ~dispose()

canvasRecord(canvas, [options]) ⇒ Object ⏏

Kind: Exported function
Returns: Object - The video MimeType is defined by recorderOptions.mimeType if present or is inferred from the filename extension (mkv) for "video/x-matroska;codecs=avc1" and default to "video/webm".
See: MediaRecorder#Properties

// Currently supported by Chrome
MediaRecorder.isTypeSupported("video/x-matroska;codecs=avc1");
MediaRecorder.isTypeSupported("video/webm");
MediaRecorder.isTypeSupported("video/webm;codecs=vp8");
MediaRecorder.isTypeSupported("video/webm;codecs=vp9");
MediaRecorder.isTypeSupported("video/webm;codecs=vp8.0");
MediaRecorder.isTypeSupported("video/webm;codecs=vp9.0");
MediaRecorder.isTypeSupported("video/webm;codecs=vp8,opus");
MediaRecorder.isTypeSupported("video/webm;codecs=vp8,pcm");
MediaRecorder.isTypeSupported("video/WEBM;codecs=VP8,OPUS");
MediaRecorder.isTypeSupported("video/webm;codecs=vp9,opus");
MediaRecorder.isTypeSupported("video/webm;codecs=vp8,vp9,opus");

canvasRecord~filename

Update the filename. Useful when recording several videovideos.

Kind: inner property of canvasRecord

canvasRecord~stream

A reference to the CanvasCaptureMediaStream

Kind: inner property of canvasRecord
See: MDN CanvasCaptureMediaStream

canvasRecord~recorder

A reference to the MediaRecorder.

Kind: inner property of canvasRecord
See: MDN MediaRecorder

canvasRecord~start([timeslice])

Start recording.

Kind: inner method of canvasRecord

canvasRecord~step()

Only needed when there is a need to exactly to capture a canvas state at an instant t.

Kind: inner method of canvasRecord
See: MDN CanvasCaptureMediaStreamTrack/requestFrame The CanvasCaptureMediaStreamTrack method requestFrame() requests that a frame be captured from the canvas and sent to the stream. Applications that need to carefully control the timing of rendering and frame capture can use requestFrame() to directly specify when it's time to capture a frame. To prevent automatic capture of frames, so that frames are only captured when requestFrame() is called, specify a value of 0 for the captureStream() method when creating the stream.

Notes: the technology is still a Working Draft not sure the output is guaranteed to have perfect frames.

canvasRecord~stop() ⇒ Array.<Blob> | Array

Stop the recorder which will consecutively call the recorder.onstop callback and download the video if not disable in the options.

Kind: inner method of canvasRecord
Returns: Array.<Blob> | Array - Returns the Blob chunk array (or chunks if timeslice is specified when starting the recorder).

canvasRecord~dispose()

Set recorder and stream to null for GC.

Kind: inner method of canvasRecord

CanvasRecordOptions : Object

Options for canvas creation. All optional.

Kind: global typedef
Properties

License

MIT. See license file.