feat(barcode-scanning): add web support

[robingenz]

Pull request checklist

Please check if your PR fulfills the following requirements:

• [ ] The changes have been tested successfully.
• [ ] A changeset has been created (npm run changeset).

Close #20

[zavovi]

Hi, please, is there any update of this? I am using this plugin on Android and I want to use it on mobile web browser (mainly iOS). Is it possible? Can I help with continue of this?

[bartokopec]

Hello! Merging such a feature like this would be helpful :) @robingenz

[p3nnst8r]

Any updates to this?

[zavovi]

Hi, I spent some time to try this code. Now, it is not up to date and I had to change some things to update it to latest master. After that, I had lot of problems with camera on my computer. The code options.videoElement.play() is not working for me, play() is missing. The barcodeDetector is missing for me too. I was using Google Chrome on desktop Windows 10. I read lot of discussions and manual.

The last thing, I wanted to use this code for support my app on iOS, because I cannot pay for Applle developper account, but this is not supported in Safari.

[arcadius]

Any update on this please @robingenz

[SimonVermeiren]

Any updates already on this issue? @robingenz

[robingenz]

No, there are currently no updates.

[iBobik]

Testing it with the last commits from the main (checked out this PR and merged main) and it works on the web, but iOS (and possibly Android, not tested) was broken - it cannot serialize <video> element when calling BarcodeScanner.startScan, so I had to call it like this:

BarcodeScanner.startScan({ formats: [BarcodeFormat.QrCode], videoElement: Capacitor.isNativePlatform() ? undefined : videoEl.value, lensFacing: LensFacing.Back })

But I think this is bug - native plugin should ignore videoElement option.

[iBobik]

@robingenz Why you choose the ways with passing custom videoElement in the options?

Other similar plugin creates video element in the plugin, so for developer the web plugin works similarly to native plugins - video will appear under the DOM tree on all platforms, so there is less surface for bugs.

[iBobik]

Hi, I’ve just rewrote it to the updated API and changed web plugin to automatically create video element, so options are consistent to the native plugins.

My PR: https://github.com/capawesome-team/capacitor-mlkit/pull/211