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

问题描述

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

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.

我的理解是还没有编写getUserMedia .record（）函数 - 只提出了一个提案到目前为止。

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

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

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.

如果这样有可能，我应该能够将这些数据保存为flv或任何其他视频格式。

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>

推荐答案

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

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

项目在下获得许可LGPL Apache 2.0

The project is licensed under LGPL Apache 2.0

编辑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 ：简单的录音教程，显示录制端点的不同功能。


• kurento-one2one-recording ：如何在媒体服务器中记录一对一通信。


• kurento-hell o-world-repository ：使用外部存储库来记录文件。

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

免责声明：我属于开发Kurento的团队。

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

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