Flutter Windows中在webview_windows启用摄像头实现二维码扫描

• Flutter Windows
  • flutter: 3.0.5
  • webview_windows: ^0.2.1

我需要在webview_windows中调用摄像头，实现Flutter Windows应用内的摄像头流传输并扫描二维码。由于camera_windows不支持帧流传输，而simple_barcode_scanner能在WebView中显示摄像头，但我不知道具体实现方式。当前摄像头无法在WebView中正常显示（正常应为摄像头画面，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>

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

1. 修复本地HTML加载错误 #

代码中读取本地HTML生成url后，实际调用loadUrl时用了widget.url，导致加载的不是摄像头页面。修改initWebViewController方法：

await _controller.loadUrl(url); // 替换原widget.url为本地生成的url

2. 添加Windows摄像头权限声明 #

在项目windows/runner/Runner.rc文件中添加摄像头权限配置：

<!-- 在文件末尾添加以下内容 -->
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
  <capabilities>
    <Capability Name="internetClient"/>
    <DeviceCapability Name="webcam"/>
  </capabilities>
</assembly>

3. 优化HTML视频标签样式 #

默认视频标签无尺寸导致画面不可见，添加样式与适配属性：

<video id="video" width="100%" height="auto" autoplay playsinline></video>

4. 监听WebView加载状态确保渲染 #

在initWebViewController中添加加载状态监听，保证页面渲染完成后更新UI：

_controller.loadingState.listen((state) {
  if (state == LoadingState.navigationCompleted && mounted) {
    setState(() {});
  }
});

内容的提问来源于stack exchange，提问作者Zudah228