[WebRTC] WebRTC란?

브라우저에서 별도의 소프트웨어 없이 실시간으로 통신을 가능하게 해주는 웹을 위한 오픈 프레임워크이다.
비디오와 음성 채팅 어플리케이션에서 사용되는 오디오와 비디오와 같이 높은 퀄리티의 의사소통을 위한 기본적인 것들을 포함한다.
보통 브라우저에서 실행할때 JavaScript API를 통해 실행할 수 있어 개발자들로 하여금 쉽게 RTC web app을 실행하는 것이 가능하다.
또한 WebRTC는 W3C와 IETF에서 API레벨과 Protocol 레벨을 표준화했다.
그리고 무엇보다 세계 최고 IT기업인 Google과 Mozila, Opera에서 든든하게 지원을 해준다.

한번 WebRTC API를 살펴보자

🔍 getUserMedia

사용자가 자신의 디바이스를 스트림을 할 수 있도록 허가를 받는 API

navigator.mediaDevices.getUserMedia(StreamConstraints).then(function(stream) {
	localStream = stream;
    localVideo.srcObject = stream;
}

🔍 RTCPeerConnection

local Media Stream으로 P2P connection을 통해 RTC object를 보낼 수 있게 해준다 ( 상대방에게 음성과 영상을 공유 )

RTCPeerConnection을 통해 사용자간의 어떠한 방식으로 통신일 될까??

아래는 유명한 엘리스와 이브의 이야기를 가지고 잘 설명한 글이다

앨리스가 RTCPeerConnection 객체를 생성합니다.
앨리스가 *createOffer()* 메소드를 사용하여 제안(SDP Session Description)을 생성합니다.
앨리스가 제안과 함께 *setLocalDescription()*를 호출합니다.
앨리스는 제안을 문자열화하고 시그널링 메커니즘을 이용하여 이브에게 보냅니다.
이브는 앨리스의 제안을 가지고 *setRemoteDescription()*를 호출하였으므로 그녀의 RTCPeerConnection가 앨리스의 설정을 알게됩니다.
이브는 em>createAnswer()를 호출하고 이에 대해 로컬 세션 정보(Local Session Description), 즉 이브의 **응답**을 인자로 전달하는 성공 콜백 함수를 호출합니다.
이브는 *setLocalDescription()*의 호출을 통해 그녀의 응답을 로컬 기술(Description)으로 설정합니다.
그리고나서 이브는 시그널링 메커니즘을 사용하여 그녀의 문자열화된 응답을 앨리스에게 다시 전송합니다.
앨리스는 *setRemoteDescription()*을 사용하여 이브의 응답을 원격 세션 기술(Description)으로 설정합니다.