如何在Flutter InAppWebView库中调用getUserMedia()？

1. 添加Android权限声明 #

在android/app/src/main/AndroidManifest.xml中添加相机、麦克风权限及硬件特性声明：

<!-- 基础权限（适用于Android 12及以下） -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

<!-- 硬件特性声明，可选但建议添加 -->
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />

<!-- Android 13+ 细分权限 -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

2. 动态请求运行时权限 #

Android 6.0及以上版本需要在运行时主动请求权限，推荐使用permission_handler库简化操作：
首先在pubspec.yaml添加依赖：

dependencies:
  permission_handler: ^10.2.0 # 可使用最新稳定版

然后在页面中请求权限：

import 'package:permission_handler/permission_handler.dart';

@override
void initState() {
  super.initState();
  _requestMediaPermissions();
}

Future<void> _requestMediaPermissions() async {
  final cameraPermission = await Permission.camera.request();
  final micPermission = await Permission.microphone.request();

  if (cameraPermission.isPermanentlyDenied || micPermission.isPermanentlyDenied) {
    // 权限被永久拒绝时，引导用户跳转到应用设置页开启权限
    await openAppSettings();
  }
}

3. 配置InAppWebView的权限回调 #

通过onPermissionRequest处理网页发起的权限请求，允许相机和麦克风访问：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://webrtc.github.io/samples/src/content/getusermedia/gum/")),
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      mediaPlaybackRequiresUserGesture: false,
      javaScriptEnabled: true, // 显式启用JS，确保WebRTC脚本正常运行
    ),
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true,
    ),
    ios: IOSInAppWebViewOptions(
      allowsInlineMediaPlayback: true,
    )
  ),
  onPermissionRequest: (controller, request) async {
    // 授予网页请求的相机/麦克风权限
    return PermissionResponse(
      resources: request.resources,
      action: PermissionResponseAction.GRANT,
    );
  },
)

关键注意点 #

• 你遇到的SecurityException核心原因是应用未获取相机权限，必须先完成权限声明和动态请求。
• mediaPlaybackRequiresUserGesture: false是必要配置，否则WebView会阻止相机预览等媒体自动加载。
• 若不想使用第三方权限库，也可通过Flutter原生MethodChannel实现Android权限请求逻辑。

内容的提问来源于stack exchange，提问作者Huu Bao Nguyen