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

Question

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

我没有播放问题,但是我在录制内容方面遇到了问题.

我的理解是.record()还没有编写getUserMedia 函数 - 到目前为止只提出了一个提议.

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

如果可以,我应该能够将此数据保存为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>

Answer 1

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

该项目根据LGPL Apache 2.0 获得许可

编辑1

从这篇文章开始,我们添加了一个新教程,展示了如何在几个场景中添加录制器

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

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

Answer 2

请检查RecordRTC

RecordRTC在github上获得MIT许可.

Answer 3

我认为使用kurento或其他MCU仅用于录制视频会有点过分,特别是考虑到Chrome 自v25以来已经从v47和Firefox 获得了MediaRecorder API支持.所以在这个结点,你可能甚至不需要一个外部的js库来完成这项工作,尝试使用MediaRecorder录制视频/音频的演示:

演示 - 可以在chrome和firefox中工作(故意将blob推送到服务器代码)

Github代码来源

如果运行firefox,你可以在这里测试它(chrome需要https):

'use strict'

let log = console.log.bind(console),
  id = val => document.getElementById(val),
  ul = id('ul'),
  gUMbtn = id('gUMbtn'),
  start = id('start'),
  stop = id('stop'),
  stream,
  recorder,
  counter = 1,
  chunks,
  media;


gUMbtn.onclick = e => {
  let mv = id('mediaVideo'),
    mediaOptions = {
      video: {
        tag: 'video',
        type: 'video/webm',
        ext: '.mp4',
        gUM: {
          video: true,
          audio: true
        }
      },
      audio: {
        tag: 'audio',
        type: 'audio/ogg',
        ext: '.ogg',
        gUM: {
          audio: true
        }
      }
    };
  media = mv.checked ? mediaOptions.video : mediaOptions.audio;
  navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
    stream = _stream;
    id('gUMArea').style.display = 'none';
    id('btns').style.display = 'inherit';
    start.removeAttribute('disabled');
    recorder = new MediaRecorder(stream);
    recorder.ondataavailable = e => {
      chunks.push(e.data);
      if (recorder.state == 'inactive') makeLink();
    };
    log('got media successfully');
  }).catch(log);
}

start.onclick = e => {
  start.disabled = true;
  stop.removeAttribute('disabled');
  chunks = [];
  recorder.start();
}


stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  start.removeAttribute('disabled');
}



function makeLink() {
  let blob = new Blob(chunks, {
      type: media.type
    }),
    url = URL.createObjectURL(blob),
    li = document.createElement('li'),
    mt = document.createElement(media.tag),
    hf = document.createElement('a');
  mt.controls = true;
  mt.src = url;
  hf.href = url;
  hf.download = `${counter++}${media.ext}`;
  hf.innerHTML = `donwload ${hf.download}`;
  li.appendChild(mt);
  li.appendChild(hf);
  ul.appendChild(li);
}

      button {
        margin: 10px 5px;
      }
      li {
        margin: 10px;
      }
      body {
        width: 90%;
        max-width: 960px;
        margin: 0px auto;
      }
      #btns {
        display: none;
      }
      h1 {
        margin-bottom: 100px;
      }

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h1> MediaRecorder API example</h1>

<p>For now it is supported only in Firefox(v25+) and Chrome(v47+)</p>
<div id='gUMArea'>
  <div>
    Record:
    <input type="radio" name="media" value="video" checked id='mediaVideo'>Video
    <input type="radio" name="media" value="audio">audio
  </div>
  <button class="btn btn-default" id='gUMbtn'>Request Stream</button>
</div>
<div id='btns'>
  <button class="btn btn-default" id='start'>Start</button>
  <button class="btn btn-default" id='stop'>Stop</button>
</div>
<div>
  <ul class="list-unstyled" id='ul'></ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 4

是的,正如您所理解的,MediaStreamRecorder目前尚未实现.

MediaStreamRecorder是一个用于记录getUserMedia()流的WebRTC API.它允许Web应用程序从实时音频/视频会话创建文件.

或者你可能会喜欢这个http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia但音频缺少部分.