Getting TypeError when opening the scan page

[jaca420]

Using this in a web app and when tapping on a button

 onTap: () {
            openScanner(context, _onResult);},

I'm getting the below error over and over

TypeError: dart.global.detectBarcode is not a function
packages/camcode/camcode_web.dart 280:5                                  _takePicture
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54       runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5       _async
packages/camcode/camcode_web.dart 240:28                                 [_takePicture]
packages/camcode/camcode_web.dart 233:9                                  <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 80:17  <fn>
Webcam taille : 1080 & 1920
Webcam video taille : 0 & 0

[✓] Flutter (Channel stable, 3.3.7, on macOS 12.6 21G115 darwin-x64, locale en-RO)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.73.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

[jaca420]

OK ... so it seems that the above error was because the app was running in the Chrome debugger on my computer. And that's an issue if someone opens the app in a browser. See screenshot.

Other than that, it doesn't do anything when opening the app in a mobile phone with camera access. This is what I did. I took out some code since I don't need multiple cameras. Just the main on the back of the phone.

import 'package:camcode/cam_code_scanner.dart';
import 'package:flutter/material.dart';

class CamCodeScannerPage extends StatefulWidget {
  final Function(String) onResult;

  const CamCodeScannerPage(this.onResult, {super.key});

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

class CamCodeScannerPageState extends State<CamCodeScannerPage> {
  final CamCodeScannerController _controller = CamCodeScannerController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          CamCodeScanner(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            refreshDelayMillis: 16,
            onBarcodeResult: (barcode) {
              widget.onResult(barcode);
            },
            controller: _controller,
            showDebugFrames: false,
            minimalResultCount: 1,
          ),
          Positioned(
            bottom: 48.0,
            left: 48.0,
            child: Row(
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.releaseResources();
                  },
                  child: const Text('Release resources'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Ignore the SizedBox please ... I moved the context.pop to the onResult method ... but it never reaches it. Maybe I'm doing something wrong?

  void _onResult(String result) {
    setState(() {
      barcodeValue = result;
    });
    Navigator.of(context).pop();
  }

  void openScanner(BuildContext context, Function(String) onResult) {
    showDialog(
      context: context,
      builder: (context) => SizedBox(
        width: 300.0,
        height: 300.0,
        child: Center(child: CamCodeScannerPage(_onResult)),
      ),
    );
  }

[PiotrFLEURY]

Hi @jaca420. Thanks for your feedback.

As far as I can see, the function detectBarcode may not have been implemented.

In order to make it work you need:

• Implement camcode in your Flutter app in Dart code
• provide any javascript barcode detection library that takes a picture in input and gives a string as output
• create a javascript file to implement the detectBarcode function in order to call your javascript library.
• import in the /web/index.html file your javascript library and your javascript file with detectBarcode function

See the README section here https://github.com/PiotrFLEURY/camcode#add-a-javascript-file-for-barcode-scan

You can also see a working example here https://github.com/PiotrFLEURY/camcode/blob/main/example/

With the javascript function:
https://github.com/PiotrFLEURY/camcode/blob/a48c33389a090cdd43d4c8b9fc55f2c9370544fc/example/web/js/barcode.js

function detectBarcode(dataUrl, callback) {
    Quagga.decodeSingle({
        decoder: {
            readers: [
                "code_128_reader",
                "ean_reader",
                "ean_8_reader",
                "code_39_reader",
                "code_39_vin_reader",
                "code_93_reader"
            ] // List of active readers
        },
        locate: true, // try to locate the barcode in the image
        src: dataUrl // or 'data:image/jpg;base64,' + data
    }, function (result) {
        if (result && result.codeResult) {
            console.log("result", result.codeResult.code);
            callback(result.codeResult.code);
        } else {
            console.log("not detected");
        }
    });
}

The javascript lib import (In this example I choosed QuaggaJs)

camcode/example/web/index.html

Line 44 in a48c333

<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.min.js"></script>

And the imported javascript file

camcode/example/web/index.html

Line 45 in a48c333

<script src="js/barcode.js"></script>

The documentation should be improved I guess. Thanks again for this feedback

[PiotrFLEURY]

I've just tested it on my side and all works well. I cannot figure out what's going on on your version. Can you please provide me the full code via a Github link maybe ?

[jaca420]

How can I do that? Github link? I made the changes. I didn't understand 100% before and got it to work a bit. I got it to scan a barcode by moving the phone close and away from the barcode. It read it once ... and that's it. I wasn't able to read it again. I tried a barcode from a can of RedBull and nothing ... Code is just as above. Just added the javascript scripts.

While testing, it activated the selfie camera which worked better then the main camera.

Camera doesn't seem to focus too well when scanning.

[jaca420]

This is so weird ... I'll share my code again here. Edited it to be like in your example.

web/index.html

  <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.min.js"></script>
  <script src="js/barcode.js"></script>

web/js/barcode.js

function detectBarcode(dataUrl, callback) {
    Quagga.decodeSingle({
        decoder: {
            readers: [
                "code_128_reader",
                "ean_reader",
                "ean_8_reader",
                "code_39_reader",
                "code_39_vin_reader",
                "code_93_reader"
            ] // List of active readers
        },
        locate: true, // try to locate the barcode in the image
        src: dataUrl // or 'data:image/jpg;base64,' + data
    }, function (result) {
        if (result && result.codeResult) {
            console.log("result", result.codeResult.code);
            callback(result.codeResult.code);
        } else {
            console.log("not detected");
        }
    });
}

home_screen.dart

 String barcodeValue = 'barcode';

  void _onResult(String result) {
    setState(() {
      barcodeValue = result;
    });
  }

  void openScanner(BuildContext context, Function(String) onResult) {
    showDialog(
      context: context,
      builder: (context) => CamCodeScannerPage(_onResult),
    );
  }

cam_code_scanner_page.dart

import 'package:camcode/cam_code_scanner.dart';
import 'package:flutter/material.dart';

class CamCodeScannerPage extends StatefulWidget {
  final Function(String) onResult;

  const CamCodeScannerPage(this.onResult, {super.key});

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

class CamCodeScannerPageState extends State<CamCodeScannerPage> {
  final CamCodeScannerController _controller = CamCodeScannerController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          CamCodeScanner(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            refreshDelayMillis: 16,
            onBarcodeResult: (barcode) {
              Navigator.of(context).pop();
              widget.onResult(barcode);
            },
            controller: _controller,
            showDebugFrames: false,
            minimalResultCount: 1,
          ),
          Positioned(
            bottom: 48.0,
            left: 48.0,
            child: Row(
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.releaseResources();
                  },
                  child: const Text('Release resources'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

[PiotrFLEURY]

Does your phone have multiple camera lens ?

I know that the autofocus can be improved on some camera like wide angle camera

[jaca420]

Yeah ... it does. How would I improve the autofocus?

[PiotrFLEURY]

I think the problem is directly inside the camcode plugin itself.

If you look at this code

camcode/lib/camcode_web.dart

Line 181 in a48c333

dynamic _configureOptions(double width, double height) {

We are searching cameras regarding some options in order to filter them. In my opinion, we should find the correct option to find only "standard" camera lens and exclude wide angle ones on order to get better scan performance.

[jaca420]

You might be right ... When I was testing the app using flutter run -d web-server --web-port 5011 with my phone connected to the computer, it opened the selfie camera that worked much better than the main. Can you filter cameras based on their characteristics? Should only be two cameras ... main and selfie and an optional switch button. Not even two cameras ... just main regular camera would be perfect.

[PiotrFLEURY]

We can filter medias using some characteristics according to the documentation here :
https://developer.mozilla.org/fr/docs/Web/API/MediaDevices/getUserMedia

But the fact is that for multi lens camera on phones, each brand uses its own way to classify the camera lens list.

I don't want to implement one code for each brand. It will be to fastidious to maintain.

If anyone have an idea how to do that I would be pleased to put this improvement in the camcode plugin.

[jaca420]

Hmm ... what about switching between cameras while scanning the barcode?

[PiotrFLEURY]

In fact this feature is already implemented but seems to not working 100% well. I looked at the device selection code but for the moment I can't figure out why it is not working on every devices.

This is a hard part because this is working on every device I have and it is not working so well on some user devices.

As this project is open source, I can only hope that some ones make some enhancement proposition for they own device in a pull request.

If you can make it work on your device I'll be pleased to review your pull request and publish it on pub.dev