Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

Route9.js: A VP8/WebM decoder in JavaScript

November 30th 2011

The codecs keep being implemented in JS.  We saw Broadway.js implement the H.264 codec in JS recently, and now we have a WebM decoder as well.  Ben Schwartz was inspired by Broadway and wanted to learn more about the WebM format so he decided to modify Broadway to support VP8 as well.  The result is Route9.js.

image

Like Broadway.js, Route9.js was compiled with Emscripten the LLVM to JS compiler.  After decoding the clip, I get very good frame rates (about 30 fps) in Chrome while rendering to WebGL.  So what about browsers without native support for WebM, where this would be most useful? Well, unfortunately there is still a little work to be done.  At least in Safari, Float32Array does not exist and this hampers the demo.  Luckily this can be shimmed with a regular array, and perhaps they will consider this in the future.

For now though, it is still another amazing demo of what JavaScript is now capable of in cutting edge browsers, and perhaps an outlook on the future of the web where browsers don’t need to implement tons of formats and codecs because they will be implemented in JavaScript instead.  This is yet another example of why we should “always bet on JS” as Brendan Eich likes to say.  Browsers just need to give us great low level tools and we will do the rest!

You can check out the demo here and the code on Github.  Enjoy!