バックグラウンドでrequestAnimationFrameを実行します。

Question

私はビデオストリームをアニメーション化するためにrequestAnimationFrameを使用しています。リクエストアニメーションはバックグラウンドでは機能しないので、バックグラウンドで実行させる方法はあります。

setIntervalまたはsetTimeoutを使用してアニメーションすることもできますが、これらを使用すると、アニメーションが正常に動作せず、ビデオストリームの画像が点滅していました。私はあなたが運の外にあると思います

const drawFrame = function drawFrame() { 
      if (!ctx) { 
       ctx = canvas.getContext('2d'); 
      } 
      if (!tmpCanvas) { 
       tmpCanvas = document.createElement('canvas'); 
       tmpCtx = tmpCanvas.getContext('2d'); 
       tmpCanvas.width = canvas.width; 
       tmpCanvas.height = canvas.height; 
      } 
      tmpCtx.drawImage(videoElement, 0, 0, tmpCanvas.width, tmpCanvas.height); 
      const imgData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height); 
      const data = selectedFilter(imgData); 
      ctx.putImageData(data, 0, 0); 
      if (!stopped) { 
       requestAnimationFrame(drawFrame); 
      } else { 
       tmpCanvas = null; 
       tmpCtx = null; 
       ctx = null; 
      } 
     }; 
     requestAnimationFrame(drawFrame); 

Answer 1

：

は、ここに私のコードです。 requestAnimationFrameは意図的にバックグラウンドで一時停止します。なぜなら、アニメーションはバックグラウンドで実行される理由がないからです。setIntervalとsetTimeoutはアニメーション用に設計されたものではありません。

あなたは、ビデオストリームをアニメーション化する必要があると言います。動画タグの上にアニメーションを適用する、またはキャンバス要素を介して動画要素の外観を変更することを意味しますか？どちらの場合も、バックグラウンドでバックグラウンドで続けてはいけませんが、computeFrame（Firefoxのみ）は動画のフレームごとに1回実行されます。または、一連の静止画像を連続してアニメーション化することで、実際にビデオストリームを偽造しているのでしょうか？その場合、なぜあなたはビデオ要素を使用していませんか？