React+WebRTC开发P2P视频通话应用：获取本地媒体流后Video元素无法显示的问题求助

我刚梳理了你的代码，完全能理解你此刻的困惑——摄像头明明已经激活，但页面上的视频就是没画面，可页面加载时直接调用却能正常显示。这其实是React状态更新逻辑和组件渲染触发机制的两个常见问题导致的，咱们一步步来解决：

1. 修复localStreamObj的状态更新逻辑 #

在dohandleLocalStream里，你直接修改了原对象的stream属性，然后把同一个对象传给setLocalStreamObj：

localStreamObj.stream = media;
setLocalStreamObj(localStreamObj);

React的状态更新是浅比较，因为你传递的还是同一个对象引用，React会判定状态没有变化，自然不会触发Conference组件的重新渲染，LocalVideoView也就接收不到新的媒体流。

修改方式：创建新对象来更新状态，让React能检测到变化：

// 不要直接修改原对象，而是基于旧状态生成新对象
setLocalStreamObj(prevState => ({
  ...prevState,
  stream: media
}));

2. 修复LocalVideoView的useEffect依赖 #

你的LocalVideoView组件中，useEffect的依赖是空数组[]，这意味着它只会在组件首次挂载时执行一次。当后续Conference组件传递新的props.stream过来时，这个useEffect不会重新执行，video元素的srcObject也就不会被更新。

修改方式：把props.stream加入useEffect的依赖数组：

useEffect(() => {
  if (videoRef.current && props.stream) {
    videoRef.current.srcObject = props.stream;
    console.log('current video stream:', props.stream);
  }
  return () => {
    if (videoRef.current) {
      videoRef.current.srcObject = null;
    }
  }
}, [props.stream]) // 新增props.stream作为依赖，流变化时重新执行

3. 额外优化：用useState管理settings配置 #

你现在的settings是用let声明的普通变量：

let settings = {
  // ...配置项
};

在startPublishingVideo里直接修改settings.video = true，但这种修改不会触发组件重新渲染（React不监听普通变量的变化），后续Conference组件拿到的可能还是旧的配置值，可能引发其他潜在问题。

修改方式：把settings转为useState状态：

const [settings, setSettings] = useState({
  selectedAudioDevice: "",
  selectedVideoDevice: "",
  resolution: "vga",
  bandwidth: 512,
  codec: "vp8",
  isDevMode: false,
  audio: localAudioEnabled,
  video: localVideoEnabled
});

// 更新settings的方式也要改为状态更新函数
const startPublishingVideo = (sid, uid) => {
  setSettings(prev => ({
    ...prev,
    video: true
  }));
  setLocalVideoEnabled(true);
  conference.current.handleLocalStream();
};

验证效果 #

做完这三处修改后，再点击「打开相机」按钮：

1. 摄像头激活并获取到媒体流后，新的状态更新方式会触发Conference组件重新渲染
2. LocalVideoView接收到新的流，useEffect重新执行并将流赋值给video元素
3. 视频画面就能正常显示了

你也可以在Conference组件的return部分加个console.log(localStreamObj.stream)，确认状态更新后组件确实触发了重新渲染。

内容的提问来源于stack exchange，提问作者Nam V. Do