Ask coding questions

← Back to all posts
Image flickering in HTML5 canvas
programmeruser (571)

Open this repl in a new tab, press "play", wait 50-60 seconds, and you will see a video being played.
The problem is that it is flickering.
I tried using requestAnimationFrame and preloading images, but the flickering is still here.
What's going on?

Comments
hotnewtop
tussiez (1515)
  1. Why are you converting the mp4 into separate images?!
    There is a way to stream the entire video, I don't remember where, but it exists.. search it up

  2. Don't use 1000/60, framerates of video can vary. This might be why you have to wait a second or so to see the flickering issue. @xxpertHacker

programmeruser (571)

@tussiez
1. This was an experiment
2. The max refresh rate of browsers is 1000/60

tussiez (1515)

@programmeruser Sometimes videos have a framerate of 24,30, etc. Also, Chrome has supported 60+fps in requestAnimationFrame for a while now, for displays that support it.

xxpertHacker (860)

@programmeruser It's the maximum possible within a browser, by no means will you reach it.

A 30fps monitor/computer setup definitely won't be running at 60fps.

tussiez (1515)

@xxpertHacker Oops, not fps - refresh rate.
@programmeruser - edit: I pinged xxperthacker woops
E.g you have a simple "FPS" counter:

let frames = 0;
let fps = 0;
const someLoop = () => {
requestAnimationFrame(someLoop);
frames++;
}

const simpleFPSCounter = () => {
let currFrame = frames;
setTimeout(() => {fps = frames - lastCount; console.log(fps); simpleFPSCounter()}, 1000);
}

someLoop();
simpleFPSCounter();

On a 59-60Hz display, this will log "60". On a 75hz display, it logs "75", and so on and so forth
https://stackoverflow.com/questions/6025661/how-can-i-get-vsync-callback-on-html5-canvas#:~:text=In%20Chrome%2C%20the%20time%20parameter%20of%20requestAnimationFrame%28%29%20is,cycle%20%28or%20windows%20compositing%20manager%2C%20for%20that%20matter%29.
Highlighted:

"In Chrome, the time parameter of requestAnimationFrame is VSYNC time.."

xxpertHacker (860)

Some questions (since I think that this is an XY problem):

  • Why does it delay 50 seconds?

  • Are there any particular reasons that you're using base64 encoding to send binary? WS protocol supports sending plain binary, and the JS API supports receving ArrayBuffers.

  • Would HTML's <video> suit your needs instead? (It supports streaming)

  • Why do you need to load frame-by-frame?

programmeruser (571)

@xxpertHacker
1. Since it takes time to process the video
2. It makes it easier to construct a data URL
3. This was an experiment
4. This was an experiment

xxpertHacker (860)

@programmeruser
2) wait, what's a data URL?
3, 4) Why? Seems like an XY problem then.

xxpertHacker (860)

@programmeruser Oh, I still recognize them by URI, not URL, but I see that changed :/

Coder100 (17034)

are you sure the images go one after the other? @programmeruser

Coder100 (17034)

like in the terminal, it isn't guaranteed that the flush is instant @programmeruser

xxpertHacker (860)

@programmeruser Seems like in-between frames, it shows the initial frame. Sure, I'll check it out, I have time.