已允许相机权限的Ionic WebView调用MediaDevices.getUserMedia()报permission denied

核心问题原因 #

Android WebView层面默认拦截WebRTC的媒体权限请求，仅授予系统层面的相机权限不足以让WebView内的MediaDevices.getUserMedia()正常运行，另外还有几处配置遗漏和逻辑问题：

遗漏配置项 #

1. Cordova 环境补充配置 #

• 给config.xml添加如下配置：

<!-- 允许WebView媒体自动播放，无需用户手势 -->
<preference name="MediaPlaybackRequiresUserGesture" value="false" />
<!-- 允许本地文件模式下识别为安全上下文，适配getUserMedia的安全要求 -->
<preference name="AndroidInsecureFileModeEnabled" value="true" />
<!-- 开启WebView媒体捕获支持 -->
<preference name="WebViewEnableMediaCapture" value="true" />

• 重写Android原生层的WebView配置，在主Activity的onCreate方法中添加WebChromeClient的权限请求处理逻辑：

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onPermissionRequest(PermissionRequest request) {
        request.grant(request.getResources());
    }
});

如果不想手动修改原生代码，可以安装cordova-plugin-webview-permission插件自动处理该逻辑。

2. Capacitor 环境补充配置 #

• 在capacitor.config.ts中添加Android WebView配置：

const config: CapacitorConfig = {
  // 其他原有配置
  android: {
    allowMixedContent: true,
    webSettings: {
      allowMediaCapture: true,
      mediaPlaybackRequiresUserGesture: false
    }
  }
};

• 同样需要重写主Activity的WebChromeClient的onPermissionRequest方法，或者使用@capacitor-community/webview插件扩展权限处理能力。

3. 通用补充配置 #

在AndroidManifest.xml中添加额外权限适配WebRTC运行要求：

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

代码逻辑修正 #

当前的权限申请是异步操作，没有等待权限授予完成就调用getUserMedia会导致权限未生效时就触发API调用，修改为如下逻辑：

// 必须等待Ionic平台完全初始化后再执行权限操作
this.platform.ready().then(async () => {
  const cameraPermission = await this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA);
  if (!cameraPermission.hasPermission) {
    const requestResult = await this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA);
    if (!requestResult.hasPermission) {
      showAlert('请授予相机权限后再使用');
      return;
    }
  }
  // 确认权限已授予后再调用getUserMedia
  startVideo();
});

内容的提问来源于stack exchange，提问作者Nelah