移动 Web 应用上的 Flutter 条码扫描器答案

【问题标题】：Flutter barcode scanner on mobile web app移动 Web 应用上的 Flutter 条码扫描器
【发布时间】：2021-11-03 21:30:55
【问题描述】：

我的条形码扫描仪在 Android 上运行良好，但我很难找到支持网络应用的插件。

这是我发现的最接近的一个，似乎可以到达某个地方：

https://pub.dev/packages/ai_barcode

但我真的什么也做不了。

这是我目前使用的代码：

import 'package:flutter/material.dart';

import 'package:ai_barcode/ai_barcode.dart';


class WebBarcodeScannerPage extends StatefulWidget {

  // void resultCallback (String result) {
  //   debugtext
  // }

  @override
  _WebBarcodeScannerPageState createState() => _WebBarcodeScannerPageState();
}

class _WebBarcodeScannerPageState extends State<WebBarcodeScannerPage> {

  ScannerController _scannerController;
  String _debugText = 'debug';

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

    _scannerController = ScannerController(scannerResult: (r) => resultCallback(r));

    // _scannerController = ScannerController(scannerResult: (result) {
    //   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();
    //   }
    // });
  }

  resultCallback (String r) {
    print(r);
    setState(() {
      _debugText = r;
    });
  }

  _body () {
    return Column(
      children: [
        Text(_debugText),
        TextButton(
          child: Text('Start camera'),
          onPressed: () {
            _scannerController.startCamera();
          },
        ),
        TextButton(
          child: Text('Start preview'),
          onPressed: () {
            _scannerController.startCameraPreview();
          },
        ),
        TextButton(
          child: Text('Stop camera'),
          onPressed: () {
            _scannerController.stopCamera();
          },
        ),
        TextButton(
          child: Text('Stop preview'),
          onPressed: () {
            _scannerController.stopCameraPreview();
          },
        ),
        PlatformAiBarcodeScannerWidget(platformScannerController: _scannerController),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: _body(),
    );
  }

}

相机预览显示在一个窗口中，但我无法扫描任何条形码或二维码。调试文本永远不会改变。

同样，我的目标是能够在移动网络应用程序上将条形码读入字符串。

【问题讨论】：

标签： flutter barcode flutter-web barcode-scanner

【解决方案1】：

您应该将jsQR.js 添加到web folder。你可以找到HERE

【讨论】：

【解决方案2】：

您可以使用我们的产品 Cognex Mobile Barcode SDK

所有支持平台的下载页面 - https://cmbdn.cognex.com/download#Platforms
有关集成的更多信息的知识库 - https://cmbdn.cognex.com/v2.6.x/knowledge/flutter/license-keys

https://pub.dev/packages/cmbsdk_flutter

问候，

【讨论】：