recordable-canvas VS mp4box.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 can pass the audio and video MediaStreamTracks from the MediaStream from getDisplayMedia() to MediaStreamTrackProcessors for each track, pipe the stream of AudioDatas and VideoTracks, copy the data to ArrayBuffer's, then pass those ArrayBuffers to an MP4 muxer, e.g., https://github.com/gpac/mp4box.js/.

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.

I could mux the video and audio on the browser into an MP4 with MP4Box.js, but somehow it was misformatted and weirdly played with some players. I gave up and relied on Elemental Convert as it's not so expensive.