React Native WebView切后台iOS麦克风失效原因及解决方法

• iOS系统后台权限机制限制：iOS对第三方应用的后台资源管控非常严格，未声明对应后台能力的应用切到后台后，系统会主动挂起所有音视频硬件调用，运行在react-native-webview内的网页JS上下文没有独立申请系统权限的能力，麦克风采集链路会被直接切断；安卓端对后台音视频采集的默认管控阈值更宽松，WebView内核不会主动终止采集进程，因此表现正常。
• 依赖版本适配缺失：你当前使用的react-native 0.63.2默认创建的iOS工程模板未开启音频后台运行权限，配套的react-native-webview@10.8.3属于较早版本，初始化iOS端WKWebView内核时未做音视频后台驻留适配，没有将Web内的媒体采集会话和应用全局音频会话绑定，切后台时Web端调用getUserMedia拉起的麦克风采集会被系统直接终止。

按以下步骤依次配置即可解决问题：

• 开启iOS端音频后台能力
  打开项目iOS目录下的Info.plist文件，添加后台模式配置：

  <key>UIBackgroundModes</key>
  <array>
    <string>audio</string>
  </array>
  

  也可以直接在Xcode中打开原生工程，进入Signing & Capabilities页签，新增Background Modes能力，勾选Audio, AirPlay, and Picture in Picture选项。
• 配置全局音频会话支持后台采集
  打开iOS目录下的AppDelegate.m文件，引入AVFoundation头文件，在didFinishLaunchingWithOptions生命周期方法中添加音频会话初始化代码，保证应用切后台时音频链路不被系统中断：

  #import <AVFoundation/AVFoundation.h>
  
  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
    // 原有初始化代码保留
    AVAudioSession *audioSession = [AVAudioSession sharedInstance];
    [audioSession setCategory:AVAudioSessionCategoryPlayAndRecord
                  withOptions:AVAudioSessionCategoryOptionMixWithOthers | AVAudioSessionCategoryOptionAllowBluetooth
                        error:nil];
    [audioSession setActive:YES error:nil];
    // 原有其他代码
  }
  

• 修复WebView的媒体采集配置
  方案一：直接将react-native-webview升级到11.18.0及以上的稳定版本，高版本已经默认修复了WKWebView端音视频后台采集的适配问题。
  方案二：如果暂时不想升级依赖，可以手动修改node_modules下react-native-webview的iOS原生代码，在WKWebView初始化逻辑中添加如下配置：

  WKWebViewConfiguration *webConfig = [[WKWebViewConfiguration alloc] init];
  // 允许内联媒体播放，避免自动全屏中断采集
  webConfig.allowsInlineMediaPlayback = YES;
  // 取消媒体播放必须用户触发的限制，保证通话链路自动运行
  if (@available(iOS 10.0, *)) {
    webConfig.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;
  }
  

• 校验麦克风权限配置
  确认Info.plist中已经添加麦克风使用说明，否则应用无法正常申请麦克风权限：

  <key>NSMicrophoneUsageDescription</key>
  <string>需要访问麦克风以支持通话功能</string>
  

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