[WebRTC] WebRTC란 무엇일까?

🎞 WebRTC란 무엇인가?

Web Real-Time Communication의 약자로 웹/앱에서 별다른 소프트웨어 없이 카메라, 마이크 등을 사용하여 실시간 커뮤니케이션을 제공해주는 기술이다.

• 우리가 잘 알고있는 화상통화, 화상 공유등을 구현할 수 있는 오픈소스
• 비디오, 음성 및 일반 데이터가 P2P방식으로 피어간의 전송되도록 지원
• JavaScript API로 제공
• 알아야할 용어 및 개념
  • data streams, STUN/TURN servers, signaling, JSEP, ICE, SIP, SDP, NAT, UDP/TCP, network socket 등 

 

💁‍♀️ WebRTC의 장점과 단점

1. 장점

[1] Latency가 짧다.

우리가 흔히 알고있는 인스타라이브, 유튜브라이브, 트위치 등은 RTMP를 사용하여 실시간 스트리밍을 하고 있다.

그에 반해 WebRTC는 낮은 Latency를 가지고 있고 REAL-TIME과 비슷한 방송을 할 수 있다.

출처 : https://www.google.com/url?sa=i&url=http%3A%2F%2Fwww.castware.co.kr%2F&psig=AOvVaw2fGjWhQzaDRPS3nutenxaY&ust=1610809531386000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCMjRnqWbnu4CFQAAAAAdAAAAABAJ

cf) WebRTC보다 Latency가 짧은 기술도 존재하는데, 왜 인지 모르겠지만 WebRTC를 구글에서 밀고 마케팅도 하는 것 같다.

[2] 별 다른 소프트웨어 없이 실시간 커뮤니케이션이 가능하다.

웹/앱으로 방송을 키고 싶을 때, 별도의 플러그 인이나 미디어 송출 관련 소프트웨어를 따로 설치할 필요가 없다.

 

[3] 개발하는 데 있어 진입장벽이 낮다.

 

[4] 무료다.

---

2. 단점

[1] 크로스 브라우징 문제

WebRTC는 현재 Chrome, Opera, Firefox 뿐만 아니라 안드로이드, iOS 등 브라우저, 앱에서 활용할 수 있다.

그러나, 사람들이 잘 사용하지 않는 브라우저나 최신 버전을 사용하지 않은 사용자는 사용이 불가능하다는 단점이 있다.

Internet Explorer는 지원되지않음.

 

[2] STUN/TURN 서버 필요

Peer to Peer 통신을 하기 위해서는 사용자의 IP주소를 알아야한다.

하지만, 대부분의 사용자는 방화벽등을 사용하고 다른 네트워크 상에서 연결이 이루어지기 위해서는

STUN/TURN 서버가 꼭 필요하다. 

 

관련개념 정리해놓은 자료 : gh402.tistory.com/45

[WebRTC] NAT, ICE, STUN, TURN 이란? ( WebRTC를 이해하기 위해 필요한 지식들)

관련 개념은 이 페이지에 정리를 해두었다. 

 

 

📪 WebRTC의 통신원리

출처 : https://www.cometchat.com/blog/webrtc-101-everything-you-need-to-know

Peer to Peer 통신은

위 그림과 같이 하나의 컴퓨터와 하나의 컴퓨터가 데이터를 주고 받는 형식이다.

즉, 동등 계층 간 클라이언트/서버의 개념이 없이 동등한 노드들로 구성되어 데이터를 주고 받는다.

 

 

💻 WebRTC sample API

[1] 미디어 기기 시작하기

media기기에 접근할 때 alert

// getUserMedia()
async function init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
    e.target.disabled = true;
  } catch (e) {
    handleError(e);
  }
}

document.querySelector('#showVideo').addEventListener('click', e => init(e));

 

 

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

 

 

 

  [2] RTCPeerConnection

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

 

  [3] RTCDataChannel

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

 

  [4] Other

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

 

 

5. 알아야할 용어

[1] data streams

연결지향통신에서 연속적으로 흘러나오는 데이터들의 흐름

데이터의 양이 한정되어 있지않고 끊임없이 생성되고 변하는 데이터의 흐름

 

[2] NAT(Network Address Translation)

NAT는 네트워크 주소 변환으로 IP패킷의 TCP/UDP 포트 숫자와 소스 및 목적지의 IP 주소 등을 재기록하면서 네트워크 트래픽을 주고 받는 기술이다.

 

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

 

 

[3] Signaling

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

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

시그널링은 P2P 스트리밍을 시작하기 전에 성공적으로 완료되어야 한다.

 

 

[4] SDP

SDP(Session Description Protocol) 

 

 

[5] JSEP

JSEP(JavaScript Session Establishment Protocol)제안/응답 아키텍처

 

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

[6] UDP/TCP

 

 

용어 관련해서는 따로 정리했다.

gh402.tistory.com/45

[WebRTC] NAT, ICE, STUN, TURN 이란? ( WebRTC를 이해하기 위해 필요한 지식들)

 

 

 

[ 참고자료 ]

1. webrtc.org/

2. webrtc.github.io/samples/

3. gocoder.tistory.com/1928

4. www.cometchat.com/blog/webrtc-101-everything-you-need-to-know

5. www.html5rocks.com/en/tutorials/webrtc/basics/