React Native中使用GetDisplayMedia录屏时如何捕获其他应用音频？

问题核心分析 #

你当前代码中使用getUserMedia({audio: true})获取的是设备麦克风输入，而非系统全局音频（即其他应用播放的声音），这是无法捕获YouTube等应用音频的根本原因。以下分平台给出具体解决方案：

iOS平台解决方案 #

iOS捕获系统音频必须依赖Broadcast Extension（你已添加，需补充音频捕获配置）：

1. 修改Broadcast Extension的SampleHandler.swift文件，开启系统音频捕获：

   override func broadcastStarted(withSetupInfo setupInfo: [String : NSObject]?) {
       let recorder = RPScreenRecorder.shared()
       recorder.isMicrophoneEnabled = false // 关闭麦克风，仅捕获系统音频
       recorder.isAudioEnabled = true // 开启系统音频捕获
       
       // 保留原有视频帧处理逻辑
   }
   

2. 主应用中不再调用getUserMedia获取音频，直接使用Broadcast Extension传递的音频轨道构建MediaStream。

Android平台解决方案 #

Android需结合MediaProjection API与系统音频源配置：

1. 申请必要权限：RECORD_AUDIO、WRITE_EXTERNAL_STORAGE（Android 13+需额外申请POST_NOTIFICATIONS）。
2. 配置MediaProjection的音频捕获源：

   MediaRecorder mediaRecorder = new MediaRecorder();
   mediaRecorder.setAudioSource(MediaRecorder.AudioSource.REMOTE_SUBMIX); // 指定系统音频源
   mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP);
   mediaRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);
   

3. 通过自定义原生模块将系统音频轨道传递到React Native JS层，替代原getUserMedia获取的音频轨道。

React Native代码调整 #

修改屏幕共享启动函数，替换音频轨道来源：

const screenShareStreamRef = useRef();
const [screenShareStream, setScreenShareStream] = useState(null);

const startScreenStream = async () => {
  try {
    const displayStream = await mediaDevices.getDisplayMedia({ video: true });
    const videoTrack = displayStream.getVideoTracks()[0];

    // 替换为平台特定方法获取的系统音频轨道
    const systemAudioTrack = await getSystemAudioTrack(); 

    const screenstream = new MediaStream([videoTrack, systemAudioTrack]);

    screenShareStreamRef.current = screenstream;
    setScreenShareStream(screenstream);
  } catch (error) {
    console.error(error);
  }
}

关键注意事项 #

• iOS：Broadcast Extension是捕获系统音频的唯一合法途径，需确保权限声明符合App Store审核要求。
• Android：REMOTE_SUBMIX音频源部分设备可能限制，需测试不同机型兼容性；Android 10+需处理后台权限与通知显示。

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