Question

在我的用例中，我想记录屏幕活动并将其发送到服务器[not live]。我为此查看了一些博客/示例演示。但我找不到任何与此相关的内容。我可以找到很多实时流式音频/视频但不能进行屏幕录制。

我有以下与此相关的问题，

对于这个用例，哪一个是高效的WebRTC / Websockets？
WebRTC / Websockets的浏览器支持？
有没有其他方法可以实现这个用例？

我是WebRTC / Websockets的新手，如果我没有发布足够的信息请评论。我会补充一下。

有人可以帮我这个吗？任何与此用例相关的参考URL /任何相关信息都会非常有用。

Answer 1

以下是在Firefox中录制屏幕的方式（更新：在this fiddle中试用）：

＆＃13;

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;

＆＃13;

<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>

＆＃13;

警告：在网络上共享您的浏览器窗口会带来安全风险！阅读它here！

获得blob后，可以使用常规Web套接字（未显示）上传。

mediaRecorder位也可以在Chrome中使用，但不幸的是，屏幕共享仍然没有完全标准化，并且工作方式不同，需要在Chrome中进行扩展。

Answer 2

解决方案可分为三个部分：

使用getUserMedia获取屏幕媒体流，这属于WebRTC类别，由于您共享屏幕，您的网站必须是https，您的用户可能需要使用扩展（对于firefox和chrome），您可以查找演示here
录制媒体流，firefox已经通过MediaRecorder支持了一段时间，听说Chrome从47开始支持它。所以使用mediarecorder，你可以获取录制文件的blob。
如何将此blob发布到服务器完全取决于您，您可以使用任何渠道：websockets，http post等。您可以将服务器设置为WebRTC客户端，并通过RTCDataChannel发送，但猜测对你的用例来说太过分了。

Answer 3

正如@mido所建议的，在客户端我会使用MediaRecorder API。另一种选择是在服务器端进行记录。对于后一种选择，您可以使用一些开源媒体服务器，如[Kurento]（http://www.kurento.org/）。

WebRTC / WebSocket屏幕录制

3 个答案: