无法在 webview_flutter 中加载相机

Posted 2023-02-23

【中文标题】无法在 webview_flutter 中加载相机

【英文标题】：unable to load camera in webview_flutter

【发布时间】：2021-06-11 19:36:23

【问题描述】：

我正在使用 webview_flutter: ^0.3.15+1 for in-app browser in flutter(here) 并想打开这个 URL check 有一个摄像头，但它没有按预期打开，也没有加载摄像头那个网页

webView 页面代码

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';

class ExamWebView extends StatefulWidget 
  final PageController controller;
  final int destination;

  const ExamWebView(Key key, this.controller, Key index, this.destination)
      : super(key: key);
  @override
  _ExamWebViewState createState() => _ExamWebViewState();


class _ExamWebViewState extends State<ExamWebView> 
  Completer<WebViewController> _controller = Completer<WebViewController>();
  javascriptChannel _toasterJavascriptChannel(BuildContext context) 
    return JavascriptChannel(
        name: '_Toaster',
        onMessageReceived: (JavascriptMessage message) 
          Scaffold.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        );
  

  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text("Exam"),
          ),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: WebView(
                initialUrl:
                    "https://therealtechwiz.github.io/project/facerecognition",
                gestureRecognizers: Set()
                  ..add(
                    Factory<VerticalDragGestureRecognizer>(
                      () => VerticalDragGestureRecognizer(),
                    ),
                  ),
                // Factory<VerticalDragGestureRecognizer>(
                //  () => VerticalDragGestureRecognizer()..onUpdate = (_) ,
                // ),
                initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy
                    .require_user_action_for_all_media_types,
                javascriptMode: JavascriptMode.unrestricted,
                onWebViewCreated: (WebViewController webViewController) 
                  _controller.complete(webViewController);
                ,
                javascriptChannels: <JavascriptChannel>[
                  _toasterJavascriptChannel(context),
                ].toSet(),
              ),
            )
          ],
        ));
  

在 android/app/src/main/AndroidManifest.xml 中添加了这些权限

<uses-permission android:name="android.permission.CAMERA" />
 <uses-feature android:name="android.hardware.camera" />
 <uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.INTERNET"/>

终端响应：

D/EgretLoader(23485): EgretLoader(Context context)
D/EgretLoader(23485): The context is not activity
W/ContentCatcher(23485): Failed to notify a WebView
I/chromium(23485): [INFO:CONSOLE(79)] "[object DOMException] please use the fiddle instead", source: https://therealtechwiz.github.io/project/facerecognition/script.js (79)
I/chromium(23485): [INFO:CONSOLE(1)] "Uncaught (in promise) Error: failed to fetch: (404) , from url: https://therealtechwiz.github.io/models/face_recognition_model-weights_manifest.json", source: https://therealtechwiz.github.io/project/facerecognition/face-api.min.js (1)
W/Choreographer(23485): Frame time is 0.077364 ms in the future!  Check that graphics HAL is generating vsync timestamps using the correct timebase.

得到这个输出：

预期输出：can be seen here

任何人都可以看到并建议我解决问题的解决方案

【问题讨论】：

我也尝试过使用最新版本的 webview_flutter，也就是 webview_flutter: ^2.0.2 ..仍然遇到同样的问题

我也遇到过这样的问题，我用的现成代码是“await Permission.camera.request();”在 main.dart 中。当我添加代码时它已修复。我的猜测是向“AndroidManifest.xml”添加权限是不够的。 main.dart运行时，需要等待这个应用权限。

***.com/questions/56478375/…的可能重复

@TarunJain 你有什么解决方案或替代方案吗？

【参考方案1】：

原因是您需要在加载 webview 和 setMediaPlaybackRequiresUserGesture 到 false 到 webView's 设置之前请求 cam/mic 权限。

    webview.getSettings().setMediaPlaybackRequiresUserGesture(false);

我不相信 webview_flutter 默认情况下会这样做，因此您需要分叉插件并更改代码才能做到这一点。

我在使用 url_launcher 时遇到了类似的问题，不得不分叉它并添加一些自定义代码来处理 Whereby 集成（对于 ios WKWebView 将不起作用 - 你将需要 SFSafariViewController）。

你可以在这里找到我的版本

  url_launcher: #^5.4.2
    git: 
      url: git://github.com/yokoboko/url_launcher.git
      path: url_launcher