使用Socket.IO和Node.JS的Screencast网站

Question

我试图实现一个网站的截屏视频，不需要任何软件，但浏览器。 真正的网站直播是不必要的。 也许这将是一个很好的解决方案，用浏览器，视口分辨率，滚动像素等信息“重建”网站....它只适用于网站的解释之旅，它的功能。

我目前的解决方案：脚本使用html2canvas（ http://html2canvas.hertzen.com/ ）制作网站的“屏幕截图”。 然后我将截屏作为base64编码的png数据传输到接收器。 他们解码并将其绘制到那里的网站。

但是html2canvas需要大约1秒来生成画布（使用纯文本网站）。 它需要大约5-10秒才能为带有图像的网站生成它。 那很长。

你有其他方法的想法吗？

Answer 1

您是否考虑过在页面上捕获事件并将其显示在另一侧？ （可能使用透明覆盖来阻止用户交互）

一旦记录器发送屏幕尺寸等，可以使用iframe在另一侧显示相同的网页。 然后在文档中添加一个事件处理程序，并监听点击，按键等常见事件。

[ '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);
});

在回放网站上，您只需查找选择器并触发事件即可。 查找元素的CSS选择器可能有点棘手，但下面的代码将是一个良好的开端。

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

Answer 2

你可以考虑的是在一端捕获用户输入事件，然后在另一端模拟它。 这可以实时完成 - 将鼠标和键事件转换为流 - 然后将其发送到客户端的模拟器。 请参阅此文章： https ： //gist.github.com/staltz/868e7e9bc2a7b8c1f754

您还可以使用时间戳捕获流并将其发送到数据存储，这实际上创建了一个类似于数组的日志，它在时间序列中为您提供一个项目。 然后，您可以将此日志提供给RxJS等反应库，并在客户端上播放预定的事件。

对于模拟，应该有一些库（我想jQuery也可以工作）。 例如http://yuilibrary.com/yui/docs/event/simulate.html