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");

Param	Type	Default	Description
canvas	`HTMLCanvasElement`		The canvas element
[options]	`CanvasRecordOptions`	`{}`

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

Param	Type	Description
[timeslice]	`number`	The number of milliseconds to record into each Blob. If this parameter isn't included, the entire media duration is recorded into a single Blob unless the requestData() method is called to obtain the Blob and trigger the creation of a new Blob into which the media continues to be recorded.

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

Name	Type	Default	Description
[filename]	`string`	`"Recording YYYY-MM-DD at HH.MM.SS.png"`	File name.
[frameRate]	`number`	`25`	The frame rate used by the `MediaRecorder`.
[download]	`boolean`	`true`	Automatically download the recording.
[recorderOptions]	`Object`	`{audioBitsPerSecond: 128000, videoBitsPerSecond: 2500000 }`	The `MediaRecorder` options.

License

MIT. See license file.

MehdiKhoshnevisz/canvas-record