Question

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

我目前的解决方案：该脚本正在制作＆＃34;截图＆＃34; 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

使用Socket.IO和Node.JS进行Screencast网站

2 个答案: