Screencast website with Socket.IO and Node.JS

Question

I am trying to realize a screencast of a website without any software required but a browser. It is not neccessary to really screenscast the website. Maybe it would be a good solution to "rebuild" the website with information like browser, resolution of viewport, scrolled pixel, .... It is only for the explanation tour of a website and it functions.

My current solution: The script is making "screenshots" of the website with html2canvas ( http://html2canvas.hertzen.com/ ). Then I transport the screenshot as base64-encoded png-data to the receivers. They decode it and draw it to there websites.

But html2canvas needs about 1 second to generate a canvas (with text-only website). It will need about 5-10 secs to generate it for websites with images. That is to long.

Do you have ideas for other approaches?

Answer 1

Have you thought about capturing events on the page and displaying them back on the other side? (maybe with a transparent overlay to stop user interactions)

Once the recorder sends screen size etc, an iframe can be used to display the same webpage on the other side. Then add a event handler to the document and listen to common events like clicks, keypresses etc.

[ 'click', 'change', 'keypress', 'select', 'submit', 'mousedown'].forEach(function(event_name){
    document.documentElement.addEventListener(event_name, function(e){
        // send event to the other side using Socket.IO or web sockets
        console.log(getSelector(e.target), e.type);
    }, true);
});

On the playback site, you can just look for the selector and fire the event. Finding the CSS selector for a element can be a bit tricky but the code below will be a good start.

https://github.com/ebrehault/resurrectio/blob/master/recorder.js#L367

Answer 2

What you could consider is to capture the user input events on one end, then simulate it on the other end. This can be done live--turn the mouse and key events to a stream--then send it to the client's simulator. See this article: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

You can also capture the stream with time-stamps and send it to a data store, this essentially creates an array-like log which gives you one item after the other in a time series. You can then feed this log into a reactive library like RxJS, and have scheduled events play out on the client.

For simulation, there should be a few libraries out there (I imagine jQuery can also work). e.g. http://yuilibrary.com/yui/docs/event/simulate.html