1

Exploring the Mediarecorder API and really hope to get an mp4 output instead of webm. Prefer to stay client-side to reduce server resources and ffmpeg.js at 17mb doesn't seem viable for online use.

Discovered that one can create (Chrome/Firefox) a webm/h.264, which converts without re-encoding to an mp4 using FFMPEG. The resulting file opens fine in Quicktime MacOS (snippet source):
ffmpeg -i _inputfile_.webm -c:v copy _outputfile_.mp4

Whereas this clever hack works to display the video maybe as an mp4 in the browser, but the downloaded file won't open in Quicktime (just VLC, same for webm): 

new Blob(recordedBlobs, {type: 'video/mp4'});
video.src = window.URL.createObjectURL(superBuffer);

Therefore, wondering if there's another JS hack to do what FFMPEG's -c:v copy does, but to the blob bytes of the MediaRecorder's recordedBlobs and give it the same mp4 container that's accepted by Quicktime/etc?

Pastebin of current setup

programmingisphun
  • 120
  • 8
  • Why do you prefer mp4 over webm? I have the opposite preference. – Lonnie Best Mar 13 '20 at 13:46
  • 1
    Forgot to mention – for offline (out of browser) usage as it's capturing from the HTML5 Canvas (displaying p5.js content). Want to be able to display on mediaplayers, share/upload creations to social media or video streaming sites. Most of which only take mp4. – programmingisphun Mar 13 '20 at 13:56
  • Show the complete log from your ffmpeg command. – llogan Mar 13 '20 at 17:02
  • Here's [a pastebin log](https://pastebin.com/3wfgpTXR) from the command: `ffmpeg -i test.webm -c copy test.mp4` – programmingisphun Mar 13 '20 at 18:16
  • You may have to re-encode. Perhaps it doesn't like the Baseline profile (compared to the much more common Constrained Baseline, Main, and High profiles). – llogan Mar 16 '20 at 18:00
  • Hmm but the output file opens just fine in Quicktime/etc, so I don't know why re-encoding should be necessary. – programmingisphun Mar 17 '20 at 18:53

0 Answers0