activate camera in flutter windows webview

Question

Flutter windows

flutter: 3.0.5
webview_windows: ^0.2.1

I want to display web camera in webview_windows.
valid display
webview display

The purpose of using webview is to stream the camera in flutter windows app and scan the Qr code. camera package cannot stream image.( https://pub.dev/packages/camera_windows#streaming-of-frames )

simple_barcode_scanner is able to display a webcam in webview, but I don't know how to implement it.

These are my implements.

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

Answer 1

If you need to use webcam in a webview, ensure that your html file is working and running properly.

I've been tried that method to call html using rootBundle but it doesn't work at all. So I decide to read the implementation of simple_barcode_scanner and I found the solution.

If you see /lib/screens/window.dart in that package, they use Platform.resolvedExcetutable to find root directory of your built app then append with /data/flutter_assets/ so you can append with the last path to your html file (for example: assets/your_file.html ). Finally you just need to parse that path with Uri.file(path_to_html) and call it from webview controller.

activate camera in flutter windows webview

Question

1 answers

solution1
0 2022-12-15 02:25:00

activate camera in flutter windows webview

Question

1 answers

solution1 0 2022-12-15 02:25:00

solution1
0 2022-12-15 02:25:00