javascript - Screencast website with Socket.IO and Node.JS - Stack Overflow

admin管理员组

文章数量:1403194

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 ( / ). 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?

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./ ). 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?

• javascript
• html
• node.js
• socket.io
• screencast

Share Improve this question Follow asked Oct 4, 2015 at 17:53 raketerakete 3,0511212 gold badges6060 silver badges112112 bronze badges 8

• 1 Search for WebRTC, it's made for that. – Prinzhorn Commented Oct 4, 2015 at 17:54
• @Prinzhorn RTC is for minication right? The minication is not my problem i think. Its more the screen capturing... – rakete Commented Oct 4, 2015 at 19:25
• w3/TR/screen-capture but until it's supported in browsers you probably need a different solution. Maybe apply all styles of the page inline (through getComputedStyle) and transfer the HTML. – Prinzhorn Commented Oct 5, 2015 at 7:14
• 1 Hmm, what about using Phantomjs + Browserify ? At least they have a phantomjs/screen-capture.html api. Or github./nwjs/nw.js . You could create some sort of a "entry page" where people type a url and phantomjs is rendering & catching everything and sending stuff over socket.io to the clients. ? – Fer To Commented Oct 8, 2015 at 15:52
• 1 @rakete found this wich creates a solution with WebRTC developers.google./web/updates/2012/12/… – Fer To Commented Oct 8, 2015 at 15:58

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 5 +100

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 mon 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./ebrehault/resurrectio/blob/master/recorder.js#L367

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./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./yui/docs/event/simulate.html

本文标签： javascriptScreencast website with SocketIO and NodeJSStack Overflow