Screencast网站与Socket.IO和Node.JS

我想实现一个网站的屏幕录像，没有任何需要的软件，但浏览器。不需要真正的屏幕截图。也许这将是一个很好的解决方案，用浏览器，视口分辨率，滚动像素等信息来“重建”网站。它仅用于网站的解释性浏览和功能。Screencast网站与Socket.IO和Node.JS

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

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

你有其他方法的想法吗？

来源

2015-10-04 rakete

搜索WebRTC，它是为了这个。 – Prinzhorn

@Prinzhorn RTC是用于通信的权利？我认为这不是我的问题。它更多的屏幕捕获... – rakete

http://www.w3.org/TR/screen-capture/但直到它在浏览器支持，你可能需要一个不同的解决方案。也许应用内联的所有样式（通过getComputedStyle）并传输HTML。 – Prinzhorn

您是否想过在页面上捕获事件并在另一侧显示它们？（也许用透明的覆盖层来阻止用户交互）

一旦录像机发送屏幕大小等，一个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

来源

2015-10-07 06:08:59

你对这个问题有什么看法，差异浏览器可以呈现相同的html代码不同？ – rakete

大多数新浏览器都以相同的方式呈现html，使用选择器找到的元素记录和重新触发事件将保证正确的事件触发正确的元素，即使存在任何细微差异。需要注意的是互联网速度和渲染时间。例如：一个元素可能需要较长时间才能加载播放器端，并且在您重放该事件时可能无法使用。所以使用waitForElementToBeVisible（）和waitForElementToStopMoving（）函数的预先等待事件可能是一个好主意。真的很酷的想法，很有趣，看看它是如何工作的。 –

也检查出这个项目我捕捉事件通过使用铬插件通过selinium播放：https：//github.com/chris-gunawardena/test-rec –

你可以考虑什么是捕捉一端的用户输入事件，然后模拟它的另一端。这可以通过实时完成 - 将鼠标和键盘事件转换为流 - 然后将其发送到客户端的模拟器。看到这篇文章：https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

你也可以捕获与时间戳流并将其发送到数据存储，这实质上创建一个阵列式的日志，它给你一个接一个在时间序列中的项目。然后，您可以将此日志反馈到RxJS等反应式库中，并在客户端上安排事件播放。

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

来源

2015-10-08 05:21:31

Unfortunateley第一个链接是死的.. – rakete

Screencast网站与Socket.IO和Node.JS

回答

相关问题