移动web应用程序上的Flutter条形码扫描仪

Question

我有一个在Android上工作良好的条形码扫描仪，但我正在努力寻找支持web应用程序的插件。

这是我发现的最接近的一个，似乎正在取得进展：

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(),
    );
  }

}

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

同样，我的目标是能够在移动web应用程序上将条形码读取到字符串中。

Answer 1

您可以使用我们的产品康耐视移动条形码SDK

适用于所有受支持平台的

1. 下载页面- https://cmbdn.cognex.com/download#Platforms

有关集成的详细信息，请参阅

1. 知识库- https://cmbdn.cognex.com/v2.6.x/knowledge/flutter/license-keys

https://pub.dev/packages/cmbsdk_flutter

致以敬意，

Answer 2

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