0

Looks like Chrome have a bug with CanvasRenderingContext2D and drawImage from a video element when tab gets suspended by a browser (if user focuses a different tab).

Code like that doesn't work anymore when tab is in a background, audio continues to play, timeupdate events of a video are getting fired as usual, but drawImage draws the same frame on every tick:

const video = document.getElementById('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

...

setInterval(() => ctx.drawImage(videoElement, 0, 0), 33);

This issue is not related to timer throttling (tested with timer events from background workers, drawing current time on a canvas in the same interval and etc).

Does anyone have ideas why is it happening and how to prevent Chrome from suspending video element?

Salmond
  • 1
  • 1
  • This has nothing to do with Canvas. [`setInterval` is throttled](/q/6032429/4642212) when the document is hidden. I would use [`requestAnimationFrame`](//developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) anyway. – Sebastian Simon May 12 '21 at 00:23
  • I think I explained that it is not related to timer throttling in my question, sorry if it wasn't highlighted enough. This is clearly an issue with 2d context because exact same code with exact same timers continues to work with WebGL context. – Salmond May 12 '21 at 00:27
  • How do you verify if it works or not? Note that your video element will probably be the first to get throttled, moreover if it is muted, in which case it will even get paused. – Kaiido May 12 '21 at 02:37
  • [I can reproduce](https://jsfiddle.net/0fkbzyed/), so the problem is really in the `drawImage(video)` call (fillText in my fiddle keeps working) This reminds of [this bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1172481&q=Video&can=2). Sounds like they just pause the video stream when offscreen, not sure you can do much, apart from [asking them](https://crbug.com) to change their behavior. – Kaiido May 12 '21 at 03:20
  • Looks like you are right - the issue is indeed with video component that it stops updating frames when tab goes into inactive mode. – Salmond May 12 '21 at 16:20

0 Answers0