Video removed from DOM continues to be rendered

[RouquinBlanc]

Removing a video from the DOM causes the imgDiv.src to stop updating because of the shouldAbort() check, but rendering itself is not stopped.

Adding an API to the imgDiv to stop rendering (like the play() API for starting the video) would be great.

Something like this seems to work, although does not allow to restart I guess:

                if (imgDiv.autoplay)
                    imgDiv.play();

+                imgDiv.stop = function () {
+                    renderInfo.controller.stop();
+                }
+
                function shouldAbort() {
                    return retryTime > 2000 || !imgDiv.parentNode;
                }

Otherwise in Bowser we see the CPU drastically increase when starting new streams, even if the previous were removed

[stefhak]

@RouquinBlanc with "Removing a video from the DOM" do you mean removing a video element from the DOM tree?

[RouquinBlanc]

Obviously the video element itself is removed by the code, replaced by the imgDiv and it's content. But then, there is no way to properly stop playing; if the imgDiv element is removed from DOM, then the rendering will not be stopped. Our use case is that we very often add/remove videos from our page, causing the rendering for each new video to be added each time...

[stefhak]

Thanks for explaining! Will think about what can be done.

[stefhak]

I've looked a bit on this. Do you think your use case could be supported by something like:

• using a MutationObserver on the parent node of each imgDiv element
• listening to childList mutations on the observer
• stop the rendering of the video for removed elements

I think that is something that could be added to webrtc.js.

[RouquinBlanc]

This could be a good option. As long as we can stop the rendering, it would help. I would be also nice to avoid duplicating the rendering when having several video elements pointing to the same mediastreamURL, as in some cases we can end up showing multiple instances of the same feed on the page, ending up deplating the ipad CPU very quickly... But it's just a side note, as I think I recall it would imply quite a lot of changes!!!

[stefhak]

I'll investigate a bit.

[stefhak]

@RouquinBlanc I created #602 , is it something you could apply and test? It means the app will have to manually stop the source, I plan to add having it happen automatically as a result of the element being removed from the DOM, but do not have the time right now (though it seems pretty straightforward to do).