TIL 89. 2024-05-08

Task TODOLIST

• 원격 사용자의 카메라 기능 수정

✨ 개발 내용

기존 코드) livekit에서 제공해주는 useParticipantTracks(tracks[], userId) hook을 사용하여 특정 user의 카메라를 제어하였다.
현재 코드) useRemoteParticipants();  현재 방의 모든 원격 참가의 데이터인 track으로 코드 수정
이유) useEffect 내부에서 socket을 사용중이었고 hook 자체는 컴포넌트 최상위 루트에서 실행해야하므로 다른 조건으로 기능 수정

TroubleShotting

1. players[] 배열의 값을 setState값으로 전달 받음 
2. 전달받은 players의 배열에 map을 사용하여 각각의 userId에 해당 트랙(data)를 받아오려 하였다.
3. “Cannot read properties of undefined (reading 'length’)”에러가 발생
4.  처음에는 null값 문제로 생각하여 조건문을 통해 userId && sources라는 값이 있을 경우에만 map을 사용하게끔 유도하였지만 계속 문제가 발생하였다.  
5. 또한, Warning: React has detected a change in the order of Hooks called by MafiaPlayRooms. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks” 라는 문장 순서 error도 발생
6. 생각을 다르게 하여 1명의 원격 user가 아닌 전체의 원격 사용자의 데이터를 갖고오도록 수정하였다.

📚 레퍼런스 (또는 새로 알게 된 내용) 혹은 궁금한 사항들

LiveKitDocs