在颤振腹板中扫描qr码的可能性

Question

我想建立一个基于flutter web的PWA，它依赖于扫描二维码和访问用户的当前位置。

根据我对这两个功能的了解，目前没有可用的软件包。

然而，为了获取用户的位置，有一个stackoverflow线程(为flutter Web获取用户位置(提供了一个解决方案。

所以我想知道是否有类似的解决方案来解决二维码扫描问题？

遗憾的是，我对web和javascript开发不是很熟悉。因此，如有任何帮助，我们将不胜感激。

Answer 1

在这两篇文章之后，我设法在我的flutter web应用程序中使用了jsQR库。

https://medium.com/@mk.pyts/how-to-acess-webcam-video-stream-in-flutter-for-web-1bdc74f2e9c7

https://medium.com/flutter-community/using-javascript-code-in-flutter-web-903de54a2000

https://github.com/cozmo/jsQR

通过这个，我现在可以在flutter网络中扫描二维码了。

Answer 2

我使用了库ai_barcode。

插件的文档是terible，所以我在这里发布我的小工具：

import 'package:ai_barcode/ai_barcode.dart';
import 'package:flutter/material.dart';
class _BarcodeScannerWidget extends StatefulWidget {
const _BarcodeScannerWidget(this.resultCallback);
final void Function(String result) resultCallback;
@override
State<StatefulWidget> createState() {
return _AppBarcodeScannerWidgetState();
}
}
class _AppBarcodeScannerWidgetState extends State<_BarcodeScannerWidget> {
late ScannerController _scannerController;
@override
void initState() {
super.initState();
_scannerController = ScannerController(scannerResult: (result) {
widget.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();
}
});
}
@override
void dispose() {
super.dispose();
_scannerController
..stopCameraPreview()
..stopCamera();
}
@override
Widget build(BuildContext context) {
return PlatformAiBarcodeScannerWidget(
platformScannerController: _scannerController,
);
}
}

还可以从插件存储库中添加jsQR.js。

ai_barcode: ^3.0.1

并将此行添加到index.html:

<script src="jsQR.js" type="application/javascript"></script> <!-- Add this line -->
<script src="main.dart.js" type="application/javascript"></script>