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

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

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

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

你有其他方法的想法吗？

解决方法:

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

一旦记录器发送屏幕尺寸等,可以使用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

标签：javascript,node-js,socket-io,html,screencast
来源： https://codeday.me/bug/20190611/1221489.html