x11-canvas-screencast is a UNIX-to-HTML5-Canvas screencasting system that uses the same animation technique as the anim_encoder project.
This project's name is now a misnomer. On OS X, it does not use X11 at all.
The project includes a Qt executable,
screencast, which polls the screen
and mouse cursor and outputs an animation. Specifically, it writes an
animation script (a CSV-separated list of steps) and a number of PNG files (one
per screen capture and one per unique mouse cursor). The
script (based on
anim_encoder.py) optimizes an animation script by creating
a packed PNG file and then replacing each
screen command with a
command that copies part of the packed PNG file into the canvas.
Packing the animation can be slow, and this approach makes it easy to view and tweak the animation prior to packing it.
screencast program depends on Qt. On targets other than OS X, it also
needs the XFixes extension to query the mouse cursor. The
script has the same dependencies as
anim_encoder -- NumPy, SciPy, OpenCV, and
pngcrush. On Ubuntu, install these packages:
libqt4-dev libxfixes-dev python-numpy python-scipy python-opencv pngcrush
$ qmake $ make
Capture an animation:
$ ./screencast --rect X Y W H --output example.js
Hit Enter to stop the capture. Turning on CAPS LOCK will temporarily pause the capture. Turning off CAPS LOCK returns the mouse cursor to its position before pausing the capture, then unpauses the capture.
Pack the animation:
$ ./pack_animation.py example.js
pack_animation.py example.jswill output
Embedding an animation in a web page
example/example.html for an example of embedding the player.
player.js in the page. The
player.js script defines a Player class. Construct it:
var player = Player(<animation-script-object>, "<animation-source-dir>");
<animation-source-dir> path will be prefixed to each path in the
animation script. The
Player object has an
element field. Add or remove
it to a page. A player is initially paused; unpause it with the
method. Pause it with the
Player object has two events:
onload. This is called after all of the images are loaded, and after the player's canvas has been painted with the first frame.
onloop. This is called at the end of the animation, as it is looping back to the beginning. Pause it here to prevent looping.
I have not tested the
screencast program with multiple screens or with
high-DPI/Retina screens. Either situation could break badly.
On OS X, I have tested the
screencast program, but not
It will probably work fine if the Python dependencies are satisfied.