如何在React Native中实现屏幕录制功能？

常见根因排查 #

• 权限配置缺失：iOS端需在Info.plist中补充NSLocalNetworkUsageDescription、NSScreenCaptureUsageDescription权限描述，同时配置App Group用于录屏文件缓存；安卓10及以上需额外申请FOREGROUND_SERVICE_MEDIA_PROJECTION、RECORD_AUDIO、WRITE_MEDIA_VIDEO三类权限，缺一都会导致授权后录屏初始化静默失败。
• 库版本不兼容：多数停止维护的第三方录屏库不支持RN 0.60+的自动链接逻辑，也未适配最新的iOS 16+、安卓13+系统录屏API，是授权后无响应的高发原因。
• 线程调用错误：iOS ReplayKit、安卓MediaProjection的录屏启动接口都要求在主线程调用，若在JS异步线程或原生子线程触发初始化，会导致系统授权回调丢失，看起来就像授权后无响应。

可行实现方案 #

方案1：使用适配性更好的第三方组合 #

优先选择react-native-webrtc的屏幕捕获能力实现，该库长期维护，对最新RN版本和系统版本适配完善，核心代码参考：

import { mediaDevices } from 'react-native-webrtc';

const startScreenRecording = async () => {
  // 触发系统录屏授权
  const captureStream = await mediaDevices.getDisplayMedia({
    video: {
      width: 1920,
      height: 1080,
      frameRate: 30
    },
    audio: true
  });
  // 将捕获的音视频流写入本地文件即可完成录屏
};

方案2：自行封装原生模块 #

如果需要更高的定制化能力，直接基于系统原生API封装，踩坑更少：

• iOS端直接封装RPScreenRecorder系统接口，在授权回调中只做状态返回，文件存储逻辑放到异步队列执行，避免阻塞回调。
• 安卓端封装MediaProjectionManager，拿到授权结果后必须先启动前台服务再初始化录屏实例，安卓12及以上如果不启动前台服务，系统会直接杀掉录屏进程，没有任何错误提示。

调试技巧 #

• 优先在原生IDE中查看系统日志：iOS用Xcode查看ReplayKit的回调错误码，安卓用Android Studio查看MediaProjection的状态日志，能快速定位是权限问题、API调用错误还是RN桥接问题。
• 自行封装原生模块时，确认授权状态、录屏进度等事件都通过RCTEventEmitter(iOS)或ReactContext(安卓)正确发送到JS层，避免桥接层丢事件导致无响应。

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