[Web API] WebRTC

WebRTC API

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API

 

WebRTC (Web Real-Time Communication)는 브라우저간 데이터 교환 뿐만 아니라 audio/video media를 캡쳐링(capturing) 하거나 스트리밍(streaming)할 수 있게 하는 기술이다.

 

 

Introduction to WebRTC protocols

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Protocols

 

NAT (Network Address Translation)

NAT는 사용자 장치에 public IP address를 주기 위해서 사용된다. 라우터는 public IP 주소를 가지며, 라우터에 연결되는 모든 장치는 private IP 주소를 가지게 된다. 라우터에 연결된 장치가 Request를 보내면, 라우터는 NAT를 사용하여 Request의 private IP 주소를 라우터의 public IP 주소로 변환시킨다.

 

STUN (Session Traversal Utilities for NAT)

STUN는 client의 public address를 찾고, peer간 직접연결을 방해하는 라우터(router)의 제한조건(restriction)을 식별하기 위한 프로토콜이다. STUN 서버는 client에게 client의 public address를 알려주고, NAT뒤로 접근이 가능한지 알려준다.

 

 

TURN (Traversal Using Relays around NAT)

라우터는 접속장치를 제한할 수 있는데, 접속이 제한될 경우, STUN 서버에서 public IP address 찾았다 하더라도 직접연결은 불가능하므로 TURN 서버를 사용해야한다. TURN 서버는 peer의 데이터를 받아서 상대 peer에게 직접 전달(relay)한다.

 

 

ICE (Interactive Connectivity Establishment)

ICE는 STUN과 TURN 서버를 사용하여 브라우저간 연결을 위한 프레임워크이다.

 

SDP (Session Description Protocol)

SDP는 resolution, formats, codecs, encryption 등과 같이 온라인 multimedia content를 기술하기 위한 표준으로서, media content 자체가 아니라 장치간 media를 공유하는 연결(connection)에 대한 metadata format이다.

 

 

WebRTC connectivity

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Connectivity

 

 

 

Signaling and video calling

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling

 

Offer 생성 및 Description 전달

RTCPeerConnection 생성자 함수를 이용하여 인스턴스를 생성하고 mediaStream을 연결한다. 생성자의 인수로 configuration이 들어가는데, iceCandidate을 찾아줄 STUN 서버와 TURN 서버정보가 포함되어 있어야한다. 로컬 네트워크에서는 해당변수가 없어도 된다. 각 서버의 동작확인은 Trickle ICE에서 확인할 수 있다.

// sender.js
let peerConnection = new RTCPeerConnection(configuration);
peerConnection.addTransceiver(mediaStreamTrack, { streams: [mediaStream] });

mediaStream을 연결하면, negotiationneeded 이벤트가 발생한다. 해당 이벤트 핸들러에서 Offer를 생성하고 Description을 receiver에 전달한다.

// sender.js
peerConnection.onnegotiationneeded = async function () {
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    let description = peerConnection.localDescription;
    // send description to receiver
}

 

Answer 생성 및 Description 전달

sender에서 보내온 Description을 등록한 뒤, Answer를 생성하고 Description을 sender에 전달한다.

// receiver.js
let peerConnection = new RTCPeerConnection();

let description; // from sender
// let description = new RTCSessionDescription(description);
await peerConnection.setRemoteDescription(description);

let answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
let description = peerConnection.localDescription;
// send description to sender

receiver에서 보내온 Description을 등록한다.

// sender.js
let description; // from receiver
// let description = new RTCSessionDescription(description);
await peerConnection.setRemoteDescription(description);

receiver의 RTCPeerConnection 인스턴스에 track이 추가되면 track 이벤트가 발생하며, RTCTrackEvent 객체의 streams 프로퍼티에 sender에서 전달 받은 mediaStream이 포함되어 있다.

// receiver.js
peerConnection.ontrack = function (evt) {
    let mediaStream = evt.streams[0];
    // ...
}

 

icecandidate 이벤트 처리

ICE agent가 상대 peer에게 메세지를 전달할 필요가 있을때 icecandidate 이벤트가 발생한다. 이벤트의 candidate 프로퍼티에 참조되는 RTCIceCandidate 객체를 상대 peer에게 전달한다.

// sender.js & receiver.js
peerConnection.onicecandidate = function (evt) {
    if (evt.candidate) {
        let candidate = evt.candidate;
        // send candidate to the other peer
    }
}

전달받은 RTCIceCandidate 객체를 아래와 같이 처리한다.

// sender.js & receiver.js
let candidate; // from the other peer
// let candidate = new RTCIceCandidate(candidate);
await peerConnection.addIceCandidate(candidate);

 

 

A simple RTCDataChannel sample

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample

 

 

RTCPeerConnection

RTCPeerConnection.createDataChannel()

- Parameters: label, options

- Return: RTCDataChannel

RTCPeerConnection.addIceCandidate()

RTCPeerConnection.createOffer()

RTCPeerConnection.setLocalDescription()

RTCPeerConnection.setRemoteDescription()

RTCPeerConnection.createAnswer()

RTCPeerConnection.addTransceiver()

- Parameters: trackOrKind, init(RTCRtpTransceiverInit)

RTCPeerConnection.ondatachannel

- Event handler

RTCPeerConnection.onnegotiationneeded

- Event handler

RTCPeerConnection.onicecandidate

- Event handler

RTCPeerConnection.ontrack

- Event handler

RTCPeerConnection.signalingState

- Value: "stable" | "have-local-offer" | "have-remote-offer" | "closed"

 

 

RTCDataChannel

RTCDataChannel.onopen

- Event handler

RTCDataChannel.onclose

- Event handler

RTCDataChannel.readyState

 

 

RTCSessionDescription

 

 

References

https://codelabs.developers.google.com/codelabs/webrtc-web

https://www.html5rocks.com/en/tutorials/webrtc/basics/

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

 

https://webrtc.github.io/samples/

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/The_about_protocol

https://stackoverflow.com/questions/32137156/webrtc-determine-which-turn-server-is-used-in-peerconnection