Skip to main content

Class: Recorder

@geenee/armature.Recorder

Recorder helper

Records a video of the ResponsiveCanvas backing a CanvasRenderer. ResponsiveCanvas is multi-layer. Every rendering update Recorder merges all snapshots onto the recording canvas. Then canvas'es content is grabbed and encoded by MediaRecorder. Encoded video chunks are cached to later be merged into one blob containing the final video file. There're several modes for resolution of the recorded video: "video" - records in the same resolution as the video stream, "max"/"min" - in maximum/minimum size among layers of canvas. Additionally one can limit resolution and bitrate of a video.

Constructors

constructor

new Recorder(renderer, type?, mirror?, sizeMode?, sizeMax?, bitRate?)

Constructor

Parameters

NameTypeDefault valueDescription
rendererCanvasRenderer<{}>undefinedRenderer to record video from
typestring"video/webm"Media/video type
mirrorbooleanfalseMirror captured images
sizeMode"video" | "max" | "min""video"Video size mode
sizeMax?numberundefinedMaximum video size
bitRate?numberundefinedVideo stream bit rate

Properties

bitRate

Protected Optional bitRate: number

Video stream bit rate


canvas

Protected canvas: HTMLCanvasElement

Canvas to capture video


context

Protected context: null | CanvasRenderingContext2D = null

Drawing context of capturing canvas


mirror

Protected mirror: boolean = false

Mirror captured images


recorder

Protected Optional recorder: MediaRecorder

Video recorder


records

Protected records: Blob[] = []

Record chunks


renderer

Protected renderer: CanvasRenderer<{}>

Renderer to record video from


sizeMax

Protected Optional sizeMax: number

Maximum video size


sizeMode

Protected sizeMode: "video" | "max" | "min" = "video"

Video size mode


stream

Protected Optional stream: MediaStream

Video stream


type

Protected type: string = "video/webm"

Media/video type

Methods

dispose

dispose(): void

Dispose recorder object

Releases resources and instances allocated by recorder. Recorder object cannot be used after calling dispose(). One needs to stop recording before disposing the object.

Returns

void


frame

Protected frame(): void

Renderer update callback

On every update Recorder draws all layers onto recording canvas and requests video track to capture a new frame.

Returns

void


start

start(): boolean

Start video recording

On every render update Recorder draws all layers onto recording canvas. Chunks of encoded media stream are cached to later be merged into one blob on stop().

Returns

boolean

True if recording started, False otherwise


stop

stop(): Promise<undefined | Blob>

Stop video recording

Renderer stops recording and then merges encoded video stream chunks into one blob returned to user.

Returns

Promise<undefined | Blob>

Promise resolved to Blob containing encoded video