Image flickering in HTML5 canvas

Ask coding questions

Image flickering in HTML5 canvas

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?

Voters

Comments

hot new top

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
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

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

@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.

@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.

@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.."

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?

@xxpertHacker ^

@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

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

@xxpertHacker
2) https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
3, 4) This was just a weird idea I had

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

@xxpertHacker @tussiez @Coder100 can anyone help?

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

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

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

@programmeruser Hello

@Coder100 yes