w1nner(최종프로젝트) 트러블슈팅(화상면접)

개요

채용공고사이트인 만큼 1대1 화상면접기능이 있으면 좋겠다는 생각으로 도입했으며
회사유저가 일반유저에게 화상면접을 걸 수 있는 권한이 있다.

문제상황

1대1화상면접을 마치고 다시 같은 유저에게 화상면접을 신청하면 상대측의 카메라가 안뜸
하지만 새로고침을 하면 정상작동 함

사실 수집

첫번째 화상채팅을 하고 끝났을 때의 RTCPeerConnection의 상태

위의 사진과 같이 connectionState와 iceConnectionState가 connected로 잘 연결이 되어있고
iceGatheringState도 Complete상태이다.

콘솔창으로 상태를 확인한 후

function closeInterView() {
  const peerVideo = document.getElementById('peer-video');
  const userId = closeInterviewBtn.getAttribute('data-set');
  socket.emit('close-notification-interview', userId);
  interview.style.display = 'none';
  document.body.style.overflow = 'scroll';
  const tracks = myStream.getTracks();
  if (tracks) {
    tracks.forEach((track) => {
      track.stop();
    });
  }
  peerVideo.srcObject = null;
  myVideo.srcObject = null;
  myPeerConnection = '';
  videoSelect.options.length = 0;
  socket.emit('leave', setRoomId);
 
}

peerVideo와 myVideo, myPeerConnteion을 초기화 시킨다.

그리고 새로고침을 하지 않은 상태에서 회사유저가 같은 일반 유저에게 면접신청을 보내고 면접신청을 받은 일반유저에게 알림은 잘 뜨는데 응하는 버튼을 누르면 면접을 신청한 회사유저에게 welcome이라는 이벤트가 발생이 되야하는데 안되고 있다. roomID가 전송이 안된줄 알았는데 그것도 아니다. 대체 왜지...

문제원인

나는 문제원인을 closeInterView()에서 찾을 수 있었다.
socket.emit('leave', setRoomId)라는 이벤트는 채팅방을 나갔을 때 socket의 roomID를 leave하는 역할인데 화상채팅의 화면을 닫으면 soket.emit('leave', setRoomId)이 실행이 되면서 현재 화상채팅을 주고받은 room에서 벗어난게 원인이었다.

해결방안

// 화면을 갑자기 꺼버리면
function closeInterView() {
  const peerVideo = document.getElementById('peer-video');
  const userId = closeInterviewBtn.getAttribute('data-set');
  socket.emit('close-notification-interview', userId);
  interview.style.display = 'none';
  document.body.style.overflow = 'scroll';
  const tracks = myStream.getTracks();
  if (tracks) {
    tracks.forEach((track) => {
      track.stop();
    });
  }
  peerVideo.srcObject = null;
  myVideo.srcObject = null;
  myPeerConnection = '';
  videoSelect.options.length = 0;
}

화상채팅화면을 껐을 때 실행되던 socket.emit('leave')이벤트를 지웠더니 새로고침을 하지 않아도 정상작동이 된다.