Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/web-components-in-space/recordable-canvas

A Web Component based canvas element wrapper that can be recorded to a downloadable video
https://github.com/web-components-in-space/recordable-canvas

canvas mp4box webcodecs webcomponent webcomponents

Last synced: about 1 month ago
JSON representation

A Web Component based canvas element wrapper that can be recorded to a downloadable video

Awesome Lists containing this project

README 

        
# recordable-canvas

A canvas element that can be recorded to a downloadable video



`` is a Web Component that wraps the canvas element and provides an API to record the contents

of the canvas to an MP4 file.



It uses the Web Codecs API (https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API) to encode the stream, 

and then MP4Box.js (https://github.com/gpac/mp4box.js/) to mux and save the file.



Since the canvas has a limited API (as most operations are done through the canvas context, you should find all the methods you'd normally need on an HTMLCanvasElement

passed through.



In addition to any normal canvas attributes, a `recording` attribute will be applied when this 

component is recording. There are also few more API calls:



Use by importing `index.js` or `recordable-canvas.js` and wait for the `ready` event

to set up the canvas (otherwise the component may not have registered yet and not have an API)

```



    import 'recordable-canvas';

    const canvas = document.body.querySelector('recordable-canvas');

    canvas.addEventListener('ready', () => { ...



```



`get innerCanvas`

-----------------

as the canvas we're recording against is wrapped with the `recordable-canvas` Web Component, 

if you need to access this canvas for any reason, you may do so with this getter



`startRecording`

----------------

Start canvas recording. This accepts two optional arguments:

- timeBetweenKeyframes: if you want to change the default time in milliseconds (1000) between keyframes in the encoded video, you may set this here

- config: a custom VideoEncoderConfig you may pass to override the default (specified below)



Default Encoder Configuration:

```

{

    codec : 'avc1.42001E',

    width: 0,

    height: 0,

    hardwareAcceleration:"prefer-hardware",

    avc:{format:"avc"}

}

```

*width and height will be overwritten with the canvas width and height*



avc1.42001E refers to AVC baseline level 3 which supports 1920x1080 as shown in the demos in this repo.

Refer here for others https://privacycheck.sec.lrz.de/active/fp_cpt/fp_can_play_type.html



`stopRecording`

----------------

Stops recording the canvas. Accepts an optional string for a filename. If the filename is

specified, the file will automatically be saved as a download



`saveFile`

-----------

Accepts a filename as a parameter and when calls, saves the file as a download



`get isRecording`

-----------------

A getter which will return true or false to indicate if recording is in progress



`encodeFrame`

-------------

Pass with no arguments. This will snapshot the current state of the canvas and encode it.

Recordings occur in realtime, meaning the frame's timestamp will be relative to

the "startRecording" call measured by your system's time. For example, if you call `encodeFrame`

3 seconds after you start recording, that timestamp will be 3 seconds in the video.



This will also return the current duration of the video in MICROseconds (to match the internal timestamp of the frame).



-------------------------------



Using without the Web Component

===============================



The Web Component API mainly serves as a wrapper for the `canvasrecorder.js` class.

Most of the API is the same with the exception of needing to pass the canvas where needed.



`get isRecording`

-----------------

A getter which will return true or false to indicate if recording is in progress



`get recordingDuration`

-----------------

A getter which will return the duration in milliseconds of your current recording



`startRecording`

----------------

Start canvas recording. One required and two optional arguments are accepted:

- canvas: The canvas element being recorded

- timeBetweenKeyframes: if you want to change the default time in milliseconds (1000) between keyframes in the encoded video, you may set this here

- config: a custom VideoEncoderConfig you may pass to override the default (specified below)



`stopRecording`

----------------

Stops recording the canvas. Accepts an optional string for a filename. If the filename is

specified, the file will automatically be saved as a download



`saveFile`

-----------

Accepts a filename as a parameter and when calls, saves the file as a download



`encode`

--------

- canvas: The canvas element being recorded at the time you wish to snapshot it

Recordings occur in realtime, meaning the frame's timestamp will be relative to

the "startRecording" call measured by your system's time. For example, if you call `encode`

3 seconds after you start recording, that timestamp will be 3 seconds in the video.



This will also return the current duration of the video in MICROseconds (to match the internal timestamp of the frame).