Flutter窗口
- 颤振：3.0.5
- webview_windows:^0.2.1
我想在webview_windows中显示网络摄像头
有效显示
webview显示
使用webview的目的是在flutter windows应用程序中流式传输相机并扫描Qr代码。相机包无法流式传输图像。(https://pub.dev/packages/camera_windows#streaming-帧(
simple_barcode_scanner可以在webview中显示网络摄像头，但我不知道如何实现
这些是我的工具。
// html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>start video</title>
</head>
<body>
<div>
<h1>start video</h1>
<div>
<video id="video"></video>
</div>
</div>
<script>
const video = document.getElementById("video")
navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
}).then(stream => {
video.srcObject = stream;
video.play()
}).catch(e => {
console.log(e)
})
</script>
</body>
</html>
// how display webview widget
class _WindowsQrScannerWebviewState
extends ConsumerState<WindowsQrScannerWebview> {
final _controller = WebviewController();
@override
void initState() {
super.initState();
initWebViewController();
}
Future<void> initWebViewController() async {
try {
await _controller.initialize();
final fileText = await rootBundle.loadString('assets/html/qr_scanner/index.html');
final url = Uri.dataFromString(fileText, mimeType: 'text/html').toString();
await _controller.setPopupWindowPolicy(WebviewPopupWindowPolicy.allow);
await _controller.loadUrl(widget.url);
if (!mounted) return;
setState(() {});
} on PlatformException catch (e) {
print(e);
}
}
@override
Widget build(BuildContext context) {
return Webview(_controller, permissionRequested: (url, permissionKind, isUserInitiated) => WebviewPermissionDecision.allow,);
}
}
如果您需要在网络视图中使用网络摄像头，请确保您的html文件正常工作和运行。
我已经尝试过使用rootBundle调用html的方法，但它根本不起作用。因此，我决定阅读simple_barcode_scanner的实现，并找到了解决方案。
如果您在该包中看到/lib/screens/window.dart，他们会使用Platform.resolvedExcetutable查找您构建的应用程序的根目录，然后使用/data/flutter_assets/进行附加，这样您就可以使用html文件的最后一个路径进行附加(例如：assets/your_file.html(。最后，您只需要使用Uri.file(path_to_html)解析该路径，并从webview控制器调用它。