Socket.IO 和 Node.JS 的截屏网站

Question

我正在尝试实现一个网站的截屏视频，除了浏览器之外不需要任何软件。没有必要真正截屏该网站。也许这将是一个很好的解决方案 "rebuild" 具有浏览器，视口分辨率，滚动像素等信息的网站......它仅用于网站的解释性游览并且可以正常工作。

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

但是 html2canvas 需要大约 1 秒才能生成 canvas（对于纯文本网站）。为带有图像的网站生成它大约需要 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

Socket.IO 和 Node.JS 的截屏网站

Screencast website with Socket.IO and Node.JS

javascript

html

node.js

socket.io

screencast