Flutter WebRTC本地渲染正常但远端渲染失效问题排查

1. 未正确监听远端轨道事件 #

移植JS代码时容易忽略Flutter中PeerConnection的事件绑定逻辑，必须通过onTrack监听远端流并绑定到remoteRenderer：

peerConnection!.onTrack = (event) {
  if (event.streams.isNotEmpty) {
    remoteRenderer.srcObject = event.streams[0];
  }
};

如果跳过这一步，远端媒体流无法关联到渲染组件，自然无法显示画面。

2. Web端媒体权限与跨域限制 #

Chrome对WebRTC的安全校验比原生JS场景更严格：

• 信令服务器与Web页面不同源时，必须开启CORS配置，否则SDP和ICE候选的交换会被浏览器拦截，连接无法建立。
• 本地测试必须使用localhost或HTTPS协议，Chrome禁止非安全上下文（如HTTP/IP地址）获取和传输媒体流，会导致远端流传输失败。

3. ICE候选处理不完整 #

Flutter WebRTC不会自动处理ICE候选的收发，需要手动监听并通过信令传递：

peerConnection!.onIceCandidate = (event) {
  if (event.candidate != null) {
    // 通过信令通道将候选发送给远端
    sendIceCandidate(event.candidate!);
  }
};

若未完成ICE候选的交换，双方无法建立P2P连接路径，远端流无法到达本地。

4. RemoteRenderer初始化不完整 #

必须确保remoteRenderer完成初始化后再绑定流，通常在组件初始化阶段完成：

late final RTCVideoRenderer remoteRenderer;

@override
void initState() {
  super.initState();
  remoteRenderer = RTCVideoRenderer();
  _initRenderers();
}

Future<void> _initRenderers() async {
  await remoteRenderer.initialize();
}

如果未初始化就赋值srcObject，会导致渲染组件无法处理媒体流。另外，绑定流后需要通过setState触发组件更新，确保画面渲染。

5. PeerConnection配置错误 #

Flutter WebRTC的PeerConnection配置需严格匹配Web端要求，比如ICE服务器配置：

final configuration = <String, dynamic>{
  'iceServers': [
    {'urls': 'stun:stun.l.google.com:19302'},
  ]
};
peerConnection = await createPeerConnection(configuration);

若ICE服务器配置无效，双方无法完成网络穿透，无法建立媒体连接。

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