CS

[WebRTC] WebRTC란?

sujin7837 2022. 6. 27. 22:10
반응형

WebRTC란?

WebRTC는 Web Real-Time Communication의 약자입니다. 웹/앱(안드로이드, iOS) 등에서 다른 소프트웨어 없이 카메라, 메이크 등을 이용해서 실시간 커뮤니케이션을 할 수 있도록 하는 기술입니다. 화상통화나 화상 공유 등을 구현할 수 있는 오픈소스를  JavaScript API로 제공합니다. 비디오, 음성 및 일반 데이터가 P2P 방식으로 전송되도록 지원해줍니다.

 

MDN의 WebRTC 문서에서는 'WebRTC는 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술'이라고 정의하고 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API

 

WebRTC API - Web API | MDN

WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는

developer.mozilla.org

 

WebRTC의 장단점

장점

1. Latency가 짧습니다.

인스타 라이브, 유튜브 라이브, 트위치 등은 RTMP를 사용하여 실시간 스트리밍을 제공합니다. WebRTC는 RTMP보다 짧은 Latency를 가지고 있어 지연 시간이 거의 없기 때문에 실시간(Real-Time)에 가까운 방송을 할 수 있습니다.

 

2. 다른 소프트웨어 없이 실시간 커뮤니티가 가능합니다.

별도의 플러그인이나 미디어 송출 관련 소프트웨어를 설치할 필요가 없이 이용 가능합니다.

 

3. 개발 진입 장벽이 낮습니다.

개발 진입 장벽이 낮고, 사용이 간편합니다.

 

4. 무료입니다.

 

단점

1. 크로스 브라우징 문제가 있습니다.

WebRTC는 Chrome, Opera, Firefox, 안드로이드, iOS 등 다양한 브라우저와 앱에서 활용 가능합니다. 그러나 사용도가 낮은 일부 브라우저나 최신 버전을 사용하지 않는 경우 이용이 불가능합니다. 

 

2. STUN/TURN 서버가 필요합니다.

P2P(Peer-to-Peer) 통신을 하기 위해서는 사용자의 IP 주소를 알아야 합니다. 하지만 대부분의 사용자는 방화벽 등을 사용하고 다른 네트워크 상에서 연결이 이뤄지기 위해서는 STUN/TURN 서버가 꼭 필요합니다.

 

WebRTC 통신 원리

P2P 방식의 커뮤니케이션으로, 다음과 같은 절차를 밟아야 합니다.

 

1. 각 브라우저가 P2P 커뮤니케이션에 동의

2. 서로의 주소를 공유

3. 보안 사항 및 방화벽 우회

4. 멀티미디어 데이터를 실시간으로 교환

 

WebRTC 프로토콜 소개

ICE(Interactive Connectivity Establishment)

ICE는 브라우저가 peer를 통한 연결이 가능하도록 해주는 프레임워크입니다. Peer A에서 Peer B까지 단순하게 연결하는 것으로는 작동하지 않는 이유가 몇가지 존재합니다. 연결을 시도하는 방화벽을 통과해야 하거나, 단말에 Public IP가 없다면 유일한 주소값을 할당해야 하거나, 라우터가 peer 간의 직접 연결을 허용하지 않으면 데이터를 릴레이해야 할 경우도 있습니다. ICE는 이러한 작업들을 수행하기 위해 STUN과 TURN 서버 중 적어도 하나 이상을 사용합니다.

 

STUN(Session Traversal Utilities for NAT)

STUN(단축어 안의 단축어)은 public address(공개 주소)를 발견하거나 peer 간의 직접 연결을 막는 등의 라우터 제한을 결정하는 프로토콜입니다. 클라이언트는 인터넷을 통해 클라이언트의 공개 주소와 라우터의 NAT 뒤에 있는 클라이언트가 접근 가능한지에 대한 답변을 위한 요청을 STUN 서버에 보냅니다.

출처 : https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API/Protocols

 

NAT(Network Address Translation)

NAT는 단말에 공개 IP 주소를 할당하기 위해 사용됩니다. 라우터는 공개 IP 주소를 갖고 있고 모든 단말들은 라우터에 연결되어 있으며, 비공개 IP 주소를 갖고 있습니다. 요청은 단말의 비공개 주소로부터 라우터의 공개 주소와 유일한 포트를 기반으로 번역될 것입니다. 이러한 경유로 각각의 단말이 유일한 공개 IP 없이 인터넷 상에서 검색될 수 있는 방법입니다. 어떠한 라우터들은 네트워크에 연결할 수 있는 제한을 가지고 있어서 STUN 서버에 의해 공개 IP 주소를 발견하더라도 모두가 연결을 할 수 있는 것은 아닙니다. 이를 위해 TURN이 필요합니다.

 

어떤 라우터들은 Symmetric NAT이라 불리는 제한을 위한 NAT를 사용합니다. 즉, peer들이 이전에 연결한 적이 있는 연결들만 허용한다는 것입니다.

 

TURN(Traversal Using Relays around NAT)

TURN은 TURN 서버와 연결하고 모든 정보를 그 서버에 전달하는 것으로, Symmetric NAT 제한을 우회하는 것을 의미합니다. 이를 위해 TURN 서버와 연결한 후 모든 peer들에게 서버에 모든 패킷을 보내고 다시 나에게 전달해달라고 해야 합니다. 이것은 명백히 오버헤드가 발생하므로, 이 방법은 다른 대안이 없는 경우에만 사용합니다.

출처 : https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API/Protocols

 

SDP(Session Description Protocol)

SDP는 해상도나 형식, 코덱, 암호화 등 멀티미디어 컨텐츠의 연결을 설명하기 위한 표준입니다. 이것은 두 개의 peer가 다른 한 쪽에서 데이터가 전송되고 있다는 것을 알게 해주며, 기본적으로 미디어 컨텐츠 자체가 아닌 컨텐츠에 대한 메타데이터 설명이 됩니다. 기술적으로 보면 SDP는 프로토콜이 아니지만, 데이터 포맷은 디바이스 간의 미디어를 공유하기 위한 연결을 설명하기 위해 사용됩니다.

출처 : https://wormwlrm.github.io/2021/01/24/Introducing-WebRTC.html

 

WebRTC sample API

1. getUserMedia()

  • media 기기(카메라, 마이크)에 접근합니다.
  • alert로 마이크와 카메라 허용/거부 등으로 Permission이 뜹니다.
  • drawImage()를 통해 순간 이미지를 저장할 수도 있습니다.
  • 이미지에 filter를 씌울 수도 있습니다.
  • audio만 단독으로 사용할 수도 있고, 녹화할 수 있는 기능도 있습니다.

출처 : https://gh402.tistory.com/38

async function getMedia(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}

아래와 같은 방식으로 코드를 작성할 수도 있습니다.

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* use the stream */
})
.catch(function(err) {
  /* handle the error */
});
// 메서드 사용
getUserMedia(constraints)

 

2. RTCPeerConnection

  • 두 peer 간의 안정적이고 효율적인 통신을 설정하고 관리합니다.
  • 신뢰할 수 없는 네트워크에서도 실시간 통신을 가능하게 합니다.
  • Chrome, Opera, Firefox에서도 지원됩니다.

출처 : https://gh402.tistory.com/38

 

3. RTCDataChannel

  • peer 간의 연결을 통해 데이터를 보냅니다.
  • text, file, data 등을 전송할 수 있습니다.

출처 : https://gh402.tistory.com/38

4. 그 외

  • Select sources & outputs : 사용 가능한 오디오, 비디오 등이 여러 개가 있을 경우 선택 가능하도록 합니다.
  • Stream capture : 재생하고 있는 비디오를 캡처할 수 있는 기능입니다.

 

WebRTC 관련 추가 용어

data streams

연결 지향 통신에서 연속적으로 흘러 나오는 데이터들의 흐름을 말합니다. 데이터의 양이 한정되어 있지 않고, 끊임없이 생성되고 변합니다.

 

Signaling

P2P 통신이 일어나기 전(데이터가 전송되기 전)에 세션 제어 메시지, 네트워크 구성, 미디어 기능 등의 정보를 교환하는데 사용합니다.

  • 세션 제어 메시지 : 통신을 초기화하거나, 닫고 오류를 보고합니다.
  • 네트워크 구성 : 외부 세계 컴퓨터의 IP 주소와 포트는 무엇인지 파악합니다.
  • 미디어 기능 : 브라우저와 통신하려는 브라우저에서 처리할 수 있는 코덱과 해상도는 무엇인지 파악합니다.

Signaling은 P2P 스트리밍을 시작하기 전에 성공적으로 완료되어야 합니다.

 

JSEP(JavaScript Session Establishment Protocol) 

시그널링 모델

 

 

 

 

출처 : https://gh402.tistory.com/38,

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

반응형

'CS' 카테고리의 다른 글

[WebSocket] 웹소켓(WebSocket)이란?  (0) 2022.06.28

'CS'의 다른글

  • 현재글[WebRTC] WebRTC란?

관련글

댓글

티스토리툴바