Browser source cannot display videos/gifs/canvas on localhost


New Member
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 =;
        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.


  • 2023-04-17 15-57-16.txt
    21.4 KB · Views: 17


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