[project] 마이크,비디오 차단 사용자 게임참가 기능

✨ 오늘은 백엔드 분들의 요청으로 생각도 못하고 있던,마이크,비디오 차단/ 미소유 사용자 게임 참가 기능을 추가 하였습니다.

📌

기존의 로직에선 사용자의 미디어를 얻어 온 후 사용자와의 peerConnection을만들고 해당peerConnection의 ontrack 이벤트가 발생될 때 정보를 받아 users 배열에 화면에 보여줄 유저정보를 담은 객체를 만들어 주는데
수정한 로직은 ontrack이벤트가 발생 되기전 미리 유저정보를 담은 객체를 만들어 users배열에 넣어 주는것입니다! 이를통해 마이크,비디오 stream이 없는 화면에 유저도 보여집니다 😊
이후 ontrack 이벤트는 stream이 있는 유저에게만 발동 되므로 해당유저정보를 담은 객체는 삭제하고 stream을 가진 새로운 객체 정보를 users 배열에 넣어 주었습니다 !

 setUsers((oldUsers) => [
      ...oldUsers,
      {
        id: socketID,
        stream: null,
        nickName: userNickName,
        isCameraOn: false,
      },
    ]);

🔧 peerConnection을 만드는 함수 내부에 있는 로직입니다. ontrack 이벤트가 발생하기전 유저 정보를 users배열에 넣어줍니다. stream의 값은 null로 해주었습니다 :)

    pc.ontrack = (e) => {
      setUsers((oldUsers) => oldUsers.filter((user) => user.id !== socketID));
      setUsers((oldUsers) => [
        ...oldUsers,
        {
          id: socketID,
          stream: e.streams[0],
          nickName: userNickName,
          isCameraOn: true,
        },
      ]);
    };

🔧 peerConnecion의 ontrack 이벤트 로직입니다 peerConnecion의을 만들때 생성한 유저정보 객체는 지워주고 stream을 가진 새로운 유저정보 객체를 만들어 users 배열에 넣어 줍니다.

  await getUserMedias()
        .then((streamMedia) => {
          if (videoRef.current) {
            videoRef.current.srcObject = streamMedia;
          }
        })
        .catch((error) => {
          userCardImgRef.current.style.display = 'block';
          videoRef.current.style.display = 'none';
          console.log(`getUserMedia error: ${error}`);
        });

🔧 서버와 시그널링 위한 소켓이 연결된 후 실행되는 로직입니다. 유저의 미디어를 가져오지 못하였다면 미지로 대체하여 화면에 보여집니다.

☝

생각보다 어려워 질 줄 알았던 로직이 구현해보니 걱정했던 것 보단 간단하게 나왔습니다 :)