How to scan QR code with Flutter web app? - dart

Question

I've search and tried these plugins:
qr_bar_code_scanner_dialog: ^0.0.5
ai_barcode_scanner: ^0.0.1+1
But none of these works when I tried to open my Web app in my phones browser. The screen turns black when I press my Button that should have started the scanner.
I've seen that many others have problems with this. So I hope there is a solution out there that works for me.
The whole reason I use Flutter is that it seems to be the easiest way to develope an app for both Android and iOS, using Web.
In debug mode everything works fine with desktop browser and phone.
But not when I have deployed my app with Firebase Hosting and use the phone browser.
IconButton(
onPressed: (){
//scanQR();
_qrBarCodeScannerDialogPlugin.getScannedQrBarCode(
context: context,
onCode: (code) {
print(code);
setState(() {
this.code = code;
});
});
},
icon: const Icon(Icons.qr_code_scanner),
iconSize: 130,
tooltip: 'Scan',
color: const Color.fromRGBO(28,37,44,1),
),

Answer 1

You can combine two plugins - camera and flutter_barcode_sdk - to implement a web QR scanner app.
flutter_barcode_sdk: provide API to decode barcode and Qr code from byte array, supporting Windows, Linux, macOS, Android, iOS and Web:
List<BarcodeResult> results =
await _barcodeReader.decodeImageBuffer(
byteData.buffer.asUint8List(),
image. Width,
image. Height,
byteData.lengthInBytes ~/ image.height,
ImagePixelFormat.IPF_ARGB_8888.index);
camera: the official camera plugin that can return camera frame in real-time:
await _controller.startImageStream((CameraImage availableImage) async {
int format = ImagePixelFormat.IPF_NV21.index;
switch (availableImage.format.group) {
case ImageFormatGroup.yuv420:
format = ImagePixelFormat.IPF_NV21.index;
break;
case ImageFormatGroup.bgra8888:
format = ImagePixelFormat.IPF_ARGB_8888.index;
break;
default:
format = ImagePixelFormat.IPF_RGB_888.index;
}
_barcodeReader
.decodeImageBuffer(
availableImage.planes[0].bytes,
availableImage.width,
availableImage.height,
availableImage.planes[0].bytesPerRow,
format)
.then((results) {
// TODO
}).catchError((error) {
});
});