前端在 LiveKit 中如何获取所有的参与者

项目本身工期比较紧，在使用 LiveKit 时，还没有细细研究 LiveKit 的文档，导致遇到问题时，绕了一些弯子。就比如在 LiveKit 中获取所有参会的人员列表。

刚开始的思路是：

1. 进入房间后先获取之前的参会人员列表；
2. 监听 participantConnected 事件，获取新加入的参会人员列表；
3. 监听 participantDisconnected 事件，获取离开的参会人员列表；

实现代码（下面的代码先别着急复制，记得看到最后）：

import { RoomEvent } from "livekit-client";

const App = () => {
  const [participants, setParticipants] = useState([]);

  useEffect(() => {
    const connectedListener = (participant) => {
      if (participant) {
        setParticipants((prev) =>
          prev.concat({
            ...participant,
            isCameraEnabled: participant.isCameraEnabled,
            isMicrophoneEnabled: participant.isMicrophoneEnabled,
            isScreenShareEnabled: participant.isScreenShareEnabled,
            isActive: participant.isActive,
          })
        );
      }
    };
    const disConnectedListener = (participant) => {
      if (participant) {
        setParticipants((prev) => prev.filter((item) => item.identity !== participant.identity));
      }
    };

    room.on(RoomEvent.ParticipantConnected, connectedListener);
    room.on(RoomEvent.ParticipantDisconnected, disConnectedListener);

    return () => {
      room.off(RoomEvent.ParticipantConnected, connectedListener);
      room.off(RoomEvent.ParticipantDisconnected, disConnectedListener);
    };
  }, [room]);
};

不过，若你在已经使用 React 框架时，其实可以直接使用 LiveKit 提供的 useParticipants hook 来获取所有参会人员列表。LiveKit 针对 React 框架，封装了很多的 hook，都可以直接使用，而不需要自己来实现这些功能：LiveKit React Components。

const Participants = () => {
  // 一个 hook 即可搞定，获取到所有参会人员列表
  const participantsa = useParticipants({ room });
};

useParticipants()自己会从上下文中获取 room 的实例对象，比如在<RoomContext.Provider value={room}></RoomContext.Provider>的子组件中。若因为布局等原因，该 hook 需要在上下文之外调用，可以手动传入 room 实例对象。