如何使用WebRTC和基于服务器的对等连接记录摄像头和音频?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (3)
  • 关注 (0)
  • 查看 (299)

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

我在回放时没有问题,但是我无法记录内容。

我的理解是,getUserMedia .record()函数尚未写入 - 迄今为止只有一个提议。

我想使用PeerConnectionAPI在我的服务器上创建一个对等连接。我知道这有点不好意思,但我认为应该有可能在服务器上创建一个对等点并记录客户对等点发送的内容。

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

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

这是我迄今为止的客户端代码:

  <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(本地磁盘或任何地方)中。

该项目根据Apache 2.0 获得许可

自从这篇文章之后,我们添加了一个新的教程,介绍如何在几个场景中添加录音机

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

扫码关注云+社区

领取腾讯云代金券