canvas - 以快速的方式将画布捕获到视频

Question

我正在捕获包含视频、图像和文本等内容的画布，但我每帧捕获每一帧，onseeked在将视频搜索到所需帧后使用事件捕获下一帧。但这需要很长时间。

有没有办法更快地捕捉画布？例如使用 GPU 加速或专用软件。

编辑 ：

function download() {
      const blob = new Blob(recordedBlobs, {type: 'video/webm'});
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = 'test.webm';
      document.body.appendChild(a);
      a.click();
      setTimeout(() => {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
      }, 100);
    }

    function handleDataAvailable(event) {
      if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
      }
    }

    function handleStop(event) {
      console.log('Recorder stopped: ', event);
      const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
      document.querySelector('video').src = window.URL.createObjectURL(superBuffer);
    }

    function stopRecording() {
      mediaRecorder.stop();
      console.log('Recorded Blobs: ', recordedBlobs);
      document.querySelector('video').controls = true;
    }


    function startRecording() {
      videos.forEach(element =>{
        element.play();
      });
      var stream = document.querySelector('canvas').captureStream(30);

      let options = {mimeType: 'video/webm'};
      recordedBlobs = [];
      try {
        mediaRecorder = new MediaRecorder(stream, options);
      } catch (e0) {
        console.log('Unable to create MediaRecorder with options Object: ', e0);
        try {
          options = {mimeType: 'video/webm,codecs=vp9'};
          mediaRecorder = new MediaRecorder(stream, options);
        } catch (e1) {
          console.log('Unable to create MediaRecorder with options Object: ', e1);
          try {
            options = 'video/vp8'; // Chrome 47
            mediaRecorder = new MediaRecorder(stream, options);
          } catch (e2) {
            alert('MediaRecorder is not supported by this browser.\n\n' +
              'Try Firefox 29 or later, or Chrome 47 or later, ' +
              'with Enable experimental Web Platform features enabled from chrome://flags.');
            console.error('Exception while creating MediaRecorder:', e2);
            return;
          }
        }
      }

      mediaRecorder.onstop = handleStop;
      mediaRecorder.ondataavailable = handleDataAvailable;
      mediaRecorder.start(100); // collect 100ms of data
      console.log('MediaRecorder started', mediaRecorder);
      const startTime = getTime();
      let nextExpTime = startTime;
      var curTime = null;

      const onTimer = () => {
        videos.forEach(element =>{
          let dureeTotale = element.duration; // Durée de la vidéo en cours
          if(frameNum == 1){
            element.play();
            element.pause();
          }
          // let seek = ((frameNum % (dureeTotale * 30 +1)) / 30); // Si dépassement, retour à 0 secondes;
          let framerate = numFrames / dureeTotale;
          if ((element.currentTime * framerate) === numFrames){
            stopRecording();
            download();
            // capturer.stop();
            // capturer.save(showVideoLink);
            clearInterval(timer);
            return;
          }
        })

      };

      onTimer();
      const timer = setInterval(onTimer, 0);
    }
  }

标签： canvasffmpegseek