[project] 마이크,카메라 비사용자 게임로직 오류수정 2

📌

먼저 이전 로직에서 큰 오류가 발생하여 해당로직을 재수정 하게 되었습니다 ㅠㅠ
바로 signailng에서 오류가 생겨버렸는데요..
상대방의 stream을 읽어오지 못하는 오류가 생겨버렸습니다...
됐다 안됐다 하는 오류라... 미처 발견하지 못했었네요 😂
이제라도 발견해서... 수정하였습니다!

function createPeerConnection(
    socketID,
    socket,
    peerConnectionLocalStream,
    userNickName,
  ) {
    const pc = new RTCPeerConnection({
      iceServers: [
        {
          urls: 'stun:stun.l.google.com:19302',
        },
      ],
    });
    // add pc to peerConnections object
    const keyName = socketID;
    pcs = { ...pcs, [`${keyName}`]: pc };
    pc.onicecandidate = (e) => {
      if (e.candidate) {
        socket.send(
          JSON.stringify({
            type: 'candidate',
            candidate: e.candidate,
            receiver: socketID,
            roomId: param.roomId,
          }),
        );
      }
    };
    pc.oniceconnectionstatechange = (e) => {
      // console.log(e);
    };
    // eslint-disable-next-line no-unused-expressions

    if (userNickName === sessionStorage.getItem('owner')) {
      setUsers((oldUsers) => [
        ...oldUsers,
        {
          id: socketID,
          stream: null,
          nickName: userNickName,
          isCameraOn: false,
          isMyTurn: false,
          isOwner: true,
        },
      ]);
    } else {
      setUsers((oldUsers) => [
        ...oldUsers,
        {
          id: socketID,
          stream: null,
          nickName: userNickName,
          isCameraOn: false,
          isMyTurn: false,
          isOwner: false,
        },
      ]);
    }

    pc.ontrack = (e) => {
      setUsers((oldUsers) => oldUsers.filter((user) => user.id !== socketID));
      // eslint-disable-next-line no-unused-expressions
      if (userNickName === sessionStorage.getItem('owner')) {
        setUsers((oldUsers) => [
          ...oldUsers,
          {
            id: socketID,
            stream: e.streams[0],
            nickName: userNickName,
            isCameraOn: true,
            isMyTurn: false,
            isOwner: true,
          },
        ]);
      } else {
        setUsers((oldUsers) => [
          ...oldUsers,
          {
            id: socketID,
            stream: e.streams[0],
            nickName: userNickName,
            isCameraOn: true,
            isMyTurn: false,
            isOwner: false,
          },
        ]);
      }
    };
    try {
      if (peerConnectionLocalStream) {
        peerConnectionLocalStream.getTracks().forEach((track) => {
          pc.addTrack(track, peerConnectionLocalStream);
        });
      } else {
        console.log('no local stream');
      }
    } catch (error) {
      console.log(error);
    }
    return pc;
  }

  // end WebRTC createPeerConnection method for using WebRTC, section

🔧위의 코드는 peerConnection을 만드는 함수입니다 해당 프론트에서 방 입장시 해당 방의 방장을 확인하여 세션스토리지에 저장해두고 있었는데요 세션스토리지에서 방장데이터를 가져와 owner라는 변수에 할당하여 비교하려고 하였습니다.

하지만 위의 함수에서 owner 변수를 참조하였을때 값을 제대로 가져오지 못하였는데요 해결을 위해 변수에 할당하지 않고 세션스토리지에서 바로 데이터를 가져와 닉네임을 비교해 주었습니다 :)

☝

왜 owner변수의 값을 참조하지 못하였는지는 아직도 잘... 이해가 안가지만 어찌저찌 오류를 잘 잡아냈습니다!!