Re-export Recorder, RecorderStatus, all Encoders and utils.
booleanCheck for WebCodecs support on the current platform.
numberEstimate the bit rate of a video rounded to nearest megabit. Based on "H.264 for the rest of us" by Kush Amerasinghe.
functionA callback to notify on the status change. To compare with RecorderStatus enum values.
objectOptions for recording. All optional.
objectOptions for recording initialisation. All optional.
"mp4" | "webm" | "png" | "jpg" | "gif" | "mkv" | "mov""in-browser" | "file-system"objectmodule:@ffmpeg/ffmpeg/dist/esm/types.js~FFMessageLoadConfigobjectobjectobjectobjectmodule:h264-mp4-encoder~H264MP4EncoderobjectMediaRecorderOptionsobjectVideoEncoderConfigobjectVideoEncoderConfigmodule:mediabunny~OutputOptionsRecorderOptions](#RecorderOptions)
- [.mimeTypes](#Recorder+mimeTypes) : object
- [.start([startOptions])](#Recorder+start)
- [.step()](#Recorder+step)
- [.stop()](#Recorder+stop) ⇒ ArrayBuffer \| Uint8Array \| Array.<Blob> \| undefined
- [.dispose()](#Recorder+dispose)
### new Recorder(context, [options])
Create a Recorder instance
| Param | Type | Default |
| --------- | ------------------------------------------------ | --------------- |
| context | RenderingContext | |
| [options] | [RecorderOptions](#RecorderOptions) | {} |
### recorder.defaultOptions : [RecorderOptions](#RecorderOptions)
Sensible defaults for recording so that the recorder "just works".
**Kind**: instance property of [Recorder](#Recorder)
### recorder.mimeTypes : object
A mapping of extension to their mime types
**Kind**: instance property of [Recorder](#Recorder)
### recorder.start([startOptions])
Start the recording by initializing and optionally calling the initial step.
**Kind**: instance method of [Recorder](#Recorder)
| Param | Type | Default |
| -------------- | ---------------------------------------------------------- | --------------- |
| [startOptions] | [RecorderStartOptions](#RecorderStartOptions) | {} |
### recorder.step()
Encode a frame and increment the time and the playhead.
Calls `await canvasRecorder.stop()` when duration is reached.
**Kind**: instance method of [Recorder](#Recorder)
### recorder.stop() ⇒ ArrayBuffer \| Uint8Array \| Array.<Blob> \| undefined
Stop the recording and return the recorded buffer.
If options.download is set, automatically start downloading the resulting file.
Is called when duration is reached or manually.
**Kind**: instance method of [Recorder](#Recorder)
### recorder.dispose()
Clean up the recorder and encoder
**Kind**: instance method of [Recorder](#Recorder)
## Encoder
**Kind**: global class
**Properties**
| Name | Type |
| ---------------- | ---------------------------------------------------- |
| target | [EncoderTarget](#EncoderTarget) |
| extension | [EncoderExtensions](#EncoderExtensions) |
| [encoderOptions] | object |
| [muxerOptions] | object |
- [Encoder](#Encoder)
- [new Encoder(options)](#new_Encoder_new)
- [.supportedExtensions](#Encoder+supportedExtensions) : Array.<Extensions>
- [.supportedTargets](#Encoder+supportedTargets) : [Array.<EncoderTarget>](#EncoderTarget)
- [.init(options)](#Encoder+init)
- [.encode(frame, [frameNumber])](#Encoder+encode)
- [.stop()](#Encoder+stop) ⇒ ArrayBuffer \| Uint8Array \| Array.<Blob> \| undefined
- [.dispose()](#Encoder+dispose)
### new Encoder(options)
Base Encoder class. All Encoders extend it and its methods are called by the Recorder.
| Param | Type |
| ------- | ------------------- |
| options | object |
### encoder.supportedExtensions : Array.<Extensions>
The extension the encoder supports
**Kind**: instance property of [Encoder](#Encoder)
### encoder.supportedTargets : [Array.<EncoderTarget>](#EncoderTarget)
The target to download the file to.
**Kind**: instance property of [Encoder](#Encoder)
### encoder.init(options)
Setup the encoder: load binary, instantiate muxers, setup file system target...
**Kind**: instance method of [Encoder](#Encoder)
| Param | Type |
| ------- | ------------------- |
| options | object |
### encoder.encode(frame, [frameNumber])
Encode a single frame. The frameNumber is usually used for GOP (Group Of Pictures).
**Kind**: instance method of [Encoder](#Encoder)
| Param | Type |
| ------------- | ------------------- |
| frame | number |
| [frameNumber] | number |
### encoder.stop() ⇒ ArrayBuffer \| Uint8Array \| Array.<Blob> \| undefined
Stop the encoding process and cleanup the temporary data.
**Kind**: instance method of [Encoder](#Encoder)
### encoder.dispose()
Clean up the encoder
**Kind**: instance method of [Encoder](#Encoder)
## FFmpegEncoder
**Kind**: global class
### new FFmpegEncoder([options])
| Param | Type |
| --------- | ---------------------------------------------------------- |
| [options] | [FFmpegEncoderOptions](#FFmpegEncoderOptions) |
## FrameEncoder
**Kind**: global class
## GIFEncoder
**Kind**: global class
### new GIFEncoder([options])
| Param | Type |
| --------- | ---------------------------------------------------- |
| [options] | [GIFEncoderOptions](#GIFEncoderOptions) |
## H264MP4Encoder
**Kind**: global class
### new H264MP4Encoder([options])
| Param | Type |
| --------- | ------------------------------------------------------------ |
| [options] | [H264MP4EncoderOptions](#H264MP4EncoderOptions) |
## MediaCaptureEncoder
**Kind**: global class
### new MediaCaptureEncoder([options])
| Param | Type |
| --------- | ---------------------------------------------------------------------- |
| [options] | [MediaCaptureEncoderOptions](#MediaCaptureEncoderOptions) |
## MP4WasmEncoder
**Kind**: global class
### new MP4WasmEncoder([options])
| Param | Type |
| --------- | ------------------------------------------------------------ |
| [options] | [MP4WasmEncoderOptions](#MP4WasmEncoderOptions) |
## WebCodecsEncoder
**Kind**: global class
### new WebCodecsEncoder([options])
| Param | Type |
| --------- | ---------------------------------------------------------------- |
| [options] | [WebCodecsEncoderOptions](#WebCodecsEncoderOptions) |
## RecorderStatus : enum
Enum for recorder status
**Kind**: global enum
**Read only**: true
**Example**
```js
// Check recorder status before continuing
if (canvasRecorder.status !== RecorderStatus.Stopped) {
rAFId = requestAnimationFrame(() => tick());
}
```
## isWebCodecsSupported : boolean
Check for WebCodecs support on the current platform.
**Kind**: global constant
## estimateBitRate(width, height, frameRate, motionRank, bitrateMode) ⇒ number
Estimate the bit rate of a video rounded to nearest megabit.
Based on "H.264 for the rest of us" by Kush Amerasinghe.
**Kind**: global function
**Returns**: number - A bitrate value in bits per second
| Param | Type | Default | Description |
| ----------- | ---------------------------------------------------------------------- | --------------------- | --------------------- |
| width | number | | |
| height | number | | |
| frameRate | number | 30 | |
| motionRank | number | 4 | A factor of 1, 2 or 4 |
| bitrateMode | "variable" \| "constant" | variable | |
**Example**
```js
// Full HD (1080p)
const bitRate = estimateBitRate(1920, 1080, 30, "variable");
const bitRateMbps = bitRate * 1_000_000; // => 13 Mbps
```
## onStatusChangeCb : function
A callback to notify on the status change. To compare with RecorderStatus enum values.
**Kind**: global typedef
| Param | Type | Description |
| -------------- | ------------------- | ----------- |
| RecorderStatus | number | the status |
## RecorderOptions : object
Options for recording. All optional.
**Kind**: global typedef
**Properties**
| Name | Type | Default | Description |
| ---------------- | -------------------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [name] | string | "\"\"" | A name for the recorder, used as prefix for the default file name. |
| [duration] | number | 10 | The recording duration in seconds. If set to Infinity, `await canvasRecorder.stop()` needs to be called manually. |
| [frameRate] | number | 30 | The frame rate in frame per seconds. Use `await canvasRecorder.step();` to go to the next frame. |
| [rect] | Array | [] | Sub-region [x, y, width, height] of the canvas to encode from bottom left. Default to 0, 0 and context.drawingBufferWidth/drawingBufferHeight or canvas.width/height. |
| [download] | boolean | true | Automatically download the recording when duration is reached or when `await canvasRecorder.stop()` is manually called. |
| [extension] | string | "\"mp4\"" | Default file extension: infers which Encoder is selected. |
| [target] | string | "\"in-browser\"" | Default writing target: in-browser or file-system when available. |
| [encoder] | object | | A specific encoder. Default encoder based on options.extension: GIF > WebCodecs > H264MP4. |
| [encoderOptions] | object | | See `src/encoders` or individual packages for a list of options. |
| [muxerOptions] | object | | See "mediabunny" for a list of options. |
| [frameOptions] | object | | Options for createImageBitmap(), VideoFrame, getImageData() or canvas-screenshot. |
| [onStatusChange] | [onStatusChangeCb](#onStatusChangeCb) | | |
## RecorderStartOptions : object
Options for recording initialisation. All optional.
**Kind**: global typedef
**Properties**
| Name | Type | Description |
| ---------- | -------------------- | ----------------------------------------------------------------------------- |
| [filename] | string | Overwrite the file name completely. |
| [initOnly] | boolean | Only initialised the recorder and don't call the first await recorder.step(). |
## EncoderExtensions : "mp4" \| "webm" \| "png" \| "jpg" \| "gif" \| "mkv" \| "mov"
**Kind**: global typedef
## EncoderTarget : "in-browser" \| "file-system"
**Kind**: global typedef
## FFmpegEncoderOptions : object
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ---------------- | ------------------------------------------------------------------------ | --------------- |
| [encoderOptions] | [FFmpegEncoderEncoderOptions](#FFmpegEncoderEncoderOptions) | {} |
## FFmpegEncoderEncoderOptions : module:@ffmpeg/ffmpeg/dist/esm/types.js~FFMessageLoadConfig
**Kind**: global typedef
**See**: [FFmpeg#load](https://ffmpegwasm.netlify.app/docs/api/ffmpeg/classes/FFmpeg#load)
## GIFEncoderOptions : object
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ----------------- | -------------------------------------------------------------------- | ---------------- |
| [maxColors] | number | 256 |
| [quantizeOptions] | [GIFEncoderQuantizeOptions](#GIFEncoderQuantizeOptions) | |
| [encoderOptions] | [GIFEncoderEncoderOptions](#GIFEncoderEncoderOptions) | {} |
## GIFEncoderQuantizeOptions : object
**Kind**: global typedef
**See**: [QuantizeOptions](https://github.com/mattdesl/gifenc#palette--quantizergba-maxcolors-options--)
**Properties**
| Name | Type | Default |
| --------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------- |
| [format] | "rgb565" \| "rgb444" \| "rgba4444" | "rgb565" |
| [oneBitAlpha] | boolean \| number | false |
| [clearAlpha] | boolean | true |
| [clearAlphaThreshold] | number | 0 |
| [clearAlphaColor] | number | 0x00 |
## GIFEncoderEncoderOptions : object
**Kind**: global typedef
**See**: [WriteFrameOpts](https://github.com/mattdesl/gifenc#gifwriteframeindex-width-height-opts--)
**Properties**
| Name | Type | Default |
| ------------------ | ----------------------------------------------- | ------------------ |
| [palette] | Array.<Array.<number>> | |
| [first] | boolean | false |
| [transparent] | boolean | 0 |
| [transparentIndex] | number | 0 |
| [delay] | number | 0 |
| [repeat] | number | 0 |
| [dispose] | number | -1 |
## H264MP4EncoderOptions : object
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ---------------- | -------------------------------------------------------------------------- | --------------- |
| [debug] | boolean | |
| [encoderOptions] | [H264MP4EncoderEncoderOptions](#H264MP4EncoderEncoderOptions) | {} |
## H264MP4EncoderEncoderOptions : module:h264-mp4-encoder~H264MP4Encoder
**Kind**: global typedef
**See**: [h264-mp4-encoder#api](https://github.com/TrevorSundberg/h264-mp4-encoder#api)
## MediaCaptureEncoderOptions : object
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ---------------- | ------------------------------------------------------------------------------------ | --------------- |
| [flushFrequency] | number | 10 |
| [encoderOptions] | [MediaCaptureEncoderEncoderOptions](#MediaCaptureEncoderEncoderOptions) | {} |
## MediaCaptureEncoderEncoderOptions : MediaRecorderOptions
**Kind**: global typedef
**See**: [MediaRecorder#options](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder#options)
## MP4WasmEncoderOptions : object
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ----------------- | -------------------------------------------------------------------------- | --------------- |
| [groupOfPictures] | number | 20 |
| [flushFrequency] | number | 10 |
| [encoderOptions] | [MP4WasmEncoderEncoderOptions](#MP4WasmEncoderEncoderOptions) | {} |
## MP4WasmEncoderEncoderOptions : VideoEncoderConfig
**Kind**: global typedef
**See**: [VideoEncoder.configure](https://developer.mozilla.org/en-US/docs/Web/API/VideoEncoder/configure#config)
## WebCodecsEncoderOptions : object
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ----------------- | ------------------------------------------------------------------------------ | --------------- |
| [groupOfPictures] | number | 20 |
| [flushFrequency] | number | 10 |
| [encoderOptions] | [WebCodecsEncoderEncoderOptions](#WebCodecsEncoderEncoderOptions) | {} |
## WebCodecsEncoderEncoderOptions : VideoEncoderConfig
**Kind**: global typedef
**See**: [VideoEncoder.configure](https://developer.mozilla.org/en-US/docs/Web/API/VideoEncoder/configure#config)
## WebCodecsMuxerOptions : module:mediabunny~OutputOptions
**Kind**: global typedef
**See**: [mediabunny#output-formats](https://mediabunny.dev/guide/output-formats)
## License
All MIT:
- [mp4-wasm](https://github.com/mattdesl/mp4-wasm/blob/master/LICENSE.md)
- [h264-mp4-encoder](https://github.com/TrevorSundberg/h264-mp4-encoder/blob/master/LICENSE.md)
- [@ffmpeg/ffmpeg](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/LICENSE)
- [gifenc](https://github.com/mattdesl/gifenc/blob/master/LICENSE.md)
- [mediabunny](https://github.com/Vanilagy/mediabunny/blob/main/LICENSE)
MIT. See [license file](https://github.com/dmnsgn/canvas-record/blob/main/LICENSE.md).