TIL 85. 2024-05-01

📌 관련 이슈

closed #238

Task TODOLIST

• 커스텀 훅으로 개편 이전의 sockets 정리
• 사용자 카메라 및 오디오 기능 일부 수정 (미완성)

✨ 개발 내용

기존 캠 및 마이크 로직 부분을 아래의 방식으로 변경

//NOTE - 캠 및 마이크 설정
const useMediaStatus = (tracks: TrackReferenceOrPlaceholder[], playerList: MediaStatusMap | undefined) => {

  //NOTE -  로컬 user의 정보
  const localParticipant = useLocalParticipant();
  const localUserId = localParticipant.localParticipant.identity;

  //   const [playerTrack, setPlayerTrack] = useState<TrackReference[]>();

  //NOTE -  모든 원결 user들의 정보
  const remoteTracks = useRemoteParticipants();




  useEffect(() => {
    if (!playerList || !localParticipant) {
      return;
    }
    //NOTE - server에서 전송받은 playerList  구조: {userId: {cam: boolean, mike: boolean}}
    const userIdList = Object.keys(playerList);

    userIdList.forEach((playerId) => {
      const isMedia = playerList[playerId];

      //NOTE - 로컬 사용자
      if (localUserId == playerId) {
        const localCamera = localParticipant.cameraTrack?.track?.mediaStreamTrack;
        const localMike = localParticipant.microphoneTrack?.track?.mediaStreamTrack;

        localCamera!.enabled = isMedia.camera;
        localMike!.enabled = isMedia.mike;

        //NOTE - 원격 사용자들
      } else {
        //특정 user의 track(카메라 및 오디오 데이터)
        const remotePlayer = remoteTracks.find((track) => track.identity === playerId);

        if (!remotePlayer) {
          return;
        }

        const camera = remotePlayer.getTrackPublication(Track.Source.Camera);
        const mike = remotePlayer.getTrackPublication(Track.Source.Microphone);

        camera?.setSubscribed(isMedia.camera);
        mike?.setSubscribed(isMedia.mike);
      }
    });
  }, [playerList]);

<br/>
    

TroubleShotting

모든 user에게 마피아 user의 캠이 보여지는 상황이 발생

1. server에서 전송받는 객체 구조
   {userId: {cam: boolean, mike: boolean}}

2. EX) 문제는 아래의 상황

//마피아 user의 id값이 1일 경우
DummyPlayerList = {userId: 1, {cam: true, mike: true}, userId: 2, {cam: false, mike: false} , userId: 3, {cam: false, mike: false}


// userId가 1인 Local 환경
자신의 캠 on
user2 : 캠 off
user3: 캠 off

// userId가 2인 Local 환경
user1: 캠 on
자신의 캠: off
user3: 캠 off

// userId가 3인 Local 환경
user1: 캠 on
자신의 캠: off
user3: 캠 off

• 위와 같이 모든 클라이언트 환경에서 동일 처리되는 걸 볼 수 있다. 이로 인해 모든 user에게 마피아 user의 캠이 보여지는 상황이 발생
• 해결하기 위해 현재 서버 담당 팀원과 회의중

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

livekit Docs의setCameraEnabled, setMicrophoneEnabled