Streaming webcam from mediadevice to videoelement and painting to canvas doesnt work on chromium browsers

Question

Issue

I am using a videoelement that i have created with document.createlement('video') i have not appended it to the DOM, since i dont want it visible anywhere, i just need it so i can stream my webcam to it and then paint that to a , where i can apply filters, e.t.c live, so videoelement is detached from DOM.

This works in Firefox, but in Chromium browsers all i get is a black canvas.

I am expecting chromium browsers to be able to have a continued videostream that i can draw to my canvas, even if the videoelement is detached from DOM, if i do add the videoelement to DOM document.body.appendChild(videoelementhere) it works and the canvas get the videofeed. only as long as videoelement is visible on view(e.g. if canvas is in top of page, and videoelement in bottom, and theres scroll content between so i cant see videoelement), if videoelement is not visible but is attached and the canvas element is, the video is paused and the canvas has whatever frame i drew last from the videoelement.

Answer 1

Answering my own question, so others having same issue might find a easier solution than spending 3 days debugging.

Apparently this is intended as of sometime in 2017 where chromium introduced this as a feature to save resources ( wich is a valid point ) - see here: https://issues.chromium.org/issues/40492976 Sadly this breaks user expectations, if i have a videoelement with autoplay = true, it sends an pause event if the videoelement is not in view (either detached, another tab, or if its just out of scroll view). This should be expected to play the video track instead of pausing it behind the scenes.

Another resource about this implementation is here: https://developer.chrome.com/blog/media-updates-in-chrome-61#background-video-track-optimizations

Initially i tried canceling the onpause event but that didnt work so i tried the following that both worked:

1) Append it to the document body, layer it on top of my canvas and set visibility:hidden; (display:none fails with same reasoning, so use visibility:hidden)

• this way we imitate the videoelement being shown on view, but still being able to hide it.

2) when stream is optained, and the detached videoelement is created, set the src = stream & call videoElement.play() manually

• this forces a play event, and the builtin pauseevent is overruled.

I ended up using uption 2

This felt like the most sane workaround, i dont manipulate any pause events that might be used elsewhere, and i dont have to append the videoelement and hacky position it over my canvas to keep it shown in view with the canvas at all times while still hiding it. here i simply play manually, wich doenst work automatically with autoplay in this situation where pause events are sent.

it still feels hacky, and weird that firefox handles this in a much better way, atleast autoplay = true, should not care about the videoelement being detached or not.