如何使用 webRTC 和基于服务器的对等连接录制网络摄像头和音频 [英] How to record webcam and audio using webRTC and a server-based Peer connection

问题描述

我想记录用户的网络摄像头和音频并将其保存到服务器上的文件中.然后这些文件就可以提供给其他用户了.

我在播放时没有问题，但是在录制内容时遇到了问题.

我的理解是 getUserMedia .record() 函数尚未编写 - 到目前为止只为它提出了建议.

我想使用 PeerConnectionAPI 在我的服务器上创建对等连接.我知道这有点 hacky，但我认为应该可以在服务器上创建一个对等点并记录客户端对等点发送的内容.

如果可以的话，我应该能够将这些数据保存为 flv 或任何其他视频格式.

我的偏好实际上是在客户端录制网络摄像头 + 音频，如果客户端在上传前不喜欢他们的第一次尝试，则允许他们重新录制视频.这也将允许网络连接中断.我看过一些代码，它允许通过将数据发送到画布来记录来自网络摄像头的单个图像"——这很酷，但我也需要音频.

这是我目前的客户端代码:

 <视频自动播放><script language="javascript" type="text/javascript">功能 onVideoFail(e) {console.log('网络摄像头失败！', e);};函数 hasGetUserMedia() {//注意:Opera 是无前缀的.return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia);}如果(hasGetUserMedia()){//好！} 别的 {alert('您的浏览器不支持getUserMedia()');}window.URL = window.URL ||window.webkitURL;navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia;var video = document.querySelector('video');var 流记录器；var 网络摄像头流；如果(navigator.getUserMedia){navigator.getUserMedia({audio: true, video: true}, function(stream) {video.src = window.URL.createObjectURL(stream);网络摄像头流 = 流；//streamrecorder = webcamstream.record();}, onVideoFail);} 别的 {警报('失败')；}功能开始录音(){streamRecorder = webcamstream.record();设置超时(停止录音，10000)；}功能停止录音(){streamRecorder.getRecordedData(postVideoToServer);}功能 postVideoToServer(videoblob) {/* var x = new XMLHttpRequest();x.open('POST', 'uploadMessage');x.send(videoblob);*/无功数据 = {};data.video = videoblob;data.metadata = '测试元数据';data.action = "upload_video";jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);}函数 onUploadSuccess() {警报('视频上传')；}<div id="网络摄像头控件"><a class="recordbutton" href="javascript:startRecording();">RECORD</a>

解决方案

你绝对应该看看 Kurento.它提供了一个 WebRTC 服务器基础设施，允许您从 WebRTC 提要等进行记录.您还可以为您正在计划的应用程序找到一些示例 这里.将录制功能添加到该演示中，并将媒体文件存储在 URI(本地磁盘或任何地方)中非常容易.

该项目在 LGPL Apache 2.0 下获得许可

<小时>

编辑 1

自从这篇文章以来，我们添加了一个新教程，展示了如何在几个场景中添加记录器

• kurento-hello-world-recording:简单的录制教程，展示了录制端点的不同功能.
• kurento-one2one-recording:如何在媒体服务器中记录一对一的通信.
• kurento-hello-world-repository:使用外部存储库记录文件.

免责声明:我是开发 Kurento 团队的一员.

I would like to record the users webcam and audio and save it to a file on the server. These files would then be able to be served up to other users.

I have no problems with playback, however I'm having problems getting the content to record.

My understanding is that the getUserMedia .record() function has not yet been written - only a proposal has been made for it so far.

I would like to create a peer connection on my server using the PeerConnectionAPI. I understand this is a bit hacky, but I'm thinking it should be possible to create a peer on the server and record what the client-peer sends.

If this is possible, I should then be able to save this data to flv or any other video format.

My preference is actually to record the webcam + audio client-side, to allow the client to re-record videos if they didn't like their first attempt before uploading. This would also allow for interruptions in network connections. I've seen some code which allows recording of individual 'images' from the webcam by sending the data to the canvas - that's cool, but I need the audio too.

Here's the client side code I have so far:

  <video autoplay></video>

<script language="javascript" type="text/javascript">
function onVideoFail(e) {
    console.log('webcam fail!', e);
  };

function hasGetUserMedia() {
  // Note: Opera is unprefixed.
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported in your browser');
}

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.querySelector('video');
var streamRecorder;
var webcamstream;

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    webcamstream = stream;
//  streamrecorder = webcamstream.record();
  }, onVideoFail);
} else {
    alert ('failed');
}

function startRecording() {
    streamRecorder = webcamstream.record();
    setTimeout(stopRecording, 10000);
}
function stopRecording() {
    streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {
/*  var x = new XMLHttpRequest();
    x.open('POST', 'uploadMessage');
    x.send(videoblob);
*/
    var data = {};
    data.video = videoblob;
    data.metadata = 'test metadata';
    data.action = "upload_video";
    jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
    alert ('video uploaded');
}

</script>

<div id="webcamcontrols">
    <a class="recordbutton" href="javascript:startRecording();">RECORD</a>
</div>

解决方案

You should definitely have a look at Kurento. It provides a WebRTC server infrastructure that allows you to record from a WebRTC feed and much more. You can also find some examples for the application you are planning here. It is really easy to add recording capabilities to that demo, and store the media file in a URI (local disk or wherever).

The project is licensed under LGPL Apache 2.0

---

EDIT 1

Since this post, we've added a new tutorial that shows how to add the recorder in a couple of scenarios

• kurento-hello-world-recording: simple recording tutorial, showing the different capabilities of the recording endpoint.
• kurento-one2one-recording: How to record a one-to-one communication in the media server.
• kurento-hello-world-repository: use an external repository to record the file.

Disclaimer: I'm part of the team that develops Kurento.

这篇关于如何使用 webRTC 和基于服务器的对等连接录制网络摄像头和音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！