recordable-canvas VS ffmpeg.js

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.

You likely want something like https://github.com/Kagami/ffmpeg.js/ for extracting slices

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!

Well, the heavy lifting is done by ffmpeg (https://github.com/Kagami/ffmpeg.js/)

I think you want ffmpeg.js

Recently, browser features such as SharedArrayBuffer and WebAssembly are increasing. Video and video converter ffmpeg also works in browsers.

ffmpeg.js uses a custom build of FFmpeg to keep its size low. I am trying to convert a .ts into a .mp4 which has always been an easy task on my desktop (especially since I believe they are even using the same codecs, aac and h.264), but on the custom build, I get the error sample1.ts: Invalid data found when processing input.

Maybe use something like that make conversions client side?

Super helpful, thanks so much! I wonder if you'd be able to use something like https://github.com/Kagami/ffmpeg.js to cut out the offline step. I'm working on something at the moment that I'd love to embed in a webpage for general use but getting an MP4 out of it from a browser has been a big stumbling block.

https://github.com/Kagami/ffmpeg.js/ to import most animation formats and export gifs/webm fully in browser (I don't want to pay real server costs to encode animation).