如何使用 Flutter Web 应用程序扫描二维码？答案

【问题标题】：How to scan QR code with Flutter web app?如何使用 Flutter Web 应用程序扫描二维码？
【发布时间】：2022-11-24 10:26:55
【问题描述】：

我已经搜索并尝试了这些插件：

qr_bar_code_scanner_dialog: ^0.0.5

ai_barcode_scanner: ^0.0.1+1

但是当我试图在我的手机浏览器中打开我的 Web 应用程序时，这些都不起作用。当我按下本应启动扫描仪的 Button 时，屏幕变黑了。

我已经看到许多其他人对此有疑问。所以我希望有一个适合我的解决方案。我使用Flutter 的全部原因是它似乎是使用 Web 为 Android 和 iOS 开发应用程序的最简单方法。

在调试模式下，桌面浏览器和手机一切正常。但当我使用Firebase Hosting 部署我的应用程序并使用手机浏览器时，情况并非如此。

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),
            ),

【问题讨论】：

标签： dart flutter-web

【解决方案1】：

您可以组合两个插件 - camera 和 flutter_barcode_sdk - 来实现 Web QR 扫描仪应用程序。

flutter_barcode_sdk：提供从字节数组解码条形码和二维码的API，支持Windows、Linux、macOS、Android、iOS和Web：

  List<BarcodeResult> results =
    await _barcodeReader.decodeImageBuffer(
        byteData.buffer.asUint8List(),
        image. Width,
        image. Height,
        byteData.lengthInBytes ~/ image.height,
        ImagePixelFormat.IPF_ARGB_8888.index);

camera：官方提供的相机插件，可以实时返回相机帧：

  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) {

    });
  });

【讨论】：