'Flutter barcode scanner on mobile web app

I have a barcode scanner working fine on Android, but I am struggling to find plugins that support a web app.

This is the closest one I've found that seems to be getting somewhere:

https://pub.dev/packages/ai_barcode

But I can't really get anything to happen.

Here is the code I'm using currently:

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

}

The camera preview shows up in a window, but I can't scan any barcodes or QR codes. The debug text never changes.

Again, my goal is to be able to read barcodes into a string on a mobile web app.

flutterbarcodeflutter-webbarcode-scanner


Solution 1:[1]

You can use our product Cognex Mobile Barcode SDK

  1. Download page for all supported platforms - https://cmbdn.cognex.com/download#Platforms

  2. Knowledge Base for more information about the integration - https://cmbdn.cognex.com/v2.6.x/knowledge/flutter/license-keys

https://pub.dev/packages/cmbsdk_flutter

Regards,

Solution 2:[2]

You should add jsQR.js to web folder. You can find that HERE

Solution 3:[3]

you can use the source example from ai_barcode.

QRCodeDartScanView(
  typeCamera: TypeCamer.front,
  scanInvertedQRCode: true,
  resolutionPreset: QRCodeDartScanResolutionPreset.ultraHigh,
  formats: const [
    BarcodeFormat.QR_CODE,
  ],
  onCapture: (Result result) {
    printInfo(info: result.text);
  },
);

Just put this piece of code inside a build method. The camera opens and read qr codes.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 M Karimi
Solution 3 linhadiretalipe

Related Questions