如何使用webrtc录制视频

我需要在使用nodejs构建的网站上使用笔记本电脑摄像头录制视频。为此，我使用webRTC。到目前为止，我可以用笔记本相机拍照，但我需要录制一段视频。有人能帮我解释一下代码是怎么写的吗？我目前的代码如下：

<video id="video"></video>
<button id="startbutton">Take photo</button>
<button id="pausebutton">Pause</button>
<button id="resumebutton">Resume</button>
<canvas id="canvas"></canvas>

<script type="text/javascript">
(function() {

  var streaming = false,
      video        = document.querySelector('#video'),
      canvas       = document.querySelector('#canvas'),
      //photo        = document.querySelector('#photo'),
      startbutton  = document.querySelector('#startbutton'),
      width = 620,
      height = 50;

  navigator.getMedia = ( navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia);

  navigator.getMedia(
    {
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );

  video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
   // photo.setAttribute('src', data);
  }


  function pausevideo() {
    canvas.width = width;
    canvas.height = height;
    video.pause();
  }
  function resumevideo() {
    canvas.width = width;
    canvas.height = height;
    video.play();
  }


  startbutton.addEventListener('click', function(ev){
      takepicture();
    ev.preventDefault();
  }, false);

  pausebutton.addEventListener('click', function(ev){
      pausevideo();
    ev.preventDefault();
  }, false);

  resumebutton.addEventListener('click', function(ev){
      resumevideo();
    ev.preventDefault();
  }, false);


})();
</script>

拍照
暂停
简历
（功能（）{
var流=假，
video=document.querySelector（“#video”），
canvas=document.querySelector（“#canvas”），
//photo=document.querySelector（“#photo”），
startbutton=document.querySelector（“#startbutton”），
宽度=620，
高度=50；
navigator.getMedia=（navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia）；
navigator.getMedia(
{
视频：没错，
音频：错误
},
功能（流）{
if（navigator.mozGetUserMedia）{
video.mozSrcObject=流；
}否则{
var vendorURL=window.URL | | window.webkitURL；
video.src=vendorURL.createObjectURL（流）；
}
video.play（）；
},
功能（err）{
log（“发生错误！”+err）；
}
);
video.addEventListener（'canplay'，函数（ev）{
如果（！流）{
高度=video.videoHeight/（video.videoWidth/宽度）；
video.setAttribute（'width'，width）；
video.setAttribute（'height'，height）；
canvas.setAttribute（'width'，width）；
canvas.setAttribute（'height'，height）；
流=真；
}
}，假）；
函数takepicture（）{
画布宽度=宽度；
canvas.height=高度；
canvas.getContext（'2d'）.drawImage（视频，0，0，宽度，高度）；
var data=canvas.toDataURL（'image/png'）；
//photo.setAttribute（'src'，数据）；
}
函数pausevideo（）{
画布宽度=宽度；
canvas.height=高度；
video.pause（）；
}
函数恢复视频（）{
画布宽度=宽度；
canvas.height=高度；
video.play（）；
}
startbutton.addEventListener（'click'，函数（ev）{
拍摄照片（）；
ev.preventDefault（）；
}，假）；
pausebutton.addEventListener（'click'，函数（ev）{
pausevideo（）；
ev.preventDefault（）；
}，假）；
resumebutton.addEventListener（'click'，函数（ev）{
恢复视频（）；
ev.preventDefault（）；
}，假）；
})();

我不打算为您编写代码（如果您已经做到这一点，您似乎很有能力），但这里有一些建议可以帮助您朝着正确的方向前进

• 获取流时，为全局变量指定流的值（这样，您可以在许多函数中重用同一个流）
• 一旦你有了这个流，你就可以很容易地按照上面的教程进行操作，有一个写到磁盘的方法可以帮助你下载录音

如果您有一个流，这就是如何开始使用

RecordRTC

   var options = {
      type: 'video'
    };
    var recordRTC = RecordRTC(mediaStream, options);
    recordRTC.startRecording();
    recordRTC.stopRecording(function(videoURL) {
        mediaElement.src = videoURL; //plays the recorded blob url on that src
    });

---

录制功能可以在任何地方进行。您想通过websocket发送所有数据还是发送到要下载的blob？适用于blob录制，也适用于websocket（通过websocket将每个帧发送到服务器）。我想捕获视频并将其存储在本地文件夹中。您能帮我解决代码问题吗？好消息是，chrome开始支持。它将在进入频道时在RecordRTC中更新。之后，我们将能够在索引数据库中直接存储录制的Blob（MediaRecorder或non-）。