NextJS集成LiveKit遇重连后Track未定义问题求助

• 重连时重新创建并发布Track
  断开连接后原Track引用大概率已失效，重连时需要重新获取本地Track并发布。在LiveKit的reconnected事件中加入处理逻辑：

  room.on('reconnected', async () => {
    // 检查本地参与者是否存在已发布的Track
    const hasValidTracks = room.localParticipant.getTracks().length > 0;
    if (!hasValidTracks) {
      // 重新生成音视频Track
      const localTracks = await createLocalTracks({
        video: true,
        audio: true
      });
      // 发布新生成的Track
      localTracks.forEach(track => {
        room.localParticipant.publishTrack(track);
      });
    }
  });
  

• 用React状态管理Track引用，避免全局变量
  不要用模块级或全局变量存储Track——NextJS热重载会重置这类变量，这也是为什么改代码保存后Track能正常显示的原因。改用useState管理Track状态：

  import { useState, useEffect } from 'react';
  import { createLocalTracks } from 'livekit-client';
  
  function LiveKitRoom() {
    const [localTracks, setLocalTracks] = useState([]);
    
    // 初始化本地Track
    useEffect(() => {
      async function initTracks() {
        const tracks = await createLocalTracks({ video: true, audio: true });
        setLocalTracks(tracks);
      }
      initTracks();
      
      // 组件卸载时清理Track
      return () => {
        localTracks.forEach(track => track.stop());
      };
    }, []);
    
    // 重连时更新Track
    useEffect(() => {
      if (!room) return;
      
      const handleReconnected = async () => {
        const tracks = await createLocalTracks({ video: true, audio: true });
        setLocalTracks(tracks);
        tracks.forEach(track => room.localParticipant.publishTrack(track));
      };
      
      room.on('reconnected', handleReconnected);
      return () => room.off('reconnected', handleReconnected);
    }, [room]);
    
    return (
      <div>
        {localTracks.map(track => (
          <video key={track.sid} autoPlay playsInline ref={el => el && track.attach(el)} />
        ))}
      </div>
    );
  }
  

• 断开连接时主动清理Track引用
  在disconnected事件中清理无效Track，避免残留引用导致状态混乱：

  room.on('disconnected', () => {
    // 取消发布所有Track
    room.localParticipant.unpublishAllTracks();
    // 停止本地Track
    room.localParticipant.tracks.forEach(publication => {
      publication.track?.stop();
    });
    // 重置Track状态
    setLocalTracks([]);
  });
  

• 确保LiveKit逻辑在客户端执行
  LiveKit SDK仅支持浏览器环境：如果用NextJS App Router，给组件加上'use client'指令；如果是Pages Router，用useEffect包裹所有LiveKit初始化逻辑，避免在SSR阶段执行。

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