canvas-record

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

Usage no npm install needed!

<script type="module">
  import canvasRecord from 'https://cdn.skypack.dev/canvas-record';
</script>

README

canvas-record

npm version stability-experimental npm minzipped size dependencies types Conventional Commits styled with prettier linted with eslint license

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

paypal coinbase twitter

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(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.