如何使用 webRTC 和基于服务器的对等连接录制网络摄像头和音频

Question

新手上路，请多包涵

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

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

我的理解是 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>