Question

我希望以下列方式逐帧存储我的直播网络摄像头视频 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);
                  }); 
              }
           }

Answer 1

它涉及使用Canvas在其上绘制视频中正在进行的操作，然后从Canvas中保存图片。完成这里的教程https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos

Answer 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

如何在JavaScript

2 个答案: