Flutter二维码扫描与生成插件camcode的使用

camcode 是一个用于 Flutter Web 的相机条形码扫描库。它允许你在 Flutter 应用中轻松集成二维码扫描功能。

Getting Started

Add a JavaScript file for barcode scan

首先，你需要创建一个 JavaScript 文件来处理条形码扫描。这个文件应该包含一个 detectBarcode 函数，该函数接受一个图像的 Data URL 并返回扫描到的条形码字符串。

function detectBarcode(dataUrl, callback) {
    // 调用你最喜欢的 JavaScript 条形码扫描库
    // 输入必须是一个图像 Data URL
    // 输出必须是一个字符串

    // 不要忘记触发回调以获取结果
    callback(barcode);
}

Import JavaScript files into your index.html

将上述 JavaScript 文件和其他必要的条形码扫描库引入到你的 index.html 文件中。

<script src="LINK_TO_MY_AWESOME_JAVASCRIPT_BARCODE_SCAN_LIB"></script>
<script src="js/barcode.js"></script> <!-- 包含 detectBarcode 函数的 JavaScript 文件 -->

Use it

在你的 Flutter 项目中，你可以使用 CamCodeScanner 小部件来实现二维码扫描功能。

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

void main() {
  runApp(
    MaterialApp(
      routes: {
        '/': (context) => MyApp(),
      },
      initialRoute: '/',
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String barcodeValue = 'Press button to scan a barcode';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.scanner),
          onPressed: () => openScanner(context, _onResult),
        ),
        appBar: AppBar(
          title: const Text('CamCode example app'),
        ),
        body: Center(
          child: Text(barcodeValue),
        ),
      ),
    );
  }

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

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

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

  CamCodeScannerPage(this.onResult);

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

class _CamCodeScannerPageState extends State<CamCodeScannerPage> {
  /// 创建一个控制器以发送指令给扫描器
  final CamCodeScannerController _controller = CamCodeScannerController();

  /// 可用摄像头列表
  final List<String> cameraNames = [];

  /// 当前选择的摄像头
  late String _selectedCamera;

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

  void _fetchDeviceList() async {
    /// 获取可用摄像头列表
    final cameras = await _controller.fetchDeviceList();
    setState(() {
      cameraNames.addAll(cameras);
      _selectedCamera = cameras.first;
    });
  }

  @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: Text('Release resources'),
                ),
                cameraNames.isEmpty
                    ? Container()
                    : DropdownButton(
                        items: cameraNames
                            .map(
                              (name) => DropdownMenuItem(
                                child: Text(name),
                                value: name,
                              ),
                            )
                            .toList(),
                        onChanged: (String? value) {
                          if (value != null) {
                            _controller.selectDevice(value);
                            setState(() {
                              _selectedCamera = value;
                            });
                          }
                        },
                        value: _selectedCamera,
                      ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

More Options

Manually release resources

有时，根据你的 camcode 使用情况，你可能需要手动释放资源。

1. 首先，为扫描器创建一个控制器。

// 创建一个控制器以发送指令给扫描器
final CamCodeScannerController _controller = CamCodeScannerController();

1. 然后，将其添加到 CamCodeScanner 中。

CamCodeScanner(
    width: ...,
    height: ...,
    refreshDelayMillis: ...,
    onBarcodeResult: (barcode) {
        ...
    },
    controller: _controller,
),

1. 最后，在需要时调用 releaseResources() 方法。

ElevatedButton(
    onPressed: () {
        _controller.releaseResources();
    },
    child: Text('Release resources'),
),

调用此方法将关闭摄像头并停止扫描器进程。

以上就是 camcode 插件的基本使用方法。希望对你有所帮助！