Recordable Canvas Web Component

• ffmpeg.js

  10 3,211 0.0 JavaScript

  Port of FFmpeg with Emscripten

There are solutions to transcode to MP4 live in your browser, such as with [FFMPEG.js (https://github.com/Kagami/ffmpeg.js/). MP4 is actually just the containing file however! The codec that you record with still needs to be supported by MP4. So prepare for FFMPEG.js to do lots of work if you go this route!

• mp4box.js

  3 1,816 4.8 JavaScript

  JavaScript version of GPAC's MP4Box tool

  

Luckily there are loads of great libraries that can do this for us. One such library is [MP4Box.js (https://github.com/gpac/mp4box.js/). MP4Box.js is a JS port of an incredibly comprehensive toolset of MP4 utilities.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• recordable-canvas

  1 6 3.6 TypeScript

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

  

As these things usually go though, its a CommonJS project. Sigh. I won't get on my soapbox to say ES modules are no longer the future but the present, and we should all ditch CommonJS. Instead, I'll just tell you that I pre-bundled the library with Rollup in the recordable-canvas component, so we can use it as an ES module. We [did this for Tensorflow.js (http://webcomponents.space/posts/s01e03/) on Web Components in Space before. But all it means is that I bundled it with Rollup, so it becomes yet another source file in our project. This means that end users who want to use recordable-canvas can still work with the original source files as ES modules without having to worry about front-end tooling setups themselves.

• canvas-record

  1 275 7.1 JavaScript

  Record a video in the browser or directly on the File System from a canvas (2D/WebGL/WebGPU) as MP4, WebM, MKV, GIF, PNG/JPG Sequence using WebCodecs and Wasm when available.

When I was browsing NPM for similar projects I do see that this one looks wayyyyy better! It's not a Web Component, but it's similar in what it does. Canvas-record seems to offer several different ways to encode your recordings including a WASM one which should be super speedy!

Suggest a related project