带有Socket.IO和Node.JS的Screencast网站

Question

我试图实现一个没有任何软件所需的网站屏幕，但浏览器。这不是必要的真正屏幕播放的网站。也许这将是一个好的解决方案，“重建”网站的信息，如浏览器，分辨率视口，滚动像素，.它只是一个网站的解释旅游和它的功能。

我目前的解决方案是:脚本正在用html2canvas ( http://html2canvas.hertzen.com/ )制作网站的“截图”。然后，我将截图作为base64 64编码的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