React Native WebView 中 Android 设备麦克风访问失败问题解析

问题现象

在 React Native WebView 组件中，部分 Android 设备访问麦克风时会出现 NotReadableError 错误，提示"Could not start audio source"。这个问题在不同 Android 版本和设备上表现不一致：

• 在 Pixel 2 (API 27) 模拟器上工作正常
• 在 Pixel 3a (API 34) 模拟器和 OnePlus Nord 2 等设备上失败

技术背景分析

WebView 中的媒体设备访问依赖于 Android 系统的 WebView 实现和权限管理机制。当 Web 应用通过 navigator.mediaDevices.getUserMedia API 请求麦克风权限时，实际上需要满足两个层面的权限：

1. 原生应用层：Android 应用需要声明并获取 RECORD_AUDIO 权限
2. WebView 层：WebView 需要正确处理媒体权限请求

问题根源

经过深入分析，这个问题主要与以下因素有关：

1. Expo 集成问题：在纯 React Native 项目中配置正确的权限后可以正常工作，但在 Expo 项目中即使配置了所有必要权限仍然失败。这表明问题可能出在 Expo 的权限处理机制上。

2. Android WebView 版本差异：不同 Android 版本使用的 WebView 实现不同，新版本 WebView 对权限管理更加严格。

3. 权限声明不完整：虽然应用声明了 RECORD_AUDIO 权限，但可能还需要 MODIFY_AUDIO_SETTINGS 等辅助权限。

解决方案

对于纯 React Native 项目（非 Expo）：

1. 确保 AndroidManifest.xml 中包含以下权限声明：

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

2. 在运行时检查并请求权限：

import { PermissionsAndroid } from 'react-native';

const requestAudioPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
        title: "麦克风权限请求",
        message: "应用需要访问您的麦克风",
        buttonNeutral: "稍后询问",
        buttonNegative: "取消",
        buttonPositive: "确定"
      }
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  } catch (err) {
    console.error(err);
    return false;
  }
};

对于 Expo 项目：

1. 目前 Expo 存在已知问题，即使正确配置权限也无法正常工作。建议：

• 等待 Expo 官方修复
• 考虑迁移到纯 React Native 项目
• 使用原生模块桥接实现录音功能

最佳实践建议

1. 全面权限检查：在 WebView 加载前确保所有必要权限都已获取。

2. 错误处理：完善 getUserMedia 的错误处理逻辑，提供友好的用户提示。

3. 设备兼容性测试：针对不同 Android 版本和设备进行充分测试。

4. 降级方案：当 WebView 录音不可用时，提供原生录音的替代方案。

技术深度解析

这个问题的本质在于 Android 权限系统的复杂性。WebView 作为一个沙箱环境，其权限管理需要同时考虑：

• 宿主应用的权限状态
• WebView 自身的权限处理机制
• Android 系统版本差异
• 设备制造商的定制修改

特别是在 Android 10 及以上版本，Google 引入了更严格的隐私保护机制，这可能导致某些设备上 WebView 的媒体访问行为发生变化。开发者需要充分理解这些底层机制，才能有效解决此类兼容性问题。