在 flutter windows webview 中激活相机答案

【问题标题】：activate camera in flutter windows webview在 flutter windows webview 中激活相机
【发布时间】：2022-12-15 10:29:02
【问题描述】：

飘窗

扑动：3.0.5
webview_windows：^0.2.1

我想在 webview_windows 中显示网络摄像头。
valid display
webview display

使用webview的目的是在flutter windows app中串流摄像头，扫描二维码。相机包无法传输图像。(https://pub.dev/packages/camera_windows#streaming-of-frames)

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

【问题讨论】：

标签： flutter webview flutter-windows

【解决方案1】：

如果您需要在网络视图中使用网络摄像头，请确保您的 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 控制器调用它。

【讨论】：