Create MP4 video in JavaScript [closed]

Question

Is it possible to create an MP4 video on a browser through JavaScript? (I know it is now possible in Flash with FlashyWrappers)

Ideally, I will be feeding it with image frames (raw, PNG or anything) and it will be combining them into an MP4 video.

Edit: I want the video to be created on the client side, not feed a server with image data.

Answer 1

I think this is a really curious question! You've gotten me thinking...

HTML5 supports MP4 in all major browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
First hit on google for "Base64 url encoded HTML5 video" gave me this: http://iandevlin.com/html5/data-uri/video.php

That alone leads me to believe that it should be possible to receive some JPEGs and convert those into MP4 data, Base64 encode and play all purely in the browser (JS + HTML).

At this point, it "feels feasible" to me. I'm really only thinking as I'm typing - and it's "back of an envelope" style thinking.

ffmpeg I know is an existing MP4 library - and a well regarded one. It's probably (without checking) written in something low-level like C, so we'd need it porting to JavaScript. Sure enough, Google shows this is already possible/done: https://bgrins.github.io/videoconverter.js/

(There's plenty of other routes you could take, this is just list of ideas.)

So grab a JS port of ffmpeg - grab some images, process it into some video data, Base64 encode it and throw an HTML5 player into the DOM?

I don't suspect this is going to be easy - if it were a Haynes manual, I'd suspect 3 spanners :) MP4 is a binary file format - so unless you already understand it inside-out-and-back-to-front you're going to have a hard time debugging why it isn't working (I suspect). Or you could be lucky - and have it "just work" first time ;-)

I'd be very interested to see how far you get with it!