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?
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