SDP 와 Candidate – WebRTC

WebRTC의 SDP와 Candidate 흐름도를 간단하게 요약했다. 전체적인 구조를 살펴보려면 아래 사이트를 먼저 방문하길 바란다.

https://www.html5rocks.com/ko/tutorials/webrtc/infrastructure/

WebRTC

외부 프로그램을 사용하지 않고 브라우저만으로 영상 통화를 하는 것은 정말로 흥미진진한 일이다. WebRTC라는 이름으로 W3CIETF에서 표준화 진행중이다. W3C에서는 WebRTC 1.0 라는 이름으로 Candidate Recommendation 까지 왔다. IETF에서는 rtcweb(Real-Time Communication in WEB-browsers) 이라고 부른다. 세 개의 브라우저, 안드로이드, 아이폰을 지원하는데 최근에는 애플이 Safari에서도 WebRTC를 지원하겠다고 발표해서 지원 브라우저가 하나 더 늘었다. 그렇지만 아직 webrtc.org에서 Safari 브라우저를 공식 지원하는 것은 아니다. 브라우저 사이에 호환성 문제는 WebRTC adapter 오픈 소스를 사용하여 지원할 수 있는데 이 소스는 최신 커밋이 20일 전일 정도로 최신이다. 이 소스를 사용하는 WebRTC 지원 SimpleWebRTC 라이브러리 찾았다. 이 라이브러리의 데모를 온라인에서 테스트 할 수 있다.

WebRTC는 사용자에게 카메라와 마이크 사용허가를 꼭 받는다. 이 위의 데모 사이트에서 카메라와 마이크 사용을 허가했다면 카메라에서 읽어 들인 동영상을 바로 확인할 수 있다. 자신을 향해 손 한번 흔들어 보자. 이 서비스에서 방을 만들면 링크 주소를 제공하는데 이 주소를 사용하여 여러 탭을 열어보자. 탭을 3개 정도 열어서 영상 통화 하는데는 문제 없었다.

SDP 와 Candidate

브라우저에서 제공하는 WebRTC JavaScript 인터페이스를 사용하면 영상 통신을 바로 제공할 수 있을 것 같지만 사실은 브라우저 말고 서버가 더 필요하다. 영상을 교환하는 브라우저는 서로 SDP와 Candidate를 주고 받아야 한다. SDP 정보는 WebRTC의 RTCPeerConnection 객체를 사용할 때 꼭 필요하다. 미디어를 전송하기 위한 설정 값이다. 그리고 미디어를 전송하고 전송받는 브라우저의 네트워크 정보가 필요하다. ICE 프레임워크를 사용하여 상대방 브라우저의 네트워크 연결 정보를 찾는데 이 기능은 브라우저에 내장되어 있으며 후보 리스트를 교환하는 방식으로 이루어진다.

Interactive Connectivity Establishment (ICE)
https://tools.ietf.org/html/rfc5245
ICE makes use of the Session Traversal Utilities for NAT (STUN) protocol and its extension, Traversal Using Relay NAT (TURN).

중요한 점은 미디어 전송이 이루어지기 전에 SDP와 네트워크 연결 정보인 후보 리스트가 교환되야 한다는 것이다. 이 두 가지 정보를 주고 받기 위해서는 교환 장소가 필요한데 이런 서비스를 제공하는 서버가 필요하다. 말하자면 위의 데모는 내부적으로 자신만이 아는 서버와 이미 통신을 하고 있는 것이다. 이 값들을 어떻게 주고 받는지 알기 위해 좀 더 많은 로그를 출력하는 다른 예제를 살펴봤다.

JOIN 버튼을 선택하면 내 카메라가 비추는 모습을 볼 수 있다. 다른 브라우저와 접속한 것은 아니다. 우리는 아직 혼자서 카메라 영상을 보고 있다. 아래 로그를 확인하면

Retrieved ICE server information.
Signaling channel opened.
C->GAE: {“sdp”:”v=0\r\no=- 28…
C->GAE: {“type”:”candidate”,”…

다른 브라우저와 연결되지 않은 상황에서도 이미 세 종류의 서버와 통신하고 있는 것을 알 수 있다. 그렇지만 이런 서버의 동작 방식을 WebRTC가 정의 하는 것은 아니다. 시간 순으로 나열하면 아래와 같다.

이제 두 브라우저에서 서로 영상을 주고 받자. https://appr.tc/에서 보이는 영상 아래에 보면 아래와 같은 링크가 보인다.

Waiting for someone to join this room: https://appr.tc/r/

이 링크를 클릭하면 브라우저 다른 탭이 생성되고 화면 하단에 JOIN 버튼이 나타난다. 처음 브라우저 화면을 Alice라고 하고 지금 보고 있는 화면을 Eve라고 하자. Eve에서 JOIN 버튼이 누른다. 우선, 브라우저 탭을 변경하여 Alice 로그를 먼저 살펴본다.

WSS->C: {“msg”:”{\”sdp\”:\”v=0\\r\\no=-…
WSS->C: {“msg”:”{\”type\”:\”candidate\”…

웹 소켓으로 SDP와 Candidate를 받고 있다. 물론 이 값들은 Eve가 전송한 값들이다. Alice는 이 정보를 WebRTC에게 전달하여 영상 전송 설정을 마친다. 그렇다면 Eve의 동작은 어떤지 보자. https://appr.tc/join/ 링크를 클릭하면 https://appr.tc/join/ 서버로부터 접속 정보를 잃어오는데 이 정보에는 Alice의 SDP와 Candidate 정보가 포함되어 있다. Eve는 Alice의 SDP를 사용하여 자신의 SDP를 생성하고 이 값을 웹 소켓을 사용하여 전달한다.

Retrieved ICE server information.
Signaling channel opened.
C->WSS: {“sdp”:”v=0\r\no=- 2…
C->WSS: {“type”:”candidate”,…

간단하게 흐름도를 그렸다.

SDP와 Candidate 흐름도
SDP와 Candidate 흐름도

마무리

Safari가 WebRTC 기능을 넣는 추세를 볼 때 점점 지원하는 브라우저가 늘어갈 것이다. W3C에서도 주목하는 기술이다. WebRTC 데모 서비스에서 share screen 버튼을 눌러보자 브라우저 화면을 공유할 수 있다. 이 얼마나 상상력을 자극하는 기능인가! 더불어 다른 여러 WebRTC Clients들에서도 테스트해 보길 바란다.

이제 더 이상 브라우저에서 실시간 동영상 주고 받는 것은 특별하지 않다. 크롬의 경우 chrome://webrtc-internals/ 주소를 사용하여 내부를 더 들여다볼 수 있다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.