WebRTC/WebSocket屏幕录制

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

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

哪一个将是有效的WebRTC /的WebSockets这个用例？
浏览器支持WebRTC/Websockets？
有没有其他的方法来实现这个用例？

我对WebRTC/Websockets相当新，如果我没有发布足够的信息请评论。我会加。

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

2016-03-08 Dany

以下是如何记录屏幕在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中进行扩展。

来源

2016-04-07 18:46:14 jib

它有很大的帮助。是否有可能在localhost中测试这个我的意思是没有https？ – Dany

@Dany，是的，但只有当您将'，localhost'添加到域列表中，并且在* about：config *中将'media.navigator.permission.disabled'设置为'true'时才是如此。后者关闭所有getUserMedia权限，因此您可能希望在测试后将其设置回去。 – jib

由于某种原因，此相机记录 –

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

获取画面mediastream的保持使用getUserMedia，这个瀑布下的WebRTC的范畴，因为你正在共享屏幕，您的网站是要去必须https和您的用户可能会需要使用扩展（Firefox和铬），你可以寻找演示here
录制mediastream，火狐一直支持这一段时间通过MediaRecorder并听取铬开始从支持它47.所以使用mediarecorder，您可以获得记录文件的斑点。
如何将这个blob发布到服务器完全取决于您，您可以使用任何通道：websockets，http post等。您可以使服务器成为WebRTC客户端，并通过RTCDataChannel发送它，但猜测会对你的用例来说太过分了。

来源

2016-03-08 01:22:38 mido

谢谢。这真的很有帮助。 – Dany

如何记录整个屏幕不仅意味着Firefox或任何其他的浏览器窗口，我想记录最终用户的整个屏幕。 – vaishali

@vaishali你检查了链接演示（在第一点） – mido

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

来源

2016-03-12 00:47:49 AndresEC

谢谢。有没有其他的服务器端录音工具？我只想找到最好的一个。我对这个领域相当陌生。 – Dany

@DineshAppavoo，你也可以试试[Janus]（https://janus.conf.meetecho.com/recordplaytest.html），另一个开源项目，顺便说一下，在[Github存储库中有重要的活动]（https://github.com/meetecho/janus-gateway） – AndresEC

WebRTC/WebSocket屏幕录制

回答

相关问题