[노마드코더] 줌 클론 코딩 - 8. WebRTC 통신

WebRTC란?

WebRTC API - Web API | MDN

• Web Real-Time Communication : 웹 기반 실시간 통신을 가능하게 해주는 기술.
• peer-to-peer

기존 web socket 통신은 한 서버에 많은 web socket들이 연결되어 있었고, 메시지를 보낼 때 서버로 보내진 후 서버가 해당 그 메시지를 모두에게 전달하는 방식이었다.

WebRTC는 브라우저간 peer-to-peer 통신을 하여 영상 및 오디오, 텍스트 등이 서버로 가지 않는다. 이 덕분에 서버의 중계 없이 클라이언트 브라우저간 실시간(real time)으로 고속으로 통신이 가능하다.

초기 Signaling 시에만 서버를 통해 클라이언트 브라우저를 확인한다. IP 주소, 방화벽 여부, 가용 포트 번호 등을 서버가 중계자로서 확인 동작한다. 따라서 브라우저는 서버에 간단한 configuration 정보만 전달하게 된다. 해당 Sigaling 이후에는 클라이언트 간 채널이 형성되어 Peer-to-Peer로 직접 연결된다.


이후 구현으로 socket.io를 활용하여 signaling을 위해 서버와의 통신으로 web socket을 사용하고 이후 peer-to-peer로 이전에 구현한 stream을 전송한다.

home.pug

app.js
방 구현을 위해 call 부분을 hidden처리한다.

- 초기 방 입장할 때 startMedia()를 서버로 emit의 인자로 넣음으로써 방 입장이 완료된 이후에 미디어가 세팅된다.

server.js

WebRTC 구현

다음은 WebRTC 통신을 구현하기 위한 프로토콜 설명입니다.

1. Offer 보내기

브라우저간 RTC 통신을 하기 위해서는 먼저 "offer" 시그널을 보내야 한다. 그러기 위해서 양 쪽 브라우저에 RTC 연결 통로를 만들어야 한다. 이후 이 peer-to-peer 연결 안에 영상과 오디오 데이터들을 넣어 전송하여 통신한다.

• getMedia() - 영상, 음성 받아오기 (이미 앞서 구현했다.)
• addTrack() - 해당 (영상, 음성) 데이터를 peer connection에 넣기
• createOffer() - peerA가 offer을 생성하여 서버로 보내고, peerB가 이를 받고 createAnwer()을 답한다.
  • 여기서 peerA는 방에 먼저 들어와 있던 사람이고, peerB는 방을 들어가려고 하는 사람이다.
• setLocalDescription() - offer로 연결을 구성
• send offer - socket.io의 emit을 통해 위의 offer을 서버 측으로 전달한다.

app.js

server.js

2. Answer

• setRemoteDescription() - peerA가 보낸 offer을 수신 후 peerA의 description을 세팅한다.
• getMedia()
• addTrack()
• createAnswer() - peerB가 answer를 생성한다
• serLocalDescription() - answer로 연결 구성
• send answer - socket.io의 emit을 통해 위의 answer을 서버 측으로 전달한다.

app.js

- PeerB의 setRemoteDescription시 offer수신 이후 실행되어야 하므로 타이밍 조절을 위해 initCall의 실행 순서를 수정했다.

server.js

3. icecandidate

RTCIceCandidate - Web API | MDN

offer와 answer 수신을 모두 마쳤을 때, peer-to-peer 연결 양쪽에서 icecandidate 이벤트가 실행된다.
Icecandidate(Internet Connectivity Establishment, 인터넷 연결 생성)은 WebRTC에 필요한 프로토콜들을 의미한다.

• icecandidate event를 listen
• ICECandidate 추가

- 우선 각 socket 통신 과정에 console.log()를 통해 확인한다.

- makeConnection 과정에서 아래 icecandidate 이벤트를 리스너와 연결했다.

app.js

- ice이벤트 핸들러 함수는 "ice" 이벤트에 대해 data의 candidate 부분과, 현재 방 이름을 서버에 전송한다.

server.js

- 서버는 해당 icecandidate에 대해 다시 전달하는 역할을 한다.

app.js

- 해당 ice candidate를 다시 수신할 수 있도록 하고, addIceCandidate()를 통해 해당 ice를 연결한다.

- 두 개의 브라우저를 연결해 본 결과 해당 절차대로 진행되었다.

4. addstream event 등록 -> 스트림을 받음

WebRTC의 마지막 절차로 addstream 이벤트를 등록한다.

- makeConnection 함수에 addstream 이벤트를 추가했다. stream id를 통해 브라우저별 상대방의 id를 확인할 수 있다.

home.pug

app.js

해당 stream을 video 요소에 넣으면 최종적으로 서로 간의 화면을 확인할 수 있다.