juliansteenbakker / mobile_scanner

A universal scanner for Flutter based on MLKit. Uses CameraX on Android and AVFoundation on iOS.
BSD 3-Clause "New" or "Revised" License
912 stars 524 forks source link

[web] Camera not starting #1128

Open EricRode opened 4 months ago

EricRode commented 4 months ago

I am using the scanner on web. When I open the screen with the scanner, then it takes a few seconds until the permission is requested in Chrome. After granting the permission I get the following error code in the web console and I get a black screen or blank:

error

doctor

image

I am using version 5.1.1. I am not able to figure out the issue. Thanks for your help!

navaronbracke commented 4 months ago

If I grep on _scriptUrls in our codebase of mobile_scanner, I get no results.

Are you using the new Flutter web bootstrapping? For context, the user in https://github.com/flutter/flutter/issues/150333 had the same error. On that thread I had responded with the following:

I think this is working as intended. As outlined in the bootstrap docs here https://docs.flutter.dev/platform-integration/web/bootstrapping

if you want to customize the bootstrapping process, you can either: a) provide all your bootstrapping code in web/flutter_bootstrap.js and leave the script tag that loads that script in the index.html b) remove the flutter_bootstrap.js script tag and do everything in the index.html c) do step a, but inline its contents into the index.html instead, using the template token specific to that purpose

However, your code sample indicates you mixed up the two approaches by including both the bootstrap script and the template tokens

EricRode commented 4 months ago

Okay, thank you.

Just a real dump question:

How exactly does my index.html need to look like. Are there scripts I need to include in order for the scanner to work?

Sorry for the stupid asking. I am just not able to get it running.

navaronbracke commented 4 months ago

If you follow the new Flutter Web bootstrapping docs above, you can probably get rid of the _scriptUrls bug.

As for using mobile_scanner on the web, since you are using version 5.1.1, when starting the scanner, it should load the ZXing library in a script tag. See https://github.com/juliansteenbakker/mobile_scanner/blob/master/lib/src/web/barcode_reader.dart#L57-L99