Захват кадров с холста на скорости 60 кадров в секунду

Question

Привет всем, у меня есть холст, для которого я пишу довольно сложную анимацию. Допустим, я хочу делать скриншоты холста со скоростью 60 кадров в секунду. Холст не должен воспроизводиться в реальном времени, мне просто нужно захватывать 60 кадров в секунду, чтобы я мог отправить скриншоты в FFmpeg и сделать видео. Я знаю, что могу использовать canvas.toDataURL, но как плавно захватывать кадры?

Answer 1

Используйте этот код для приостановки видео и анимации lott ie, если вы используете lott ie -web для содержимого с последующими эффектами в браузере. Чем делать скриншоты и использовать 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); 
        }
      }