使用 Socket.IO 和 Node.JS 的截屏网站答案

【问题标题】：Screencast website with Socket.IO and Node.JS使用 Socket.IO 和 Node.JS 的截屏网站
【发布时间】：2016-01-01 09:30:45
【问题描述】：

我正在尝试实现一个网站的截屏视频，而不需要任何软件，只需要一个浏览器。没有必要对网站进行真正的截屏。也许用浏览器、视口分辨率、滚动像素等信息“重建”网站是一个很好的解决方案。它仅用于网站的解说，它的功能。

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

但是 html2canvas 需要大约 1 秒来生成一个画布（带有纯文本网站）。为带有图像的网站生成它大约需要 5-10 秒。太长了。

您对其他方法有什么想法吗？

【问题讨论】：

搜索 WebRTC，它就是为此而生的。
@Prinzhorn RTC 用于通信，对吗？我认为通讯不是我的问题。它更多的是屏幕捕获...
w3.org/TR/screen-capture 但在浏览器支持之前，您可能需要不同的解决方案。也许应用页面的所有样式内联（通过getComputedStyle）并传输HTML。
嗯，使用 Phantomjs + Browserify 怎么样？至少他们有一个phantomjs.org/screen-capture.html api。或github.com/nwjs/nw.js。您可以创建某种“入口页面”，人们在其中键入 url，phantomjs 正在渲染和捕获所有内容，并通过 socket.io 向客户端发送内容。 ?
@rakete 发现这可以使用 WebRTC developers.google.com/web/updates/2012/12/… 创建一个解决方案

标签： javascript html node.js socket.io screencast

【解决方案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

【讨论】：

你怎么看这个问题，不同的浏览器可以呈现不同的html代码？
大多数新浏览器以相同的方式呈现 html，使用选择器找到的元素记录和重新触发事件将确保在正确的元素上触发正确的事件，即使存在任何细微差异。需要注意的是互联网速度和渲染时间。例如：一个元素可能需要更长的时间才能在播放器端加载，并且在您重播事件时可能不可用。因此，使用 waitForElementToBeVisible() 和 waitForElementToStopMoving() 函数预先挂起事件可能是个好主意。真的很酷的想法，看看它是如何运作的会很有趣。
还可以查看这个项目，我正在使用 chrome 插件捕获要通过 selinium 播放的事件：github.com/chris-gunawardena/test-rec

【解决方案2】：

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

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

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

【讨论】：