on
Real-time Communication with WebRTC
Real-time Communication with WebRTC
2021년 SW·AI 해커톤의 '비대면 AI 시험 감독관' 이라는 주제로 해커톤을 나가게 되어 실시간으로 영상을 받아오기 위해 WebRTC를 사용하였다. 네트워크 관련해서는 학교에서 컴퓨터 네트워크 수업 한번 들어본게 전부였지만 해커톤을 진행하려면 실시간 영상이 필수적이었기에 무작정 시작하게 되었다..
WebRTC (Web Real-Time Communications)
WebRTC는 말 그래도 Web(브라우저) RTC(실시간 통신) 이라는 뜻으로 웹 브라우저(및 Android, IOS에서도 사용 가능한)에서 플러그인 없이 직접적으로(p2p) 통신할 수 있도록 설계된 API로, 오디오, 비디오 및 데이터의 실시간 통신을 할 수 있도록 해주는 기술이다. 이 웹 브라우저 기반의 통신 방식인 WebRTC는 구글이 오픈 소스화한 프로젝트에서 시작되어, W3C가 API를 정의하였다. WebRTC의 네트워크는 기본적으로 P2P(Peer To Peer) 통신에 매우 최적화 되어 있다. 상황에 따라서 SFU(Selective Forwarding Unit) 나 MCU(Multi-point Control Unit)를 사용할 수도 있다.
공부하기에 앞서 아래 demo페이지에서 체험해볼 수 있다.
appr.tc
appr.tc 페이지 접속 후 브라우저에서 Webcam을 사용하도록 허용한 뒤, 하단에 표시된 URL로 다른 디바이스의 브라우저에서 접속하면 간단하게 양방향 비디오 전송을 확인할 수 있다.
https://rtcmulticonnection.herokuapp.com/demos/
WebRTC의 기능
WebRTC API는 오픈소스이며, 무료이고, 표준화되었으며, 웹브라우저에 내장되어 있어 효율적이다. 다음과 같은 기능을 제공한다.
로컬 디바이스에서 스트리밍 오디오, 비디오, 데이터 가져오기
IP 주소, 포트 등의 네트워크 정보를 가져와 다른 WebRTC 클라이언트와 교환 (이 과정에서 NAT, 방화벽을 통과해야 한다.)
에러 보고 및 세션의 초기화와 종료를 위한 시그널링 통신 관리
해상도와 코덱 같은 미디어 클라이언트 수용 능력 정보 교환
스트리밍 오디오, 비디오, 데이터 수신 및 전송
https://www.webrtc-experiment.com/
WebRTC의 실시간 데이터 교환은 대체로 3가지 Javascript API에 의해 일어난다. 링크를 클릭하면 데모를 체험할 수 있다.
getUserMedia(MediaStream)
RTCPeerConnection : 피어 간 오디오, 비디오 통신을 활성화한다. 신호 처리, 코덱 관리, P2P 통신, 보안, 대역폭 관리 수행
: 피어 간 오디오, 비디오 통신을 활성화한다. 신호 처리, 코덱 관리, P2P 통신, 보안, 대역폭 관리 수행 RTCDataChannel : 피어 간 양방향 임의 데이터 통신을 허용한다. (일반적인 P2P 통신)
위와 같은 3가지의 객체를 통해 실시간으로 데이터를 교환하며, RTCPeerConnection들이 적절하게 신호를 주고 받으면서 데이터 교환을 이루는 것을 Signaling (신호 전달 서버) 라고 한다.
또한 데이터가 P2P로 교환되어야 하므로 2명의 유저가 데이터를 교환해야 한다. 데이터 교환을 요청하는 콜러(Caller)와 교환받는 콜리(Callee)에 의해 유저 2명의 실시간 데이터 교환이 일어난다.
WebSocket vs WebRTC
WebSocket과 WebRTC 모두 양방향(bi-directional) 및 전이중 통신(Full-duplex)을 지원한다는 공통점이 있지만, 아래와 같은 차이점을 가진다.
WebSocket WebRTC A Client Server Archetecture
Runs Over TCP allowing direct peer-to-peer communication
Runs Over UDP
출처
https://codelabs.developers.google.com/codelabs/webrtc-web/#0
https://ko.wikipedia.org/wiki/WebRTC#cite_ref-getusermedia_9-0
from http://suthink.tistory.com/15 by ccl(A) rewrite - 2021-10-02 19:27:18