Flutter WebRTC在浏览器正常运行，移动端失效问题求助

问题描述 #

flutter_webrtc 在浏览器中可正常运行，但在移动设备上无法正常工作，调试控制台输出日志：

I/org.webrtc.Logging( 5106): EglRenderer: Duration: 4001 ms. Frames received: 46. Dropped: 0. Rendered: 46. Render fps: 11.5. Average render time: 1359 us. Average swapBuffer time: 944 us.s. Average swapBuffer time: 982 us.

相关实现代码：

class _testState extends State<test> {
      final localRender=RTCVideoRenderer();
      @override
      void initState() {
        // TODO: implement initState
            getUserMedia();

        localRender.initialize();
        super.initState();
      }
      void dispose(){
        localRender.dispose();
        super.dispose();
      }
      
       getUserMedia() async {
      try {
        MediaStream stream = await navigator.mediaDevices.getUserMedia({"audio":true,"video":true});
        print(stream.toString());
        localRender.srcObject = stream;
        print("working");
      } catch (e) {
        print("Failed to get user media: $e");
      }

      }
      @override
      
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text("title"),),
          body: Container(
            height: 300,
            width: 200,
            child:RTCVideoView(localRender,mirror: true,)
          ),
        );
      }
    }

排查与修复步骤 #

1. 修正渲染器初始化顺序 #

当前代码先获取媒体流再初始化渲染器，会导致流设置时渲染器未准备就绪。调整initState执行顺序，确保渲染器初始化完成后再获取媒体流：

@override
void initState() {
  super.initState();
  // 先初始化渲染器，完成后再获取媒体流
  localRender.initialize().then((_) => getUserMedia());
}

2. 添加移动端权限配置 #

移动端必须明确申请相机、麦克风权限，否则无法获取媒体流：

• 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-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

• iOS：在ios/Runner/Info.plist中添加权限描述：

<key>NSCameraUsageDescription</key>
<string>需要访问相机进行视频采集</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风进行音频采集</string>

3. 触发UI状态更新 #

设置媒体流后需要调用setState同步UI状态，确保渲染器正确更新：

void getUserMedia() async {
  try {
    MediaStream stream = await navigator.mediaDevices.getUserMedia({"audio":true,"video":true});
    print(stream.toString());
    setState(() {
      localRender.srcObject = stream;
    });
    print("working");
  } catch (e) {
    print("Failed to get user media: $e");
  }
}

4. 优化视频约束提升兼容性 #

部分旧设备不支持默认高分辨率，可添加明确的视频约束参数降低负载：

MediaStream stream = await navigator.mediaDevices.getUserMedia({
  "audio": true,
  "video": {
    "width": 640,
    "height": 480,
    "frameRate": 30
  }
});

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