WebRTC / WebSocket屏幕录制 [英] WebRTC/WebSocket screen recording

问题描述

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

In my use case I would like to record the screen activity and send it to server [not live]. I looked at few blogs/sample demos for this. But I couldn't find anything related to this. I could find lot of live streaming audio/video but not screen recording.

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

I have the following questions related to this,

• 对于此用例，哪一个是高效的WebRTC / Websockets？


• WebRTC / Websockets的浏览器支持？


• 有没有其他方法可以实现这个用例？

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

I am fairly new to WebRTC/Websockets, if I am not posting the enough information please comment. I will add.

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

Could someone help me on this? Any reference URL/any related info related to this use case would be really helpful.

推荐答案

以下是在Firefox中记录屏幕的方法（更新：在这个小提琴）：

Here's how to record the screen in Firefox (Update: try it in 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后，可以使用常规Web套接字（未显示）上传。

Once you have the blob, you can upload it using regular web sockets (not shown).

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

The mediaRecorder bits should work in Chrome as well, but unfortunately screensharing is still not fully standardized and works differently and requires an extension in Chrome.

这篇关于WebRTC / WebSocket屏幕录制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！