如何在JavaScript中逐帧保存直播网络摄像头视频

我想以以下方式逐帧存储我的直播网络摄像头视频 frame1.jpg，frame2.jpg，frame3.jpg。。。在目录中。我可以在浏览器上直播视频，但仍然无法逐帧保存。下面给出了JavaScript代码

          function start(){
            var localstream;

              if(navigator.mediaDevices.getUserMedia !== null) {
                  var options = { 
                       video:true, 
                       audio:false 
                  };  
                  navigator.webkitGetUserMedia(options, function(stream){

                      vid.src = window.URL.createObjectURL(stream);
                      localstream = stream;
                      vid.play();
                      console.log("streaming");

                  },function(e) { 

                      console.log("background error : " + e.name);
                  }); 
              }
           }

---

它包括使用画布，在画布上绘制视频中的内容，然后从画布上保存图片。完成此处的教程

以下是如何逐帧保存网络摄像头（类似的内容适用于您）：

var preview = document.querySelector("#your-canvas")
var ctx = preview.getContext('2d')
setInterval(function () {
   ctx.drawImage(vid, 0, 0, 640, 360);
   preview.toBlob(function(blob) {
        // Save Blob
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        var url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = _generateGuid();
        a.click();
        window.URL.revokeObjectURL(url);
   });      
}, 1000 / frameRate) // adjust this for your desired FPS