Flutter WebRTC本地摄像头视频在模拟器/真机启动时不显示

你的问题核心在于组件初始化阶段的异步操作未正确等待，导致UI渲染时视频流还未完成绑定。浏览器环境的异步调度机制与Android平台不同，因此能正常显示；但Android端initState里的_initRenderers和_getUserMedia是异步执行的，组件先完成build，此时渲染器未初始化完成或媒体流未绑定，所以看不到视频；而重载时之前的异步操作已完成，渲染器和流都就绪，因此能正常显示。

修复步骤 #

修改_MyHomePageState的初始化逻辑，确保异步操作完成后再更新UI：

@override
void initState() {
  super.initState(); // 遵循Flutter生命周期规范，先调用父类方法
  _setupVideo(); // 封装异步初始化流程
}

// 单独封装异步初始化逻辑
Future<void> _setupVideo() async {
  await _initRenderers(); // 等待渲染器初始化完成
  await _getUserMedia(); // 等待获取媒体流并绑定到渲染器
  setState(() {}); // 触发UI更新，此时渲染器已就绪并绑定流
}

// 保持原逻辑，明确返回类型为Future
Future<void> _getUserMedia() async {
  final Map<String, dynamic> mediaConstraints = {
    'audio': true,
    'video': true,
  };
  MediaStream stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
  _localRenderer.srcObject = stream;
}

关键改动说明 #

1. 将异步初始化逻辑封装到单独的_setupVideo方法中，确保_initRenderers和_getUserMedia按顺序执行完成后，再触发UI更新。
2. initState本身无法作为异步方法，通过调用异步方法的方式处理异步逻辑，避免生命周期冲突。
3. 调整调用顺序，先执行super.initState()，符合Flutter组件生命周期规范。

修改后，应用启动时会等待渲染器初始化和媒体流绑定完成后再渲染UI，Android平台就能正常显示摄像头视频了。

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