Mozilla developer Michael Bebenita has released a JavaScript-based H.264 decoder that is intended to run natively in Web browsers. The decoder, which can display video at 30 frames per second on conventional hardware, is yet another compelling demonstration of JavaScript’s performance potential.
JavaScript creator Brendan Eich included a demonstration of the H.264 decoder—codenamed Broadway—during a presentation at the ACM’s annual OOPSLA conference. The demonstration attracted some attention, prompting the developers to publish the source code.
Broadway is based on the open source H.264 decoder that Google uses in Android. The Mozilla developers simplified the Android H.264 decoder—which is written in the C programming language—and converted it to JavaScript. They used Emscripten, a compiler that translates LLVM bitcode into JavaScript. In addition to the Emscripten-generated H.264 decoder, the Broadway developers are also working on a separate implementation that is coded by hand.
Code generated by the Emscripten compiler typically runs about 3-4 times slower than the equivalent binary that you would get by compiling the same C code with the -O3 flag in GCC. But some recent JavaScript performance optimizations in Firefox further improve performance.
The Broadway developers caution that the H.264 decoder will only perform as expected in recent Firefox nightly builds, which incorporate the latest JavaScript performance improvements—particularly a new type inference mechanism that gives JavaScript execution speed a considerable boost.
The Broadway project offers useful insight into JavaScript performance characteristics, but its not really intended for real-world usage. Mozilla’s objections to H.264 on the basis of patent encumbrances still stand and make it unlikely that users will see the video codec supported out of the box in Firefox.
Broadway is also highly CPU-intensive, which makes it impractical to use. That could change in the future, however. Hardware acceleration could be achieved via WebGL, reducing the decoder’s load on the CPU. The initial Broadway implementation didn’t include any special optimizations, aside from the ones applied by Emscripten. The developers were able to crank its performance up by 40 percent this week with some tweaking. Bebenita says that there is still plenty of room for further speedups.
When Bebenita was tasked with creating the JavaScript decoder, he was skeptical and not convinced that it could be done at all. The project’s success surprised him and apparently exceeded his expectations.
“Recently I joined Mozilla, it’s a fantastic place! My first task was to look into pure software H.264 decoding in JavaScript! I must admit, at first I thought it was a little bit crazy, and that it couldn’t be done. Turns out that, luckily, I was very wrong,” he wrote in a blog entry. “The result is quite remarkable, we can reach a rate of nearly 30 fps decoding video purely in JavaScript.”
Mike Shaver, former Mozilla vice president of technical strategy, highlighted Broadway in a blog post that he wrote last week about JavaScript performance. He compared various approaches that have been proposed to improve client-side performance on the Web and emphasizes the advantages of Mozilla’s JavaScript-centric approach.
“We’ve repeatedly seen that JS can be improved to do what is claimed as impossible in terms of performance, and there are still many opportunities to make JS faster still. This benefits not only new applications, but also existing libraries and apps that are on the web today, and the people who use them,” he wrote. “Video decoding is a very computationally-intensive process, which is one reason that phones often provide specialized hardware implementations. Being able to decode at 30 frames a second [in JavaScript] on laptop hardware is a Big Deal, and points to a new target for JS performance: comparable to tightly-written C code.”
The Broadway source code is available for download on GitHub. To test it, you will want to use the latest Firefox nightly build. The Emscripten compiler is also available on GitHub.
Listing image by Photograph by racoles
reader comments
71