[WebRTC] React+TypeScript+WebRTC 개념정리 + 구현하기

부스트캠프 웹모바일 멤버십 그룹 프로젝트에서 WebRTC를 다루게 됐다. 본격적인 작업에 들어가기 앞서 WebRTC에 대해 무지한 상태였기에 미리 학습을 해보았다
처음 학습할 때는 진짜 이게 뭐지 싶었다.. 그래서 이해 못한 채 일단 개념이라도 마구 적어놨다
MDN 문서를 하나씩 살펴보고, 블로그 자료를 엄청 찾아 돌아 댕기다보니 어느정도 정리가 됐다
하단에 참고한 문서들 적어놨어요 🤗

WebRTC(Web Real Time Communication)란??

브라우저와 모바일 애플리케이션에서 별도의 소프트웨어 없이 음성, 영상 미디어, 텍스, 파일과 같은 데이터들을 실시간 통신(RTC)으로 주고 받을 수 있게 해주는 기술이다.
Peer To Peer 방식으로 전송하며, 시그널링 서버 하나만 있으면 된다.

시그널링 서버는 뭔데?

서로 다른 네트워크에 있는 디바이스들끼리 통신하기 위해서는 각자의 위치를 알고, 미디어 포맷을 맞출 수 있어야 한다. 이러한 과정을 시그널링 이라고 부른다.
각 디바이스들은 서버로 본인의 정보를 보내고, 시그널링 서버는 받은 네트워크 정보를 그대로 상대 디바이스에게 전달해준다.

실시간이라면 웹소켓과 무슨 차이죠?

웹소켓은 클라이언트가 서버를 통해 정보들을 전달받는다.

그러나 WebRTC는 시그널링 서버를 통해 서로의 네트워크 정보들을 받는다. (시그너링 서버는 단순히 클라이언트의 네트워크 정보를 전달해주는 매개자 역할을 한다.)
클라이언트는 상대 클라이언트의 네트워크 정보를 받고 “너 거기 있구나?” 를 알게 되면 그때부터 클라이언트끼리 연결을 할 수 있게 되는 것이다.

---

STUN과 TURN

이 개념을 알기 전에 NAT이라는 개념을 먼저 알아야 한다.

NAT(network Address Translation)이란?

사설 IP를 공인 IP로 변경하는데 필요한 주소 변환 서비스이다.
→ 라우터 등의 장비를 사용하여 다수의 사설 IP를 공인 IP 주소로 변환하게 된다.
무슨 말이냐면,
회사망/내부망(LAN) 은 Private IP이기 때문에 다른 네트워크에서는 통용되지 않는다.
그렇기 때문에 우리가 네트워크에서 데이터를 주고받기 위해서는 Public IP 가 필요한데, NAT는 Private IP를 Public IP로 1대1 대응시켜 변환하는 장치다.
그렇다면 STUN, TURN은 뭘까
P2P로 연결하기 위해서도 역시 상대방의 Public IP 주소가 필요하다. 하지만 클라이언트는 보통 방화벽이나 NAT 뒤에서 보호받고 있기 때문에 Public IP 주소를 알기 어렵다.
그래서 WebRTC에서는 STUN 서버 사용을 권장하고 있다.
서로간의 연결을 위한 정보를 공유하여 P2P 통신을 가능하게 해주는 것이 Stun/Turn Server이다.

STUN은 클라이언트-서버 프로토콜이다. STUN 클라이언트는 사설망(private network)에 위치하고, STUN 서버는 인터넷망에 위치한다. STUN 클라이언트는 자신의 공인 IP 주소를 확인하기 위해 STUN 서버에게 요청하고, STUN 서버는 STUN 클라이언트가 사용하는 공인 IP 주소를 응답한다.

TURN 서버는 아직 확실하게 이해가
되지 않아서 하단에 첨부된 노션 상에만 적어놨고, 여기엔 적지 않겠다. 궁금하면 노션으로 타고 들어가서 볼 수 있어요

사설망(private network): 인터넷 어드레싱 아키텍처에서 사설 IP 주소 공간을 이용하는 네트워크

 

어느 정도 용어 정리는 된 것 같으니 본격적으로 시그널링 과정을 설명해보겠다

처음에 텍스트로만 적혀진 글을 보고 공부했었는데, 이 사진을 보니까 흐름이 어느 정도 이해가 됐었다

---

1. Session Descriptions 교환하기

1. 먼저, Peer A가 이미 접속해 있었다고 가정해보자.
2. 그 후 Peer B가 들어오면, B가 A에게 “나 들어왔어~” 라고 알린다.
3. 그럼 A는 createOffer()를 통해 offer를 만든다. 이 offer는 위에서 말한 SDP를 의미한다.
4. 내 SDP를 setLocalDescription을 통해 로컬 SDP로 설정해주어야 한다.
5. 생성한 SDP를 상대 B에게 시그널링 서버를 통해 보내준다.
6. B는 전달받은 SDP를 setRemoteDescription을 통해 RemoteDescription 으로 설정해야 한다.
7. B는 리모트에 A의 SDP를 설정하고 나면 createAnswer()를 통해 A에게 보낼 SDP를 똑같이 생성한다.
   1. 위에서 생성한 createOffer와 같은 과정이다.
8. 마찬가지로 A에게 Answer를 보내주고, A는 받은 answer를 RemoteDescription 으로 설정하게 된다

 

2. Ice Candidate 교환하기

SDP를 서로 교환한 후에, 두 피어들은 ICE candidate (ICE 후보)들을 교환하기 시작한다.
상대와 통신할 수 있는 candidate를 찾기 시작하는 과정이다.

1. 각 클라이언트는 현재 내 네트워크 정보가 확보되면 실행될 callback을 onicecandidate 핸들러에게 전달한다. 두가지 방법이 있다.

peerConnection.addEventListener('icecandidate', (e) => {});
peerConnection.onicecandidate = (e) => {};

1. 내 네트워크 정보가 확보되면 시그널링 서버를 통해 상대 Peer에게 내 ice candidate를 전송한다.
2. 상대 Peer의 ice candidate가 도착하면, 클라이언트에 저장해두었던 상대 Peer Connection을 찾아서 상대의 addIceCandidate() 로 candidate를 설정해주어야 한다.
   1. 이 작업은 서로가 모든 IceCandidate를 교환할 때까지 진행된다.
3. IceCandidate를 모두 교환하고 나면, addEventListener의 track 이벤트를 통해 상대의 stream을 받아올 수 있다.

peerConnection.addEventListener('track', (e) => {});
peerConnection.ontrack = (e) => {};

 

흐름은 여기까지! 이제 실전으로 들어가서 코드를 작성해보자.
사실 흐름만 읽었을 때는 이게 무슨 말인가 싶을수도 있는데, 역시 직접 코드를 작성해보면서 배우는게 좋은 것 같다.

 

Server 코드

import { Server } from 'socket.io';

function signalingSocketServer(io: Server) {
  const signaling = io.of('namespace');

  signaling.on('connection', (socket) => {
    socket.on('join', () => {
      const senderId = socket.id;
      socket.broadcast.emit('join', senderId);
    });

    // senderId : offer를 보내기 시작한 사람의 id, receiveId : offer를 받는 사람의 id
    socket.on('offer', ({ receiveId, offer }) => {
      const senderId = socket.id;
      socket.to(receiveId).emit('offer', { senderId, offer });
    });

    socket.on('answer', ({ receiveId, answer }) => {
      const senderId = socket.id;
      socket.to(receiveId).emit('answer', { senderId, answer });
    });

    socket.on('ice-candidate', ({ receiveId, candidate }) => {
      const senderId = socket.id;
      socket.to(receiveId).emit('ice-candidate', { senderId, candidate });
    });

    socket.on('disconnect', () => {
      const senderId = socket.id;
      socket.broadcast.emit('disconnected', senderId);
    });
  });
}

export default signalingSocketServer;

위와 마찬가지로 A가 있는 상황에서 B가 들어온다고 가정하자.
join
B가 들어오면 socket.broadcast를 통해 이전이 이미 접속해 있던 멤버들에게 B의 소켓 아이디를 알려준다.
socket.broadcast : 나 자신을 제외한 모두에게 이벤트를 보냄
https://socket.io/docs/v3/broadcasting-events/

offer
A가 B에게 보낸 offer를 받아서 socket.to 를 통해 B에게만 offer를 전달해준다.
클라이언트에서 받을 사람의 Id를 보내주어야 한다.

answer
B가 생성한 answer를 받아서 socket.to 를 통해 A에게만 보내준다.
마찬가지로 클라이언트에서 받을 사람의 Id를 보내주어야 한다.

ice-candidate
이 과정은 A와 B 모두 보내게 된다. icecandidate 이벤트로 등록해놓은 이벤트 핸들러 안에서 이 소켓 이벤트가 발생할 것이다. 마찬가지로 전달받은 candidate를 각각 상대방에게 보낸다.
서버는 단지 시그널링을 위한 용도이기 때문에 매우 간단하다.

---

Client 코드

const socket = io(env.SERVER_PATH + 'namespace');

const [participants, setParticipants] = useState<Map<string, MediaStream>>(new Map(),);
const myStreamRef = useRef<MediaStream | null>(null);
const myVideoRef = useRef<HTMLVideoElement | null>(null);
const peerConnectionRef = new Map();

const setMyStream = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
  });
  myStreamRef.current = stream;

  if (myVideoRef.current) {
    myVideoRef.current.srcObject = myStreamRef.current;
  }
};

/**
 * Peer와 연결하기
 * @param peerId 연결할 피어의 Id
 * @returns 새로 생성한 peerConnection 객체
 */
const setPeerConnection = (peerId: string) => {
  const peerConnection = new RTCPeerConnection({
	iceServers: [
	  {
	    urls: ['stun:stun.l.google.com:19302'],
	  },
	],
  });

  /* 이벤트 핸들러: Peer에게 candidate를 전달 할 필요가 있을때 마다 발생 */
  peerConnection.addEventListener('icecandidate', (e) => {
    const candidate = e.candidate;
    if (!candidate) return;

    socket.emit(RTC_MESSAGE.ICE_CANDIDATE, {
      receiveId: peerId,
      candidate,
    });
  });

  /* 이벤트 핸들러: peerConnection에 새로운 트랙이 추가됐을 경우 호출됨 */
  peerConnection.addEventListener('track', (e) => {
    if (participants.has(peerId)) {
      return;
    }

    const [peerStream] = e.streams;

    // 새로운 peer를 참여자에 추가
    setParticipants((prev) => {
      const newState = new Map(prev);
      newState.set(peerId, peerStream);
      return newState;
    });
  });

  myStreamRef.current?.getTracks().forEach((track) => {
    if (!myStreamRef.current) return;

    // 다른 유저에게 전달해주기 위해 내 미디어를 peerConnection 에 추가한다.
    // track이 myStreamRef.current(내 스트림)에 추가됨
    peerConnection.addTrack(track, myStreamRef.current);
  });

  return peerConnection;
};

useEffect(() => {
  setMyStream();

  /* 유저 join */
  socket.emit(RTC_MESSAGE.JOIN);

  /* 새로 들어온 유저의 socketId를 받음 */
  socket.on(RTC_MESSAGE.JOIN, async (socketId) => {
    const peerConnection = setPeerConnection(socketId);

    peerConnectionRef.set(socketId, peerConnection);

    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);

    socket.emit(RTC_MESSAGE.OFFER, {
      receiveId: socketId,
      offer,
    });
  });

  /* offer 받기 */
  socket.on(RTC_MESSAGE.OFFER, async ({ senderId, offer }) => {
    const peerConnection = setPeerConnection(senderId);

    peerConnectionRef.set(senderId, peerConnection);

    await peerConnection.setRemoteDescription(offer);

    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);

    /* answer 전송 */
    socket.emit(RTC_MESSAGE.ANSWER, { receiveId: senderId, answer });
  });

  /* answer 받기 */
  socket.on(RTC_MESSAGE.ANSWER, async ({ senderId, answer }) => {
    const peerConnection = peerConnectionRef.get(senderId);
    if (!peerConnection) {
      return console.log('Peer Connection does not exist');
    }

    await peerConnection.setRemoteDescription(answer);
  });

  /* ice candidate */
  socket.on(RTC_MESSAGE.ICE_CANDIDATE, ({ senderId, candidate }) => {
    const peerConnection = peerConnectionRef.get(senderId);
    if (!peerConnection) {
      return console.log('Peer Connection does not exist');
    }

    peerConnection.addIceCandidate(candidate);
  });

  /* disconnected */
  socket.on(RTC_MESSAGE.DISCONNECTED, (senderId) => {
    peerConnectionRef.delete(senderId);

    setParticipants((prev) => {
      const newState = new Map(prev);
      newState.delete(senderId);
      return newState;
    });
  });

  return () => {
    socket.off(RTC_MESSAGE.JOIN);
    socket.off(RTC_MESSAGE.OFFER);
    socket.off(RTC_MESSAGE.ANSWER);
    socket.off(RTC_MESSAGE.ICE_CANDIDATE);
    socket.off(RTC_MESSAGE.DISCONNECTED);
  };
}, []);

const streams = Array.from(participants.values());

return (
    <ul>
      {streams.map((stream) => (
        <li key={stream.id}>
           <Video stream={stream} />
        </li>
      ))}
    </ul>
);

모듈화는 잘 안돼있는데 리팩토링을 다시 해야한다 ㅎㅎ..
사실 이 코드는 버그가 좀 있다.. 현재 버그가 발생한 위치는 찾았으나 원인은 찾지 못한 상황이다. offer, answer, candidate 과정을 통해 SDP를 모두 설정은 해주었으나 peerConnection.addEventListener('track', (e) => {}) 이 부분이 호출되지 않는 것을 발견했다..
내가 이해한 바로는 track 이벤트는 peerConnection.addTrack 가 실행될 때 발생하는 것이다. 상대방이 peerConnection 에 본인의 새로운 track을 추가하게 되면 track 이벤트가 발생하게 되고, 핸들러가 실행되면서 상대의 stream을 가져올 수 있는 것이다.
하지만 track이 올바르게 추가된 것을 확인했으나 가끔 핸들러에 들어가지 않는 경우가 있더라.. 만약 버그를 발견하신 분이 있다면 댓글로 꼭꼭 알려주세요 ㅠㅠ 🙏

아무튼 버그가 있더라도 흐름은 맞으니까 다시 설명으로 돌아가서..

setMyStream

내 비디오 스트림을 설정하는 함수다. myStreamRef 에는 MediaStream 타입인 스트림을 걸어주고
myVideoRef 에는 myVideoRef.current.srcObject 에 myStreamRef의 스트림을 넣어주면, video 태그에 아래처럼 걸어주면 내 비디오를 볼 수 있다.

<video ref={myVideoRef} />

 

setPeerConnection

Peer Connection을 설정해주는 함수다.

1. 먼저, new RTCPeerConnection 로 새로운 피어 객체를 생성해주고, 스턴 서버를 설정해준다. 구글에서 제공해주는 서버를 사용하면 되는 것 같다.
2. icecandidate 이벤트를 등록해준다. 이 이벤트리스너는 peer connection이 candidate를 전달해야 할 필요가 있다고 판단될 때마다 발생하게 된다.
   1. e.candidate 로 candidate를 받아온 후, 소켓 emit 이벤트를 걸어준다. 내 candidate를 상대에게 보내는 과정이다.
3. track 이벤트를 등록해준다. 이 이벤트 리스너는 위에서 말했던 것처럼 상대방이 peerConnection 에 본인의 새로운 track을 추가하게 되면 발생하게 된다.
   1. e.streams로 상대의 stream을 받아온 후, UI에 뿌려주기 위해 useState로 관리중인 participants에 새로운 스트림으로 추가해준다.
4. getTracks() : 종류에 관계없이 스트림의 트랙 set에 있는 모든 MediaStreamTrack 객체를 반환한다.
   1. 다른 유저에게 내 스크림을 전달해주기 위해 peerConnection에 내 스트림을 addTrack으로 담는다.

 

이제 useEffect 안으로 들어와보자.

1. 먼저 setMyStream 을 호출해 내 미디어를 먼저 설정해준다.
2. join 이벤트로 내가 들어왔다는 것을 이미 접속해 있던 모든 유저들에게 알린다.
3. socket.on(RTC_MESSAGE.JOIN) : 그럼 누군가는 이 이벤트를 받게 될 것이다.
   1. 누군가 들어왔으니 새로운 peer connection을 생성해주어야 한다.
   2. peerConnectionRef에 socketId를 키 값으로 peer connection을 저장해두자. socketId의 상대와 맺은 connection이 이거다! 라는 것을 구분해주기 위함이다.
   3. answer와 candidate를 받을 때, 상대와 맺은 peer connection에 받은 answer와 candidate를 추가해주어야 하기 때문에 peerConnection을 저장해둘 필요가 있다.
4. socket.on(RTC_MESSAGE.OFFER) : 상대방의 offer를 받는 부분이다.
   1. 여기서 중요한 것은, offer를 받으면 새로운 peerConnection을 생성해야 한다는 것이다.
   2. Join할 때 생성한 peer connection은 A의 것이고, offer를 받는 이벤트는 B가 받을 것이므로 B도 peerConnection을 생성해야 한다
      1. → Peer는 1대1로 맺는 거기 때문에 A,B,C가 있을 때 A-B, A-C, B-C 이렇게 Peer Connection이 생성되어야 한다. Peer Connection 객체는 사실 상 6개인 셈이다.
      2. 각자의 Peer Connection에 상대의 정보를 저장해두어야 하므로..
   3. 이제, setRemoteDescription 로 받은 offer 를 리모트에 넣어둔다.
   4. 이제 전달해줄 answer를 생성하고 answer는 내 것이므로 local description에 설정 후 socket의 answer 이벤트로 보내준다.
5. socket.on(RTC_MESSAGE.ANSWER) : 상대방의 answer를 받는 부분이다.
   1. 파라미터로 보낸 사람의 socketId를 받아야 한다. 기존에 on(’join’) 에서 저장해두었던 peer connection에서 socketId를 기준으로 누구와 맺은 커넥션인지 찾은 후, 그 커넥션에 리모트로 answer를 추가해준다.
6. socket.on(RTC_MESSAGE.ICE_CANDIDATE) : 상대방의 candidate를 받는 부분이다.
   1. 마찬가지로 파라미터로 보낸 사람의 socketId를 받고, 누구와 맺은 커넥션 인지 찾은 후 addIceCandidate 로 candidate를 추가해준다.
7. socket.on(RTC_MESSAGE.DISCONNECTED) : 상대방이 나갔을 경우 peer connection과 participants에서 상대방을 삭제한다.

 

내가 이해한 내용으로 주저리주저리 정리해보았는데 나만 아는 언어로 정리할 거 같기도 하고.. 나름 나중에 봐도 쉽게 이해할 수 있도록 자세하게 적어놨다 ..!😊
노션에 정리한 링크도 첨부한다.
https://saber-ash-4ab.notion.site/React-TypeScript-WebRTC-1defea4ed489417fb4ce9c7a047291f7

React+TypeScript+WebRTC 구현하기

 

레퍼런스

https://dareun.github.io/webRTC를-이용한-화상회의-개발
https://velog.io/@gojaegaebal/210307-개발일지90일차-정글-나만의-무기-프로젝트-WebRTC란-무엇인가2-ICE-SDP-Signalling
https://medium.com/@hyun.sang/webrtc-webrtc란-43df68cbe511
https://kbs77.tistory.com/102
https://surprisecomputer.tistory.com/14
https://chuun92.tistory.com/39
https://web.dev/webrtc-infrastructure/