Run requestAnimationFrame im Hintergrund

Question

Ich benutze requestAnimationFrame, um Video-Streams zu animieren, und ich weiß, dass Anfrage-Animation nicht in den Hintergründen funktioniert, also gibt es eine Möglichkeit, es im Hintergrund laufen zu lassen.

Ich weiß, dass wir mit setInterval oder setTimeout auch animieren können, aber wenn ich diese benutze, Animationen wurden nicht ordnungsgemäß funktionieren und Bilder im Video-Stream blinken.

Hier ist mein Code:

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

Ich denke, man kein Glück. requestAnimationFrame wird absichtlich im Hintergrund angehalten, da Animationen keinen Grund haben, im Hintergrund ausgeführt zu werden. Wie Sie erwähnen, sind setInterval und setTimeout nicht für Animationen vorgesehen und sollten nicht als solche verwendet werden.

Sie erwähnen, dass Sie einen Video-Stream animieren müssen. Meinst du, dass du eine Animation über einem Video-Tag anlegst oder das Aussehen des Video-Elements über ein Canvas-Element änderst? In beiden Fällen sollten Sie dies nicht immer im Hintergrund tun, aber Sie können computeFrame (nur Firefox) geben, der einmal in jedem Frame des Videos ausgelöst wird. Oder täuschen Sie gerade einen Videostream vor, indem Sie nacheinander eine Reihe von statischen Bildern animieren? Warum verwenden Sie das Videoelement in diesem Fall nicht?