TIL 85. 2024-05-01

이준구·2024년 5월 22일
0

TIL 순서

목록 보기
85/119
post-thumbnail

📌 관련 이슈

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}}
  1. 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

profile
개발 중~~~ 내 자신도 발전 중😂🤣

0개의 댓글

관련 채용 정보