以每秒60帧的速度从画布上捕获帧

Question

大家好，我有一个画布，我在上面写了一个相当复杂的动画。假设我想以每秒60帧的速度拍摄画布的屏幕截图。画布不必实时播放，我只需要它每秒捕捉60帧，这样我就可以将屏幕截图发送到FFmpeg并制作视频。我知道我可以使用canvas.toDataURL，但如何顺利地捕捉帧？

Answer 1

如果您在浏览器中使用乐透网络进行后期效果内容，请使用此代码暂停视频和乐透动画。然后截屏并使用Whammy编译一个webm文件，然后通过ffmpeg运行该文件以获得所需的输出。

generateVideo(){
const vid = new Whammy.fromImageArray(this.captures, 30);
vid.name = "project_id_238.webm";
vid.lastModifiedDate = new Date();
this.file = URL.createObjectURL(vid);
},
async pauseAll(){
this.pauseVideo();
if(this.animations.length){
this.pauseLotties()
}
this.captures.push(this.canvas.toDataURL('image/webp'));
if(!this.ended){
setTimeout(()=>{
this.pauseAll();
}, 500);
} 
},
async pauseVideo(){
console.log("curretTime",this.video.currentTime);
console.log("duration", this.video.duration);
this.video.pause();
const oneFrame = 1/30;
this.video.currentTime += oneFrame;
},
async pauseLotties(){
lottie.freeze();
for(let i =0; i<this.animations.length; i++){
let step =0;
let animation = this.animations[i].lottie;
if(animation.currentFrame<=animation.totalFrames){
step = animation.currentFrame + animation.totalFrames/30;
}
lottie.goToAndStop(step, true, animation.name); 
}
}