【问题标题】:WebRTC/WebSocket screen recordingWebRTC/WebSocket 录屏
【发布时间】:2016-06-21 19:03:11
【问题描述】:

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

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

  • 对于这个用例,哪一个是高效的 WebRTC/Websockets?
  • 浏览器是否支持 WebRTC/Websockets?
  • 还有其他方法可以实现此用例吗?

我对 WebRTC/Websockets 还很陌生,如果我没有发布足够的信息,请发表评论。我会补充的。

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

【问题讨论】:

    标签: websocket html5-video webrtc video-capture


    【解决方案1】:

    以下是在 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>

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

    获得 blob 后,您可以使用常规网络套接字(未显示)上传它。

    mediaRecorder 位也应该在 Chrome 中工作,但遗憾的是屏幕共享仍未完全标准化,工作方式不同,需要在 Chrome 中进行扩展。

    【讨论】:

    • 帮助很大。是否可以在没有 https 的情况下在 localhost 中进行测试?
    • @Dany,是的,但前提是您将 ,localhost 添加到域列表中,并在 about:config 中将 media.navigator.permission.disabled 设置为 true。后者关闭所有 getUserMedia 权限,因此您可能希望在测试后将其设置回来。
    • 由于某种原因从相机记录下来
    • @JimmyKane 如上所述,仅适用于 Firefox。另见stackoverflow.com/q/41881434/918910
    • @jib 对!并感谢您的编辑。也可能值得注意添加stackoverflow.com/questions/29466639/…
    【解决方案2】:

    解决方案可以分为三部分:

    • 使用 getUserMedia 获取屏幕媒体流,这属于 WebRTC 类别,并且由于您正在共享屏幕,因此您的站点必须是 https 并且您的用户可能需要使用扩展程序(对于firefox 和 chrome),你可以寻找演示 here

    • 录制媒体流,firefox 已经通过MediaRecorder 支持了一段时间,并且听说 chrome 从 47 开始支持它。所以使用 mediarecorder,您可以获取录制文件的 blob。

    • 如何将此 blob 发布到服务器完全取决于您,您可以使用任何渠道:websockets、http post 等。您可以使服务器成为 WebRTC 客户端,并通过 RTCDataChannel 发送,但猜测对你的用例来说太过分了。

    【讨论】:

    • 谢谢。真的很有帮助。
    • 如何记录整个屏幕,这不仅意味着Firefox或任何其他浏览器窗口,我还想记录最终用户的整个屏幕。
    • @vaishali 你检查了演示的链接吗(在第一点)
    【解决方案3】:

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

    【讨论】:

    • 谢谢。还有其他服务器端录制工具吗?我只想找到最好的。我对这个领域相当陌生。
    • @DineshAppavoo ,你也可以试试Janus,另一个开源项目,顺便说一下,在Github repository有重要活动
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多