search

zxing-js / library

Multi-format 1D/2D barcode image processing library, usable in JavaScript ecosystem.
https://zxing-js.github.io/library/
Apache License 2.0
2.42k stars 539 forks source link

Cropping from video source and iOS #398

Open vasnakos opened 3 years ago

vasnakos commented 3 years ago

@odahcam Thank you for your work and help so far! I am using the zxing-js/library to decode barcodes (using BrowserCodeReader) from browsers and in order to help users we have overriden the drawImageOnCanvas method to call our custom drawImage function.

It works perfectly on web browsers and Android but has an issue on iOS browsers. Trying to figure out what's the issue with iOS I came across this were down at the Discussion section it says that "The image object can be an img element, a canvas element, or a video element. Use of the video element is not supported in Safari on iOS, however.".

Also, I found some workarounds like this one which suggests using the requestAnimationFrame in order to support the cropping from video source on iOS.

So my questions are:

  1. Do you face the same issue when it comes to cropping from video source and provide to decodeFromVideoDevice on iOS?
  2. Any recommendations/ suggestions?

Thanks again for your work and your help. :)

EDIT 23/1/2021: Finally I found out, that the issue I was facing on iOS had to do with the aspect ratio of the video. What I did to fix that, was to see if we are in portrait or landscape mode, and then calculate the cropped dimensions and destination width/height.

odahcam commented 3 years ago

Thanks @vasnakos ! I never noticed any issues like that, but an alternative would be taking a snapshot directly from the camera feed, but that would be very bleeding edge and wouldn't work on every browser, but it's certainty the future for the lib. I don't see bright a future with with canvas capturing btw. Glad to see you found a way to fix your issue.