Web based screen capture ala userfly.com?

I was checking out http://userfly.com/demo. It captures all mouse clicks and keyboard strokes and plays everything back. How is this done without installing any software? Pure Javascript? It doesn't look like it's using Flash. Are there tools I can use to put something similar in my own site offeri开发者_开发问答ng it to others?

They bind all possible events to the document level object with the function called "_bindEvents" creating delegates for each and every action that user takes on the page. They also record a timestamp when each event happened. The way they save that data is they turn them into JSON strings and load up a 1x1 image passing JSON string as a query string parameter.

They way they play it back is simple, they just cause all of the events in the same sequence back to the page. With exception of mouse move event. Since it's not possible to get the mouse cursor to move from JavaScripts, they create a div with an image that looks like mouse cursor and move it around in the pre-recorder sequence. Quite easy, but also quite impressive.

Basically I think what is done is capture window.event whenever anything happens they record what the event was, what it did, and the time. Then the just reconstruct that for the playback. I don't know if there are tools to do this, but the basic concept shouldn't be to hard. The method of saving the data and retrieving would probably be the hardest part.

you asked for other similar tools, and you should definitely try http://mouseflow.com . It offers the same recording/playback functionality of Userfly, but it also offers heatmaps showing clicks, mouse movements and scroll behavior on your pages. It supports recording pages behind login, session-dependent pages (such as checkout pages). There are free as well as paid plans.

Lasse

(representing Mouseflow.com)