使用 Javascript 进行屏幕捕获

Question

我发现 http://www.rtcmulticonnection.org/docs/ – 显然，可以通过 WebRTC 与其他用户共享屏幕。现在，WebRTC 确实很适合实时共享，但我想知道，是否可以通过纯 JavaScript 获取（在用户许可的情况下）屏幕截图并直接处理它们（例如通过通常的 HTTP 发送它们）？这对于远程帮助人们来说是一个很好的功能，他们不必安装 VNC/RDP/NX 服务器（但是当实时连接不是那么重要，而是可靠的传输时）。 正如我所说，我的意思是屏幕截图，而不仅仅是活动选项卡的记录。

好吧，更清楚一点，问题是显然可以告诉浏览器通过 WebRTC 进行屏幕共享（或询问用户是否这样做）。但是，一旦获得许可，就不可能（直接）以编程方式访问屏幕，至少目前我看不到。

郑重声明：https://github.com/streamproc/MediaStreamRecorder 做我想做的事。

Answer 1

有多种解决方案：

1)可以使用RecordRTC or similar solutions (e.g. MediaStreamRecorder等)录制一段画面并上传"recorded-screen"到服务器

2) 您可以使用 <canvas> (2D) 拍摄屏幕快照并使用实时协议上传到服务器，例如websockets 或 XHR-long-polling 或简单的 XMLHttpRequest

3) 支持非WebRTC浏览器，可以使用类似于html2canvas的解决方案，支持通过Canvas2D抓取网页快照API

4) 如果您打算编写 chrome 扩展，那么您可能想使用“captureVisibleTab” API.

PS。您可以使用此方法拍摄屏幕快照：

function takeSnapshot(video) {
    var canvas = document.createElement('canvas');
    canvas.width = video.videoWidth || video.clientWidth;
    canvas.height = video.videoHeight || video.clientHeight;

    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    return canvas.toDataURL('image/png');
}

使用方法如下：

var screenVideo = document.querySelector('video');
var screenShot = takeSnapshot(screenVideo);
socketio.emit('screenshot', screenShot); // POST to server

使用 Javascript 进行屏幕捕获

Screen Capturing with Javascript

javascript

firefox

webrtc