Badass JavaScript

I’ve been seeking an H.264 decoder in JavaScript for some time now, and my wish has finally come true.  We’ve seen lots of other formats be implemented in JS, including PDF, MP3, MP2, PNG, JPG, BMP and more, but the real test of whether JS is really up for the task in terms of performance would be decoding a video codec and displaying it at a reasonable frame rate.  We aren’t quite there yet as this demo really requires Firefox Nightly with Type Inference turned on (very cool btw) to get even decent frame rates, but it is a start.

Broadway, by Michael Bebenita is a demo of Android’s open source C++ H.264 decoder compiled to JavaScript with Emscripten, and then optimized with Google Closure compiler.  It is not hardware accelerated in any way, so it will probably use a good deal of CPU, especially in non Type Inference’d environments.  They are also currently working on an hand-rolled JS implementation which is not yet complete.

Here is a live demo for you to check out.  Please make sure you are running Firefox Nightly, otherwise you will probably be very disappointed. If you aren’t running the nightly and don’t feel like downloading it, just to prove that 30 fps video decoding in JS is possible, here is a video of Brendan Eich showing off the decoder in a presentation.

Some of you might be asking why?  Why would you want to implement formats like this that should be implemented in hardware in JavaScript of all places?  Well, unfortunately there are browsers like Firefox that refuse to implement the defacto-standard in video codecs in their browsers.  Whether or not it would cost them money, it is against their morals to include anything patented in their software.  OK.  So what’s the next best course of action?  Well, you can either encode your videos in three different codecs to cover all your bases, or just in H.264 and use the JavaScript implementation to play it.  And plus, it is an extremely cool demo showing that JavaScript doesn’t have to be a slow language like some say it is.

Mozillian Mike Shaver is totally jazzed about this work, not because of H.264 itself necessarily, but because it shows that JS can be really fast and that “people should be very skeptical of claims that we need to replace JS (Dart, NaCl) to go fast,” as he told me on Twitter.

This is very cool work!  Let’s all thank the browser JS engine developers who make our code go fast.  As you can see from this demo, there is still much to come!