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

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.