无法从WebView访问摄像头

Question

我有一个使用相机的https网站。它在我的桌面浏览器和我的Android的Chrome浏览器上都能正常工作。

然而，在Flutter中，它不能在WebView和WebViewScaffold中工作。我的应用程序有相机权限，但当我从Flutter应用程序连接到网站时，没有得到任何使用相机的提示。

我在logcat中得到这个错误：

chromium: [ERROR:web_contents_delegate.cc(197)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.

为什么它可以在Chrom中运行，而不能在我的WebView中运行?！如何让它在WebView或WebViewScaffold中正常运行？

谢谢。

Answer 1

对于webview，您需要授予正确的权限。

在您的情况下，对于安卓系统，如果您尝试在AndroidManifest.xml中使用摄像头和麦克风(例如用于WebRTC实时聊天)，则需要添加以下权限：

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />
<uses-permission android:name="android.permission.AUDIO_CAPTURE" />

但这还不够，因为您需要向用户请求摄像头和麦克风的权限。因此，您可以使用permission_handler插件。

因此，对于webview，您可以使用提供androidOnPermissionRequest事件的我的插件flutter_inappwebview。您需要为Android实现它，这是当WebView请求访问特定资源(即Android原生WebChromeClient.onPermissionRequest event )的权限时触发的事件。此事件用于授予对WebRTC接口的权限。

一个在安卓系统上使用WebRTC的例子：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:permission_handler/permission_handler.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Permission.camera.request();
  await Permission.microphone.request();

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                      initialUrl: "https://appr.tc/r/158489234",
                      initialOptions: InAppWebViewGroupOptions(
                        crossPlatform: InAppWebViewOptions(
                          mediaPlaybackRequiresUserGesture: false,
                          debuggingEnabled: true,
                        ),
                      ),
                      onWebViewCreated: (InAppWebViewController controller) {
                        _webViewController = controller;
                      },
                      androidOnPermissionRequest: (InAppWebViewController controller, String origin, List<String> resources) async {
                        return PermissionRequestResponse(resources: resources, action: PermissionRequestResponseAction.GRANT);
                      }
                  ),
                ),
              ),
            ]))
    );
  }
}

此示例使用https://appr.tc/上的房间158489234，这是一个基于WebRTC (https://github.com/webrtc/apprtc)的视频聊天演示应用。要让它正常工作，您需要将选项mediaPlaybackRequiresUserGesture设置为false并实现(针对安卓系统) onPermissionRequest事件。

Answer 2

这在here和间接的here之前就已经被提出了。

显然，嵌入的app视图不会继承父应用程序的权限。

您将不得不获得您正在使用的webview插件，以允许您需要的权限。现在，我不认为任何flutter webview插件都会暴露这一点。

权限处理的Android端代码如this answer所示。

iOS需要类似于WKWebView、shown here或here中的webrtc示例。

现在，您必须手动执行此操作。或者为您选择的插件打开一个问题，要求提供该功能/自己编写代码，添加此插件并获得您的PR批准。

Answer 3

如果您在音频方面遇到了同样的问题，请添加

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>

permission解决了我在android 10中的问题。