When using canvas and webgl to draw video streams, there will be cross-over images under Firefox.
Greetings:
On my webpage, I need to use canvas to draw two other pictures decoded by webassembly. I found that the two screens will cross each other under Firefox, but not under Google Chrome. Under Firefox, when two tabs are opened, the images will affect each other. It seems that after drawing through the timer, the browsers share a webgl context.
After testing we found: 1. The versions of Firefox are all up to date. In this case, some computers will have images affecting each other, while others will not (computers with graphics cards of Intel HD Graphics 630 will display normally, while others will not). 2. On the computer where the page displays an error, on the same computer, we update the graphics card driver version of the device manager, and then refresh the page. The pages will no longer affect each other. But after closing all Firefox browsers and opening them again, the images interacted with each other again.
The first picture is our real usage scenario, and the second picture is the minimum reproduction example.
Does anyone know how to fix this issue?
Thank you.