About User Experience, Firefox 3.1 is going to be a minor release. But about standards and performance, it's a great step forward.

Check out the new features you can use in your web page: Firefox 3.1 for developers.

I've created a little demo using the video element, canvas, DOM Workers (threads in JS) and a few Javascript 1.7/1.8 tips. It's a movement tracker. It's not perfect, but it's fun :)

Movement tracker: http://people.mozilla.com/~prouget/..., click on the Go button (Firefox3.1 needed).

How does it work ?

For each frame:

  • First, I compute the difference between the frame n and the frame n - 1 (greyscale);
  • then (in the Worker), I do a matrix convolution to detect pixel moving (you can choose between 3 kind of matrix: Sobel, Harris and Kirsch);
  • From the result, I compute the bounding box containing moving pixels (rects displayed in the video) and the centroid of the moving pixels (crosses inside the rects);
  • There is a bounding box and a centroid for the x movements (color red) and for y movements (color green);
  • The evolution of the weight of each centroid is displayed in the graph;

The arguments:

  • Threshold: when a moving pixel should be ignored;
  • Work factor: we don't need to compute the entire frame. We can reduce it;
  • Zoom factor: the resulting video is not a <video/>, but a canvas. Define the ratio between the canvas size and the original video size;
  • Sensibility: when a global movement should be ignored. Size of the bounding box;
  • Display video: display the original <video/> element;
  • Display diff: display the diff frames;

It's a really quick&dirty implementation, if I have time (or you, if you have some time), I think a good enhancement would be to implement the camshift algorithm to track objects.