视频通话Web系统问题：本地视频无法显示及永久ID需求咨询

一、TypeError: Cannot set properties of undefined (setting 'srcObject') 报错修复 #

原因：初始化useEffect中直接访问myVideo.current时，对应的<video>DOM元素尚未完成挂载，导致myVideo.current为undefined，无法设置srcObject属性。

解决方案：

• 移除原getUserMedia函数中直接赋值myVideo.current.srcObject = currentStream的代码，仅保留setStream(currentStream)；
• 新增一个监听stream状态的useEffect，确保DOM元素挂载后再赋值：

useEffect(() => {
  if (stream && myVideo.current) {
    myVideo.current.srcObject = stream;
  }
}, [stream]);

• 同时检查子组件中的<video>元素是否正确绑定ref={myVideo}，确保DOM元素存在。

二、本地视频画面无法显示问题修复 #

该问题与上述报错直接关联，修复报错后本地视频的srcObject可正确设置。补充检查点：

• 确认浏览器已授予摄像头权限，可在浏览器设置中查看并开启权限；
• 给本地视频的<video>元素添加必要属性，确保自动播放：

<video ref={myVideo} autoplay muted playsinline />

三、实现类似Google Meet的永久ID/房间码（页面刷新后仍可用） #

当前socket.io返回的me是临时会话ID，页面刷新后会重新生成。可通过以下两种方案实现持久化标识：

方案1：房间码模式 #

1. 服务器端：新增房间管理逻辑，支持生成唯一房间码，存储房间内的用户连接信息；
2. 前端：
   • 用户可选择创建房间（生成房间码）或输入已有房间码加入；
   • 将房间码存入localStorage，页面刷新后自动读取并重新加入房间；
   • 修改socket交互逻辑，以房间码为核心建立通话连接，而非临时用户ID。

方案2：用户账号绑定模式 #

如果系统有用户账号体系，直接用用户唯一账号ID作为永久标识：

1. 用户登录后，将账号ID发送给socket服务器；
2. 服务器以账号ID替代临时会话ID作为用户标识；
3. 页面刷新后，用户自动登录并使用账号ID重新建立连接。

前端示例代码（房间码存储） #

在ContextProvider中添加房间码相关逻辑：

const [roomCode, setRoomCode] = useState(localStorage.getItem('videoRoomCode') || '');

// 创建房间
const createRoom = async () => {
  const res = await fetch('/api/create-room');
  const data = await res.json();
  setRoomCode(data.roomCode);
  localStorage.setItem('videoRoomCode', data.roomCode);
  socket.emit('join-room', data.roomCode);
};

// 加入房间
const joinRoom = (code) => {
  setRoomCode(code);
  localStorage.setItem('videoRoomCode', code);
  socket.emit('join-room', code);
};

// 刷新后自动加入房间
useEffect(() => {
  if (roomCode) {
    socket.emit('join-room', roomCode);
  }
}, []);

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