이 글의 목적
갑자기 저의 장난감 웹사이트 원모 싸이버 스쿨 안에다 사이버 화상 술자리 기능을 넣고 싶어 진 것입니다.
그래서 화상채팅을 뭘로 만드나 찾아보다가 WebRTC를 알게 됐습니다.
그리고 원모 싸이버 술 먹방을 다 만들고 보니 뭔가 아쉽더라고요...
너무 겉만 핥은 느낌이었습니다...
언젠가는 좀 더 깊게 알고 사용해보고 싶다는 생각을 하게 되었고...
그래서 나중에 WebRTC를 이용한 작업을 할 때를 보면 좋겠다 싶은 내용을 블로그에 정리해두려고 합니다.
다른 분들도 이 글을 통해 정보를 얻을 수 있기를 바랍니다!
WebRTC and HTML5 could enable the same transformation for real-time communications that the original browser did for information.
Phil Edholm
— NoJitter
브라우저로 단순히 웹 페이지로 정보를 공유할 수 있게 함으로써 세상이 엄청 좋아졌지요?
이전에는 도서관에 가서 찾아봐야 할 정보들을 인터넷 연결만 있다면 대부분 찾아볼 수 있게 되었습니다.
WebRTC에 기여한 사람들이 실시간 비디오/오디오/데이터 커뮤니케이션을 간단히 브라우저만으로도 가능하게 해 줌으로써,
또 한 번 세상에 엄청 큰 편리함을 주고자 한다는 착한 마음씨를 느낄 수 있었습니다.
아래 링크 자료를 보고 느꼈다 이말입니다.
http://io13webrtc.appspot.com/#1
On one hand, we have STUN, which is cheap, but doesn't always work. And on the other, we have TURN, which always works, but has an operational cost. Fortunately, we can get the best of both worlds. WebRTC uses a mechanism called ICE, Interactive_Connectivi
io13webrtc.appspot.com
포스팅을 작성하기 전에
이 자료와 함께 제가 읽어 본 자료들
시원하게 공유 먼저 하겠습니다.
Get Started with WebRTC - HTML5 Rocks
WebRTC provides plugin-free, real-time communication for video, audio and data.
www.html5rocks.com
3. WebRTC 구현하기(1:1 P2P)
WebRTC 이론부터 구현까지 1. WebRTC 정리하기 2. WebRTC 구현 방식 3. WebRTC 구현하기(1:1 P2P) 4. WebRTC 구현하기(1:N P2P) 5. WebRTC 구현하기(1:N SFU) 6. WebRTC 성능 비교(P2P vs SFU) 1. 서론 이전까지의..
surprisecomputer.tistory.com
WebRTC
An open framework for the web that enables Real-Time Communications (RTC) capabilities in the browser.
webrtc.org
https://www.itfind.or.kr/WZIN/jugidong/1993/file591815871238072453-199302.pdf
https://www.koreascience.or.kr/article/CFKO201435553773340.pdf
https://www.youtube.com/watch?v=DvlyzDZDEq4 : node.js express + socket.io + peerjs로 화상채팅 만들기 튜토리얼
https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API/Protocols
WebRTC 프로토콜 소개 - Web API | MDN
이 글은 WebRTC API에 대한 프로토콜을 소개하기 위해 작성 되었습니다.
developer.mozilla.org
https://www.diva-portal.org/smash/get/diva2:1480111/FULLTEXT01.pdf
https://www.youtube.com/watch?time_continue=1330&v=p2HzZkd2A40&feature=emb_title
WebRTC 요약정리!
WebRTC(Web Real-Time Communications)란?
실시간으로 비디오와 오디오 데이터를 전달할 수 있게 해주는 기술이다. 브라우저에 다른 플러그인이나 네이티브 어플리케이션을 설치하지 않아도 화상회의 등을 가능하게 해 준다. 브라우저만 띄워 웹사이트를 방문하는 것 만으로 실시간 화상회의를 가능하게 해준다. HTML5와 JavaScript API만 이용하더라도 충분히 구현할 수 있도록 만들어져 있고 현재 2021년 1월 부로 W3C안에서 WebRTC표준이 완료되었다고 한다.
WebRTC 동작 원리
WebRTC는 다양한 IETF(Internet Engineering Task Force) 표준 프로토콜과 기술 기반으로 구성되어 있다.
그러므로 미디어와 데이터 통신에서 보안 문제가 있을만한 부분을 기존 표준 보안 프로토콜을 이용함으로 해결할 수 있게 된다. SRTP와 DTLS 같이 표준화된 방법으로 데이터와 미디어 스트림을 암호화하기 때문에 신뢰할 수 있게 된다.
WebRTC는 peer-to-peer 방식으로 실시간 소통을 할 수 있도록 하는데, 그래서 peer-to-peer 방식 통신을 가능하게 하는 기능들이 WebRTC의 핵심이라고 할 수 있다.
peer-to-peer방식의 통신에 있어 가장 이상적인 환경은 아래 그림과 같다.
* 시그널링(signalling) 서버 : peer 간의 연결을 이어주고, SDP(Session Description Protocol)를 통신할 수 있도록 해주는 서버. SDP는 미디어 메타 정보 등으로 이루어진 세션의 정보를 담고 있다. 미디어 스트림이 있기 전에 시그널링 서버에 보내진 네트워크 정보, 미디어 정보를 교환할 필요가 있다.
위와 같이 모든 peer가 연결될 수 있다면 이상적이겠지만 현실은 아래와 같다.
각 peer는 NAT이라는 벽에 막혀있다. 각 peer는 라우터에게 할당받은 private IP 주소만 유지하고 있다. 라우터의 public IP 주소를 알아야지 peer-to-peer 연결을 할 수 있다. 이때 필요한 것이 STUN 서버이다.
STUN(Session Traversal Utilities for NAT)
각 peer가 자신의 public IP를 찾게 해주는 역할을 한다. 간단하게 구성할 수 있고 미디어 데이터는 여전히 peer-to-peer방식으로 통신한다. STUN을 이용하여 peer는 자기 라우터의 public IP 주소를 알 수 있게 되고 이 주소를 기반으로 시그널링 한다.
하지만 NAT에서 이하 private IP를 받은 디바이스들에게 전달되는 패킷 중에 요청하지 않은 패킷을 차단한다거나 아니면 다른 문제가 생겨서 peer-to-peer 연결이 불가능할 경우 릴레이 방식으로 peer의 미디어를 다른 peer에게 전달해 줄 서버가 또 필요하다. 그것이 바로 TURN 서버이다.
TURN(Traversal Using Relays around NAT)
peer-to-peer 방식이 실패했을 경우 fallback으로 제공할 수 있는 방식이다. peer 간의 미디어를 이 서버를 통해서 각 peer에게 전달되게 함으로써 NAT을 우회할 수 있다고 한다.
이렇게 STUN과 TURN을 이용하여 peer-to-peer 통신을 가능하게 하는 프레임워크가 ICE(Interactive Connectivity Establishment)이다. ICE를 이용해서 peer 간 통신 최적 경로를 찾아 연결할 수 있게 된다.
WebRTC Architectures
1. 단순한 peer-to-peer 1:1 통신
2. Mesh : 매쉬에 참여한 각 peer는 자신을 제외한 peer 수만큼의 미디어 송신, 수신 링크를 유지해야 하므로 peer 디바이스에 주는 부하가 심해진다. 예를 들어 4명이 참가한 Mesh인 경우 자신의 스트림을 각각 하나씩 3명에게 보내면서 다른 peer들이 보내는 스트림 하나씩 총 3개를 받아야 한다.
3. Star : 하나의 peer가 서버가 되어 각 peer에게 미디어 스트림을 받아 각 peer에게 전달해 주는 방식.
3-1. SFU(Selective Forwarding Unit) : 하나의 중앙 서버를 놓고 모든 peer가 중앙 서버로 미디어를 보내면 중앙 서버에서 각 peer에게 전달해 주는 방식. 서버에서 peer들에게 받은 비디오와 오디오를 하나의 스트림으로 믹스하는 것이 아니라 peer 하나 당 하나의 스트림으로 각 peer에게 전달해주는 아키텍처이다. 이 방식을 이용하면 각 peer는 하나의 링크로 자신의 미디어를 서버로 보내고 자신을 제외한 나머지 peer만큼의 링크로 다른 peer들의 미디어를 받게 된다.
4. MCU(Multi-Point Control Unit) : 모든 참여 peer가 하나의 서버에 미디어 스트림을 보내고 서버는 그걸 받아서 하나의 미디어 스트림으로 믹스해서 각 peer에게 전송해 준다. 서버의 컴퓨팅 파워가 굉장히 많이 필요한 아키텍쳐이다.
WebRTC를 이용한 App 만들 때 도움 주는 것들
adapter.js
WebRTC app을 만들 때 이종의 브라우저 간에 다른 코드를 쓸 필요 없게 해주는 자바스크립트 라이브러리.
Video Chat Frameworks :
SimpleWebRTC
easyRTC
webRTC.io
peer-to-peer data Frameworks:
Peer.js
Sharefest
끝
댓글