[리액트] ICE candidate

Network 정보 (ICE Candidate) 교환하기

세상 어딘가에 있는 상대 peer 를 찾아 연결을 맺기 위해선, 네트워크 정보를 교환해야합니다. 이 때, 중간 매개자 역할로서 별도의 서버인 Signaling Server 가 필요합니다. 순서는 다음과 같습니다.

step do

1 RTCPeerConnection Object 를 새롭게 생성하고 RTCPeerConnection.onicecandidate 핸들러를 통해 현재 내 client 의 Ice Candidate(Network 정보) 가 확보되면 실행될 callback 을 전달합니다.

2 Ice Candidate (내 네트워크 정보) 가 확보되면, 중간 매개자인 Signaling Server 을 통해 상대 peer 에게 serialized 된 ice candidate 정보를 전송합니다. (쌍방이 서로에게 합니다.)

3 상대 peer 의 candidate (네트워크 정보) 가 도착하면, RTCPeerConnection.addIceCandidate 를 통해 상대 peer 의 네트워크 정보를 등록합니다. (쌍방이 모두 합니다.)

Media Capability 교환하기 + Session Control Message 교환하기

상황을 가정해봅시다. A 와 B 가 webRTC 통신을 하려고합니다. 각자 브라우저에서 RTCPeerConnection 객체를 가지고 있고, 서로의 네트워크 정보 (ice candidate) 를 교환 후 각자의 RTCPeerConnection.addIceCandidate 를 통해 서로의 네트워크 정보를 등록하였습니다.

step do

1 B 가 RTCPeerConnection.createOffer 를 호출해 Offer SDP (Session Description Protocol) 을 생성합니다. 여기엔 내 브라우저에서 사용 가능한 코덱이나 해상도에 대한 정보가 들어있습니다.

2 B 가 Offer SDP 를 Signaling Server (매개자) 을 통해 전송합니다.

3 A 는 Signaling Channel 에서 Offer SDP 를 받아, RTCPeerConnection.setRemoteDescription 을 수행합니다.

4 A 의 RTCPeerConnection 객체는 상대 session 에 대한 정보를 알고 있게 되었고, RTCPeerConnection.createAnswer 를 호출하여 Answer SDP 를 생성하여 Signaling Channel 을 통해 B 에게 전달합니다.

5 B 도 마찬가지로 자신의 RTCPeerConnection.setRemoteDescription 을 호출해, 전달받은 Answer SDP 를 등록합니다.

6 A, B 각 측에서 setRemoteDescription 이 성공적으로 수행되었다면, 각 브라우저에서는 서로의 peer 에 대해 인지하고 있는 상태라고 할 수 있고, p2p 연결이 성공적으로 완료되었다고 할 수 있습니다.