Canvas getImageData returning incorrect data on certain mobile devices

Question

I am working on a canvas video player with some special features based on frames of the video. To overcome the unreliable timing in the video HTML5 tag the videos we are using h

Answer 1

I have been going through the same problem and just couldn't get it. I finally have the answer in my case which sounds 99% like your problem as well.

It's the pixel density!!

The pixel densities are different on all the devices you mentioned and the ones that have probably 1 dpr (device pixel ratio) are working correctly, whereas the others are not.

So in my case using p5js I set the pixel density to be 1 and it worked like a charm;

pixelDensity(1);

So set it to be 1 dpr and you are most probably good to go!

I hope this helps some people out there because I spent quite a while on this problem.

Answer 2

Your code is fine so the problem here resides on how some androids render your barcode. The implementation of your barcode is way too small (16x1 pixels) and it's left indented.

Being left indented any anti alias that the device makes on the outer pixels will mess your barcode and give you incorrect results so, when working with video render, you definitely don't want to work on a one pixel safe area.

My suggestion would be to redo the barcodes to a bigger size - let's say 18 pixels height - only use black and white (no grays), center it on the video and the rest of the line paint it green: (in this example it's a barcode for "1")

Then make a GetImageData of the full 320x16 and get rid of everything that has a RGB of 0x255x0 (and approximate) and you have your barcode that would be able to use to get your FrameNumber.

I know you probably would like an answer where it wouldn't be necessary to redo the video but, in this case, the source is the problem.