WebRTC/WebSocket 屏幕录制
WebRTC/WebSocket screen recording
在我的用例中,我想录制屏幕 activity 并将其发送到服务器 [未直播]。为此,我看了几个 blogs/sample 演示。但是我找不到与此相关的任何内容。我可以找到很多直播 audio/video 但没有屏幕录像。
我有以下与此相关的问题,
- 对于这个用例,哪个 WebRTC/Websockets 是高效的?
- 浏览器支持 WebRTC/Websockets?
- 还有其他方法可以实现这个用例吗?
我是 WebRTC/Websockets 的新手,如果我没有发布足够的信息,请发表评论。我会补充的。
有人可以帮我解决这个问题吗?与此用例相关的任何参考 URL/any 相关信息都会非常有帮助。
解决方案可以分为三个部分:
使用 getUserMedia 获取屏幕媒体流,这属于 WebRTC 类别,并且由于您正在共享屏幕,您的网站必须 https
并且您的用户可能会需要使用扩展(对于 firefox 和 chrome),你可以寻找演示 here
录制mediastream,firefox从MediaRecorder支持了一段时间,听说chrome是从47开始支持的。所以有了mediarecorder,你可以搞定录制文件的 blob。
如何 post 这个 blob 到服务器完全取决于你,你可以使用任何渠道:websockets、http post 等。你可以让服务器成为一个WebRTC 客户端,并通过 RTCDataChannel 发送它,但猜测这对您的用例来说太过分了。
根据@mido 的建议,在客户端我会使用 MediaRecorder API。另一种选择是在服务器端记录。对于后一种选择,您可以使用一些开源媒体服务器,例如 [Kurento] (http://www.kurento.org/).
以下是在 Firefox 中录制屏幕的方法(更新: 在 this fiddle 中尝试):
var constraints = { video: { mediaSource: "screen", width: 320, height: 200 } };
var start = ms => navigator.mediaDevices.getUserMedia(constraints)
.then(stream => record(stream, ms)
.then(recording => {
stop(stream);
video.src = link.href = URL.createObjectURL(new Blob(recording));
link.download = "recording.blob";
link.innerHTML = "Download blob";
log("Playing "+ recording[0].type +" recording:");
})
.catch(log).then(() => stop(stream)))
.catch(log);
var record = (stream, ms) => {
var rec = new MediaRecorder(stream), data = [];
rec.ondataavailable = e => data.push(e.data);
rec.start();
log(rec.state + " for "+ (ms / 1000) +" seconds...");
var stopped = new Promise((r, e) => (rec.onstop = r, rec.onerror = e));
return Promise.all([stopped, wait(ms).then(() => rec.stop())])
.then(() => data);
};
var stop = stream => stream.getTracks().forEach(track => track.stop());
var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
var log = msg => div.innerHTML += "<br>" + msg;
<button onclick="start(5000)">Record screen!</button>
<div id="div"></div><br>
<video id="video" height="120" width="160" autoplay></video>
<a id="link"></a>
Warning: Sharing your browser window on the web involves security risk! Read about it here!
获得 blob 后,您可以使用常规网络套接字(未显示)上传它。
mediaRecorder 位也应该在 Chrome 中工作,但不幸的是屏幕共享仍未完全标准化并且工作方式不同,需要在 Chrome 中进行扩展。
在我的用例中,我想录制屏幕 activity 并将其发送到服务器 [未直播]。为此,我看了几个 blogs/sample 演示。但是我找不到与此相关的任何内容。我可以找到很多直播 audio/video 但没有屏幕录像。
我有以下与此相关的问题,
- 对于这个用例,哪个 WebRTC/Websockets 是高效的?
- 浏览器支持 WebRTC/Websockets?
- 还有其他方法可以实现这个用例吗?
我是 WebRTC/Websockets 的新手,如果我没有发布足够的信息,请发表评论。我会补充的。
有人可以帮我解决这个问题吗?与此用例相关的任何参考 URL/any 相关信息都会非常有帮助。
解决方案可以分为三个部分:
使用 getUserMedia 获取屏幕媒体流,这属于 WebRTC 类别,并且由于您正在共享屏幕,您的网站必须
https
并且您的用户可能会需要使用扩展(对于 firefox 和 chrome),你可以寻找演示 here录制mediastream,firefox从MediaRecorder支持了一段时间,听说chrome是从47开始支持的。所以有了mediarecorder,你可以搞定录制文件的 blob。
如何 post 这个 blob 到服务器完全取决于你,你可以使用任何渠道:websockets、http post 等。你可以让服务器成为一个WebRTC 客户端,并通过 RTCDataChannel 发送它,但猜测这对您的用例来说太过分了。
根据@mido 的建议,在客户端我会使用 MediaRecorder API。另一种选择是在服务器端记录。对于后一种选择,您可以使用一些开源媒体服务器,例如 [Kurento] (http://www.kurento.org/).
以下是在 Firefox 中录制屏幕的方法(更新: 在 this fiddle 中尝试):
var constraints = { video: { mediaSource: "screen", width: 320, height: 200 } };
var start = ms => navigator.mediaDevices.getUserMedia(constraints)
.then(stream => record(stream, ms)
.then(recording => {
stop(stream);
video.src = link.href = URL.createObjectURL(new Blob(recording));
link.download = "recording.blob";
link.innerHTML = "Download blob";
log("Playing "+ recording[0].type +" recording:");
})
.catch(log).then(() => stop(stream)))
.catch(log);
var record = (stream, ms) => {
var rec = new MediaRecorder(stream), data = [];
rec.ondataavailable = e => data.push(e.data);
rec.start();
log(rec.state + " for "+ (ms / 1000) +" seconds...");
var stopped = new Promise((r, e) => (rec.onstop = r, rec.onerror = e));
return Promise.all([stopped, wait(ms).then(() => rec.stop())])
.then(() => data);
};
var stop = stream => stream.getTracks().forEach(track => track.stop());
var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
var log = msg => div.innerHTML += "<br>" + msg;
<button onclick="start(5000)">Record screen!</button>
<div id="div"></div><br>
<video id="video" height="120" width="160" autoplay></video>
<a id="link"></a>
Warning: Sharing your browser window on the web involves security risk! Read about it here!
获得 blob 后,您可以使用常规网络套接字(未显示)上传它。
mediaRecorder 位也应该在 Chrome 中工作,但不幸的是屏幕共享仍未完全标准化并且工作方式不同,需要在 Chrome 中进行扩展。