canvas-record
A one trick pony package to record and download a video from a canvas animation.
Last updated 5 months ago by dmnsgn .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install canvas-record 
SYNC missed versions from official npm registry.

canvas-record experimental

npm version styled with prettier

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

Installation

npm install canvas-record

NPM

Usage

const createCanvasRecorder = require("canvas-record");
const createCanvasContext = require("canvas-context");

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

async function record() {
  // Create recorder
  const canvasRecorder = createCanvasRecorder(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

createCanvasRecorder(canvas, options): DOMString | Promise<Blob>

Option Type Default Description
canvas HTMLCanvasElement The canvas element
options.filename string? Recording YYYY-MM-DD at HH.MM.SS.png File name
options.frameRate number? 25 The frame rate used by the MediaRecorder
options.download boolean? true Automatically download the recording
options.recorderOptions See https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder#Properties? true The MediaRecorder options.

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

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

canvasRecorder.start(timeslice?: number): void

Option Type Default 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.

canvasRecorder.step(): void

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

See https://developer.mozilla.org/en-US/docs/Web/API/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.

canvasRecorder.stop(): Blob[] | []

Stop the recorder which will consecutively call the recorder.onstop callback and download the video if not disable in the options. Returns the Blob chunk array (or chunks if timeslice is specified when starting the recorder).

canvasRecorder.dispose(): void

Set recorder and stream to null for GC.

canvasRecorder.recorder

A reference to the MediaRecorder (see https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder).

canvasRecorder.stream

A reference to the CanvasCaptureMediaStream (see https://developer.mozilla.org/en-US/docs/Web/API/CanvasCaptureMediaStream).

License

MIT. See license file.

Current Tags

  • 2.1.0                                ...           latest (5 months ago)

3 Versions

  • 2.1.0                                ...           5 months ago
  • 2.0.0                                ...           5 months ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 2
Last Month 7
Dependencies (1)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |