Flutter中基于WebRTC与PeerDart的视频通话应用视频切换功能异常问题

阿华AIGC实验室

2026-4-16

看起来你在Flutter里用WebRTC和PeerDart开发视频通话应用时，已经搞定了通话发起和接收，但卡在了视频切换的功能上——别担心，我帮你梳理下常见的问题点和修复思路，结合你给出的代码片段来分析。

先明确视频切换的核心逻辑

视频开关的本质是控制本地媒体流中视频轨道的启用/禁用状态，同时要把这个状态同步到对端的Peer连接里。你的代码目前只展示了通话初始化部分，大概率是缺少了对本地流的持久引用、轨道状态切换的逻辑，或者没有通知PeerDart更新连接状态。

针对你的代码的修复建议

1. 保存本地媒体流的类级引用

你现在在createCall里临时获取了mediaStream，但没有把它保存为类的成员变量，后续切换视频时找不到要操作的轨道。先添加一个类变量：

MediaStream? _localStream;
bool _isVideoEnabled = true; // 记录视频当前状态，用于UI更新

2. 完善createCall中的媒体流初始化逻辑

把获取到的媒体流赋值给_localStream，并绑定到本地渲染器：

Future<void> createCall({required ProfileModel userData}) async {
  try {
    // 补充完整的getUserMedia调用，获取音视频流
    final mediaStream = await navigator.mediaDevices.getUserMedia({
      'audio': true,
      'video': {
        'width': 1280,
        'height': 720, // 可根据需求调整分辨率
      },
    });
    _localStream = mediaStream; // 保存到类变量
    
    // 初始化本地渲染器并绑定流
    await localRenderer?.initialize();
    localRenderer?.srcObject = mediaStream;
    
    // 后续的PeerConnection创建逻辑（你原来的代码继续补充）
    final configuration = <String, dynamic>{
      'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}] // 基础STUN服务器
    };
    final peerConnection = await createPeerConnection(configuration);
    await peerConnection.addStream(mediaStream);
    
    // 监听远程流（你原来的remoteRenderers逻辑可以放在这里）
    peerConnection.onAddStream = (remoteStream) {
      setState(() {
        final remoteRenderer = RTCVideoRenderer();
        remoteRenderer.initialize().then((_) {
          remoteRenderer.srcObject = remoteStream;
          remoteRenderers.add(remoteRenderer);
        });
      });
    };
    
    // 其他PeerDart相关的信令逻辑（比如创建Offer、发送ICE候选等）
    // ...
    
  } catch (e) {
    print('创建通话失败: $e');
  }
}

3. 实现视频切换的核心方法

添加一个切换视频的函数，操作本地视频轨道并同步到Peer连接：

void toggleVideo() async {
  if (_localStream == null) return;
  
  // 获取本地视频轨道（假设只有一个视频轨道）
  final videoTrack = _localStream!.getVideoTracks().first;
  // 切换轨道的启用状态
  videoTrack.enabled = !videoTrack.enabled;
  _isVideoEnabled = videoTrack.enabled;
  
  // 关键：通知PeerDart更新媒体流状态
  // 如果是已建立的连接，替换发送的视频轨道更高效
  if (_peerConnection != null) {
    final senders = await _peerConnection!.getSenders();
    for (var sender in senders) {
      if (sender.track?.kind == 'video') {
        await sender.replaceTrack(videoTrack);
        break;
      }
    }
  }
  
  // 更新UI，比如切换按钮图标、隐藏/显示本地视频
  setState(() {});
}

常见的坑要注意

资源释放：页面销毁时一定要释放渲染器和媒体流，避免内存泄漏：

@override
void dispose() {
  localRenderer?.dispose();
  for (var renderer in remoteRenderers) {
    renderer.dispose();
  }
  _localStream?.dispose();
  _peerConnection?.close();
  super.dispose();
}