如何在 JavaScript 中逐帧保存实时流媒体网络摄像头视频答案

【问题标题】：How to save the live streaming webcam video frame by frame in JavaScript如何在 JavaScript 中逐帧保存实时流媒体网络摄像头视频
【发布时间】：2018-04-22 10:04:29
【问题描述】：

我想按以下方式逐帧存储我的实时流媒体网络摄像头视频 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);
                  }); 
              }
           }

【问题讨论】：

标签： javascript webcam

【解决方案1】：

它涉及使用画布，您可以在该画布上绘制视频中正在发生的事情，然后从画布中保存图片。完整教程在这里https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos

【讨论】：

【解决方案2】：

以下是如何逐帧保存网络摄像头的方法（类似这样的方法适合您）：

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

【讨论】：