React Native WebView调用getUserMedia报NotAllowedError权限被拒绝求助

你遇到的NotAllowedError : permission denied报错核心原因是React Native应用层的权限配置缺失，浏览器能正常运行是因为浏览器本身已经提前向系统申请了相机、麦克风权限，而你自己的混合应用没有完成权限全链路配置，具体根因分为三类：

• 原生应用未向操作系统申请相机、麦克风权限，WebView的媒体访问请求被系统直接拦截
• WebView未开启媒体权限请求转发逻辑，默认直接拒绝网页的设备访问请求
• 前端页面加载不符合安全要求，非HTTPS协议的页面会被移动端WebView默认禁止调用getUserMedia接口

第一步：给应用添加系统权限声明与动态申请 #

iOS端（Expo环境） #

在app.json中添加iOS系统权限声明，说明权限使用用途：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "需要使用相机完成音视频通话",
        "NSMicrophoneUsageDescription": "需要使用麦克风完成音视频通话"
      }
    }
  }
}

Android端（Expo环境） #

同样在app.json中添加Android系统权限声明：

{
  "expo": {
    "android": {
      "permissions": ["CAMERA", "RECORD_AUDIO", "MODIFY_AUDIO_SETTINGS"]
    }
  }
}

然后在加载WebView页面之前，主动向用户申请权限，确认授权后再加载前端页面：

import * as Permissions from 'expo-permissions';

const requestMediaPermissions = async () => {
  const { status: cameraRes } = await Permissions.askAsync(Permissions.CAMERA);
  const { status: audioRes } = await Permissions.askAsync(Permissions.AUDIO_RECORDING);
  if (cameraRes === 'granted' && audioRes === 'granted') {
    // 权限通过后再加载WebView
    setIsWebViewVisible(true);
  } else {
    alert('请授予相机和麦克风权限后使用音视频功能');
  }
}

第二步：补全WebView的媒体权限配置 #

你现有的WebView配置缺少权限请求回调处理，需要补充以下属性：

<WebView
  useWebKit={true}
  allowInlineMediaPlayback={true}
  mediaPlaybackRequiresUserAction={false}
  javaScriptEnabled={true}
  geolocationEnabled={true}
  // 新增以下媒体权限相关配置
  mediaCapturePermissionGrantType="grantIfSameHostElsePrompt"
  onPermissionRequest={(event) => {
    // 允许网页发起的权限请求
    event.grant(event.permissions);
  }}
  source={{ uri: '你的Rails前端页面HTTPS地址' }}
/>

第三步：确认前端页面加载要求 #

• 确认打包后加载的Rails页面使用HTTPS协议，HTTP协议下移动端WebView默认禁止调用getUserMedia接口（本地开发用localhost除外）
• 你已经配置的iframeallow属性无需修改，检查拼写无误即可
• 现有前端JS逻辑、video标签配置没有问题，不需要修改

可选：前端侧增加兼容逻辑 #

可以在调用getUserMedia前先做权限检测，提前给用户友好提示：

async function checkMediaPermission() {
  try {
    const res = await navigator.permissions.query({ name: 'camera' });
    if (res.state === 'denied') {
      alert('请在系统设置中开启App的相机和麦克风权限');
      return false;
    }
    return true;
  } catch (e) {
    return true;
  }
}

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