
Process videos in browser using FFmpeg compiled to JavaScript - pkorzeniewski
http://bgrins.github.io/videoconverter.js/
======
MrZongle2
This is fantastic. Mad props to Brian for this.

While I think some of the posters here have valid points regarding
performance, merely being able to do this in a browser makes this capability
available to a _ton_ of people who would otherwise be intimidated with the
process of installing or compiling FFMPEG.

This is a long way from an alert() box, which in the mid-90s the only thing I
saw Javascript good for.... aside from making pointless in-page clocks. Wow.

------
cantankerous
I think this is pretty neat demonstration of the maturity of Emscripten. This
reveals a lot of interesting avenues one could take with legacy software in
the browser to me that I hadn't thought about before. Many kudos to the
creators of this project who took the time and energy to show the rest of us
what's possible with a little creativity. Keep on hackin'!

~~~
bgrins
Thanks! It will be interesting to see how much it will speed up as JS runtimes
get faster, and as we are able to apply additional optimizations with
Emscripten.

In particular, asm.js is explicitly disabled right now because of the need for
memory growth. In the meantime, I'm planning on having a build with it enabled
just to benchmark times on smaller files (where the growth is not needed).

------
astrange
It's been a while since I did any contributions to libavcodec, but I'm always
surprised when someone uses the encoder parts for anything.

They've had no algorithm development for years and nobody has bothered to tune
them; it's more like a disassembled Lego box than an encoder.

Of course, if you include FAAC, LAME, or x264 it should be fine. But native
libavcodec/x264 with their asm disabled is already considered too slow for
use, so running them under a VM must limit it even more.

(In here goes the usual statement that OpenCL is not useful for this kind of
work, and SIMD or direct asm is what's needed.)

------
mtrimpe
So we took a performance-sensitive embarrasingly-parallel problem and made it
run on a slow single-threaded language?

Sounds like fun ;)

~~~
joeld42
Or you could think of it as taking a compute-intensive problem and
distributing it widely.

Or taking a bandwidth-bound problem and completely eliminating that
bottleneck.

If you've got 1000 people converting videos at once, the embarrassingly
parallel isn't going to help you much on the server.

This does look like fun, and really a nice validation for emscripten, and
there's a ton of practical application.

~~~
Osmium
True; this seems a bit silly at first glance, but imagine how much money a
YouTube-like site could save if videos were converted in the user's browser
before upload, rather than by the server.

~~~
mtrimpe
It's also an excellent new benchmark for JavaScript VMs. If we can get near-
native performance on this it'll enable a whole new class of application.

------
rodolphoarruda
This is really great. I wish I was reading this headline back in 2009 when I
was working with video encoding.

If file size to download is an issue, why not build a "stripped down" version
which works with just a couple of file format inputs and one output that uses
a GPL codec?

~~~
aaronm67
I don't actually think file size to download is much of an issue - the current
build is a little over 6mb gzipped, which isn't much bigger than most Youtube
videos.

For building a "stripped down" version, there is a config flag "\--disable-
everything" that can be used, and I will investigate it a little more. We
probably won't end up hosting the compiled file, just out of the interest of
repo-size, but I can certainly build a "build-minimal" script.

------
phoboslab
Neat!

If this could encode an MPEG in realtime (it should be fast enough on Desktop
PCs and browsers with asm.js support, right?), you could send WebCam video via
WebSockets to a server, distribute it and decode again with jsmpeg[1]. Sort of
like the ghetto version of WebRTC, but without all the codec hassles :)

[1] [https://github.com/phoboslab/jsmpeg](https://github.com/phoboslab/jsmpeg)

~~~
kevingadd
It's single-threaded and asm.js still has overhead, so I doubt you're going to
approach the performance you get from ffmpeg compiled natively for your
machine. I expect native ffmpeg uses SIMD, too.

Regardless, there are some neat possibilities.

------
fat0wl
Heh this is awesome. Anything that avoids a round-trip to server usually is
much easier to implement quickly in admin forms that use PaaS app servers...

------
scrabble
I've been trying to get away from an old ActiveX solution for client side
video playback, and this seems like it could be an excellent option. Likely
going to build something based on this.

I wonder if you could also drop the size of the library significantly by
dropping everything from FFmpeg except for what is needed for playback.

~~~
th0ma5
Playback is done through regular browser capabilities.

------
zapt02
Wow. very cool. love the demos!

------
sopel39
Hi guys. I have been also working on emscripten ffmpeg port, but for audio.
Check out my converter at [http://quick-apps.com/audio](http://quick-
apps.com/audio) . The performance in FF is really good! I must say that native
apps in browser are really cool technology playgrounds.

------
mapgrep
Neat! Did you play with using ffmpeg on audio at all? I saw you had mp4 and
mpeg codecs - did you experiment with anything that would allow mp3 like
libmp3lame? I have an audio processing tool that I'd love to move into the
browser.

~~~
bgrins
Audio processing works, but certain codecs do not come bundled with it. It
should be possible to configure it with --enable-libmp3lame if you had the
source alongside and had everything set up correctly. We didn't have time to
try this, but the closest thing I found similar to this when researching was:
[https://github.com/manuels/unix-toolbox.js-
imagemagick](https://github.com/manuels/unix-toolbox.js-imagemagick). You can
see that libpng, libjpeg, etc are all being included in the output.

If you'd like to give this a shot, definitely open up an issue on Github and
we can talk more about the details!

------
TazeTSchnitzel
Hmm, does this solve the browser audio support issue? ;)

Use Opus, but if browser lacks support, render to Vorbis, RIFF Wave or MPEG
Audio Layer 3. Obviously this isn't a serious suggestion, but I really wonder
if it could work.

------
th0ma5
I was thinking libav has replaces FFmpeg? Anyway, this project is very cool. I
could see web workers working a mini video grid kind of system perhaps.

~~~
aaronm67
We did get libav working, but it was much less stable than FFmpeg, and we
couldn't get swscaler working (which meant a lot of videos would not work)

~~~
astrange
There shouldn't be that much difference between the two forks. Which parts
were failing?

For swscale, was it compile problems or something later?

Also, if you have a way to run libav's "make fate" (regression tests), do you
know which ones fail?

~~~
aaronm67
I'm not sure if we can private message on here, but if you would email me at
aaronm67@gmail.com, or contact us on the github project, I can let you know
our progress and where we got caught up.

------
ye
That's the most impressive thing I've read on HN in a long time.

It shows how far the technologies have come. Truly a remarkable achievement.

------
vezzy-fnord
I guess this a testament to the power of source code translation, but it's a
very impractical hack overall.

~~~
zapt02
I disagree completely. It is amazing that you can now encode videos, create
screenshots etc without any additional software required.

~~~
vezzy-fnord
Some things are just better left to the desktop and not the web, I'm afraid.
FFmpeg is a part of most standard desktop Linux distributions, and can easily
be downloaded for other systems. Apparently installing software locally is a
horrifying predicament now.

Encoding videos on the desktop with the native FFmpeg code will not only yield
better performance, but I can't think of a scenario why you'd want to use as a
web-based service.

Create screenshots? Really? What a complete triviality. I guess using standard
software and hitting the PrtSc key is too difficult in comparison to using the
browser for everything. Making screen _casts_ is a different issue, but also
one you'd do locally.

Sorry if I'm not so passionate.

~~~
newsmaster
[http://www.easyprintscreen.com](http://www.easyprintscreen.com) saves me time
firing up photoshop.

(shameless plug) more editing tools coming soon :)

Funnily enough I'm using a color pallete plugin written by @bgrins who is
working on the OP project.

~~~
zapt02
This looks great, but what I really meant in the original comment is creating
screenshots from a video.

