HTML5 demo: Video and Canvas

Article published on:12 March 2010, 16:57

Hello everyone!

In the latest article I wrote about SVG and Canvas I included a small HTML5 demo which renders a color histogram using Canvas, analyzing any image element. Knowing that the Canvas API allows developers to also read video frames, I wanted to test how fast can JavaScript and Canvas render a color histogram while the video plays.

I changed the initial script so that now it works with HTML5 videos. Here is the result:

In this demo I include a small video and a big HD trailer - just out of curiosity I wanted to see something that barely runs within the browser. The demo works with Opera 10.5 and Firefox 3.6 - tested on Linux and Windows. Currently, Chromium 5 on Linux crashes when I try to load the page.

I did spend quite some time testing various improvements to the performance of the script. I would note that changing the script to not access the DOM elements and properties directly, does not bring any important improvements in execution speed. However, the change to use bitwise operations did make a difference. Further improvements would come if I would inline functions and remove some of the options. Still, any ideas on how to further improve the performance of the demo would be welcome.

Working on this HTML5 demo I also explored a new API available in Firefox 3.5: Web Workers. As I expected, the result of adding a web worker to this use-case is not something I am happy with. In a web worker I cannot access the video, nor can I access any of the canvas elements. I could move only a really small part of the code into a worker, and the performance penalty of sending the pixels in a message from the main thread to the worker thread is too significant. In the end, it runs quite slower than the script which does not use any web worker.

26th of June update: Opera 10.6 beta 1 was released a few days ago. This release brings support for Web Workers and it is really great to see that my Web Workers demo works in Opera as well.

Any feedback is appreciated.

Published in: canvas, demos, firefox, html5, opera, video.