flutter web 中扫描二维码的可能性

Question

我想构建一个基于 flutter web 的 PWA，它依赖于扫描二维码并访问用户的当前位置。

根据我对这两种功能的了解，目前没有可用的软件包。

然而，为了获取用户的位置，Whosebug 线程 () 提供了解决方案。

所以我想知道是否有类似的 QR 扫描问题解决方案？

遗憾的是，我对网络和 javascript 开发不是很熟悉。因此，我们将不胜感激任何帮助。

Answer 1

通过这两篇文章，我成功地在我的 flutter web 应用程序中使用了 jsQR 库。

https://medium.com/@mk.pyts/how-to-access-webcam-video-stream-in-flutter-for-web-1bdc74f2e9c7

https://medium.com/flutter-community/using-javascript-code-in-flutter-web-903de54a2000

https://github.com/cozmo/jsQR

这样，我现在可以在 flutter web 中扫描 QR-code。

Answer 2

我使用了库 ai_barcode。

插件的文档很糟糕，所以我 post 这里是我的小部件：

import 'package:ai_barcode/ai_barcode.dart';
import 'package:flutter/material.dart';

class _BarcodeScannerWidget extends StatefulWidget {
  const _BarcodeScannerWidget(this.resultCallback);

  final void Function(String result) resultCallback;

  @override
  State<StatefulWidget> createState() {
    return _AppBarcodeScannerWidgetState();
  }
}

class _AppBarcodeScannerWidgetState extends State<_BarcodeScannerWidget> {
  late ScannerController _scannerController;

  @override
  void initState() {
    super.initState();

    _scannerController = ScannerController(scannerResult: (result) {
      widget.resultCallback(result);
    }, scannerViewCreated: () {
      final TargetPlatform platform = Theme.of(context).platform;
      if (TargetPlatform.iOS == platform) {
        Future.delayed(const Duration(seconds: 2), () {
          _scannerController
            ..startCamera()
            ..startCameraPreview();
        });
      } else {
        _scannerController
          ..startCamera()
          ..startCameraPreview();
      }
    });
  }

  @override
  void dispose() {
    super.dispose();

    _scannerController
      ..stopCameraPreview()
      ..stopCamera();
  }

  @override
  Widget build(BuildContext context) {
    return PlatformAiBarcodeScannerWidget(
      platformScannerController: _scannerController,
    );
  }
}

同时从插件存储库中添加 jsQR.js。

ai_barcode: ^3.0.1

并将此行添加到 index.html:

<script src="jsQR.js" type="application/javascript"></script> <!-- Add this line -->
<script src="main.dart.js" type="application/javascript"></script>

flutter web 中扫描二维码的可能性

Possibilities to scan qr-code in flutter web

javascript

qr-code

dart

progressive-web-apps

flutter-web