Expo集成react-native-webrtc调用enumerateDevices返回null报错问题

报错信息：[Unhandled promise rejection: TypeError: null is not an object (evaluating 'WebRTCModule.enumerateDevices')]

该报错根因为react-native-webrtc的原生模块未正确加载/初始化，按以下顺序逐一排查即可解决：

1. 校验依赖安装与原生链接状态 #

• 执行npm ls react-native-webrtc或yarn list react-native-webrtc确认依赖包已正确安装
• Expo eject后需要手动完成原生链接：iOS端进入ios目录执行pod install，Android端重新同步Gradle配置

2. 校验原生端权限配置 #

权限缺失会导致模块初始化失败，需补充对应权限声明：

• iOS端：在ios/项目名/Info.plist中添加

<key>NSCameraUsageDescription</key>
<string>需要调用摄像头完成音视频采集</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要调用麦克风完成音频采集</string>

• Android端：在android/app/src/main/AndroidManifest.xml中添加

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

3. 校验导入语句正确性 #

必须从react-native-webrtc包中导入mediaDevices，不能使用浏览器全局对象，正确写法：

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

4. 校验原生工程配置 #

• iOS端：确认Podfile未屏蔽react-native-webrtc的自动链接，执行pod install后检查Pods目录下存在react-native-webrtc相关依赖
• Android端：确认android/settings.gradle中存在react-native-webrtc的引入配置，RN 0.60以下版本需要手动在MainApplication.java的getPackages方法中注册WebRTC模块

5. 清理缓存重试 #

完成以上配置后清理缓存重新运行项目：

# 清理JS打包缓存
npx react-native start --reset-cache
# 清理iOS构建缓存
rm -rf ~/Library/Developer/Xcode/DerivedData/*
# 清理Android构建缓存
cd android && ./gradlew clean

补充代码优化 #

你当前使用的constraints的mandatory/optional字段是旧规范，react-native-webrtc新版已不支持，建议调整为标准写法避免后续运行错误：

const constraints = {
  audio: true,
  video: {
    width: { min: 500 },
    height: { min: 300 },
    frameRate: { min: 30 },
    facingMode: isFrontCamera ? "user" : "environment",
    deviceId: videoSourceId ? videoSourceId.deviceId : undefined
  }
};

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