Browser source cannot display videos/gifs/canvas on localhost

[238samixd]

Hello, I am creating a layout for stream with some animations.
I tested it all on my firefox browser and it all was fine but when I try to use browser in the OBS, it displays all html besides video, canvas, image with a gif source (other work fine).
Then I realised it could be a chromium error and it initially didn't work in chrome browser so i assumed it must be it. But after several code changes it is working the same as on firefox but still no improvement in OBS Browser. I host it on localhost with nodejs.
Here is the code for my canvas render:

<video width="256" height="225"></video>
<canvas width="256" height="225"></canvas>

video.addEventListener('play', function() {
    const $this = this;
    (function loop() {
      if (!$this.paused && !$this.ended) {
        context.drawImage($this, -400, -300);
        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
       
        const tolerance = 110;
        for(let i = 0, n = data.length; i < n; i += 4) {
          const diff = Math.abs(data[i] - data[0]) + Math.abs(data[i+1] - data[1]) + Math.abs(data[i+2] - data[2]);
          if(diff < tolerance) {
            data[i + 3] = 0;
          }
        }
        context.putImageData(imageData, 0, 0);
              setTimeout(loop, 1000 / 30);
            }
          })();
  }, 0);

I tried several things to fix this:

• Relaoding browser and refreshing cache
• Disabling hardware acceleration as well as enabling it
• Launching OBS as an admin

The only solution I came up with is to set overlay background to green and use window capture with chroma key but it is highly unreliable.
I am glad if anyone has an idea how to fix it.

 

[238samixd]

I also disabled Hardware-accelerated GPU Scheduler in Windows settings but after restarting PC it is still the same