android - 无法从 WebView 访问相机

Question

我有一个使用相机的 https 网站。它在我的桌面浏览器和我的 Android 浏览器中运行良好。

然而，在 Flutter 中，它在 WebView 和 WebViewScaffold 中不起作用。我的应用程序有摄像头权限，但当我从我的 Flutter 应用程序连接到网站时，我没有收到任何使用摄像头的提示。

我在 logcat 中收到此错误:

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

为什么它在 Chrom 中工作而不在我的 WebView 中工作？!以及如何让它在 WebView 或 WebViewScaffold 中正确运行？

谢谢。

Answer 1

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

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

<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，你可以使用我的插件flutter_inappwebview提供 androidOnPermissionRequest 事件。您需要为 Android 实现它，这是当 WebView 请求访问特定资源(即 Android native WebChromeClient.onPermissionRequest event )的权限时触发的事件。在这种情况下，此事件用于授予 WebRTC API 权限。

使用适用于 Android 的 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 并实现(对于 Android)onPermissionRequest 事件。