React-Native WebView内嵌React页面的媒体权限检查问题

基于React-Native开发的移动端应用，使用react-native-webview的<WebView>组件内嵌了一个React页面，尝试请求音频权限时出现错误。

React页面权限请求代码 #

const checkPermissions = () => {
  try {
    const permissions = navigator.mediaDevices.getUserMedia({ audio: true });
    permissions
      .then((stream) => {
        console.log('permission granted');
      })
      .catch((e) => {
        console.log('permission denied');
      });
  } catch (e) {
    console.log(e);
    alert(e);
  }
};

WebView配置代码 #

<WebView
 source={{ uri:'Http://192.168.1.138:3000/#/permissionTestPage' }}
 onNavigationStateChange={onNavigationStateChange}
 originWhitelist={['*']}  
 allowsInlineMediaPlayback={true} 
 mediaPlaybackRequiresUserAction={false} 
 javaScriptEnabled={true} 
 domStorageEnabled={true}
 mediaCapturePermissionGrantType='grantIfSameHostElsePrompt'
/>

错误情况 #

移动端打开WebView时出现错误，错误截图如下：

1. 配置原生平台权限 #

• Android：在AndroidManifest.xml中添加音频权限声明

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

Android 6.0+需要动态申请权限，可借助react-native-permissions库处理：

import { check, request, PERMISSIONS } from 'react-native-permissions';

const requestAudioPermission = async () => {
  const status = await check(PERMISSIONS.ANDROID.RECORD_AUDIO);
  if (status !== 'granted') {
    const result = await request(PERMISSIONS.ANDROID.RECORD_AUDIO);
    return result === 'granted';
  }
  return true;
};

加载WebView前先调用该函数，确保原生权限已授权。

• iOS：在Info.plist中添加麦克风权限说明

<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风进行音频录制</string>

2. 修正WebView配置 #

• mediaCapturePermissionGrantType仅在Android生效，iOS需依赖原生权限配置。
• 若使用HTTP协议，在Android的AndroidManifest.xml中添加允许明文流量的配置：

<application
  ...
  android:usesCleartextTraffic="true">

条件允许的话优先改用HTTPS协议，避免部分设备限制HTTP的媒体权限请求。

3. 优化Web端权限请求代码 #

增加环境兼容性检查，改用async/await简化逻辑：

const checkPermissions = async () => {
  try {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      throw new Error('当前环境不支持媒体设备访问');
    }
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    console.log('permission granted');
    // 无需持续使用时及时释放资源
    stream.getTracks().forEach(track => track.stop());
  } catch (e) {
    console.log('permission denied', e);
    alert(e.message);
  }
};

4. 调试技巧 #

• 开启WebView调试模式：iOS添加useWebKit={true}后用Safari调试，Android开启Chrome远程调试，查看控制台详细错误信息。
• 确认设备麦克风未被其他应用占用。

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