slide 1: 스타트업핵심기술로서의
WebRTC
정강식
하이퍼커넥트
slide 2: 정강식
금융결제원 S/W 엔지니어 2007.03 2014.02
하이퍼커넥트 CTO 공동창업자 2014.03 현재
발표자소개
slide 3: 하이퍼커넥트소개
미션
시간 언어 공간의제약을넘어인류개개인
의
도달가능한인간관계를전세계로넓힌다
시작
2014년 3월 33세의엔지니어 3명이
친구사무실의책상하나를빌려창업
주요
제품
비디오기반소셜플랫폼
“Azar아자르”
+ 그리고더많은신규프로덕트들
직원수
18개국적의 180여명
엔지니어가약 40
+ 해외현지사무실/직원
매출액성장
94억
363억
624억
‘14 ‘15 ‘16 ‘17
90 이상이해외에서
21억
slide 4: Azar아자르
비디오기반소셜플랫폼 ‘Azar’
‘Azar’는전세계의새로운사람들과만난다는
소셜디스커버리Social Discovery개념을구현한
비디오기반소셜엔터테인먼트플랫폼입니다.
전세계의서로알지못했던사람들이아자르를통
해국가언어성별문화의장벽을넘어다양한사
람들을만나고그들의삶과문화를이해하며새로
운즐거움을경험할수있습니다.
slide 5: 2억+다운로드
6천만+일영상통화
전세계비게임앱중
매출 7위
글로벌피처링
AppStore / Google Play
Azar의성과
“전세계 73억인구가 5번씩만난셈”
400억+매치달성
Google Play SensorTower Q1 2018
전세계
230여개국에서사용중
2년연속구글플레이올해의앱
slide 6: Azar
아자르외에도다양한앱들을
개발해왔습니다.
잘알려진건아자르뿐이지만…
비디오커뮤니케이션
그외다양한시도들...
라이브스트리밍
하이퍼커넥트의제품들
slide 7: Azar
비디오커뮤니케이션
라이브스트리밍
하이퍼커넥트의제품들
기반으로만들어진앱이거의절반
slide 8: 하이퍼커넥트가성장하는과정에서
WebRTC는회사의핵심기술로자리잡았고
치열한경쟁속에서기술우위를제공하고있습니다
slide 9: 1. WebRTC 그리고 Azar의시작
2.최적화를통한성능개선
3.그룹비디오콜을위한 WebRTC
4.실시간라이브스트리밍
5. WebRTC와미래
Agenda
slide 10: 1. WebRTC 그리고 Azar의시작
2.최적화를통한성능개선
3.그룹비디오콜을위한 WebRTC
4.실시간라이브스트리밍
5. WebRTC와미래
Agenda
slide 11: WebRTC의시작
● 2010년구글이 VoIP 및 videoconferencing 회사인 Global IP
SolutionsGIPS 라는회사를인수
● 해당회사는음성/영상코덱및에코캔슬링기술을가지고있었음
● 2011년구글이위 GIPS 회사의기술을 WebRTC 라는이름으로
오픈소스화해서공개함
slide 12: 모든것은주말프로젝트에서...
● 20112012년하이퍼커넥트창업자중 2인이아
자르와유사하나음성만으로사람을연결하는
주말프로젝트착수
● “스마트폰을통해외국사람들과만나언어교환
등을할수있으면재미있을것같아”라는
아이디어에서시작
● 당시스마트폰의성능한계로영상통신은힘들
고 mVoIP 앱처럼음성통신이가능할것이라고
생각
slide 13: 기존기술의한계
● 개발생산성을위해 Flash 기반의 Adobe
AIR mobile을플랫폼으로삼아프로젝트
가진행됨
● 하지만에코캔슬링이되지않아이어폰을
꼭써야하는크리티컬한문제가존재
→ Adobe AIR로는의미있는유저경험을
제공할수없다는판단에프로젝트를중
단하고기술대안을탐색
slide 14: WebRTC의도입
● “구글이최근에공개한 WebRTC를어떻게활용해볼수있지않을까”
당시 WebRTC는브라우저상에서의동작이우선적으로개발되는중
● WebRTC가 out of the box 로안드로이드를지원하지는않으나커뮤니
티에서다양한컴파일성공사례등장
● 두달정도저녁과주말을투자하여독자적인 patch set을만들며
WebRTC를안드로이드상에서영상/음성통신이가능하도록만듬
● 영상도쓰는언어교환앱데모앱를만든다음보니…
“오이거뭔가엄청재미있는게나올것같은데”
slide 15: Azar의시작
엔지니어 2명이 2달동안아자르
안드로이드버전완성
아자르의초기 UI 기획 ...
slide 16: 큰인기를얻은 Azar
● 출시후2달만에
1백만다운로드달성
● 대만에서LINE을누르고
구글플레이다운로드1위
● 하루에12만명의신규가입
slide 17: Azar가빠르게성장할수있었던이유
● 아자르가장르를개척한앱이긴하지만기존에도비슷한앱들이이미
존재 video chat으로검색하면아자르는 100위안에못들정도로..
● 하지만다른앱들은 Abode AIR 기반혹은조악한품질의 PC에서넘어
온기술을사용하여품질이나쁨 해상도낮음 에코캔슬링안됨
● 완전히새로운최신기술이였던 WebRTC에기반한아자르는영상/음성
품질에서다른경쟁앱을압도하였고그를바탕으로빠르게성장함
지금은당연하지만그때는도전이였던 WebRTC 채택이
하이퍼커넥트가성장할수있던경쟁력이됨
slide 18: 1. WebRTC 그리고 Azar의시작
2.최적화를통한성능개선
3.그룹비디오콜을위한 WebRTC
4.실시간라이브스트리밍
5. WebRTC와미래
Agenda
slide 19: 안드로이드에서 iOS로의플랫폼확장
● 더넓은시장에다가가기위해
2014년말부터 iOS 개발을시작
● iOS App Store는 Google Play에비해
2014년두배가까운매출을기록
● 약 6개월의개발을거쳐 2015년상반기
첫 iOS 버전을 App Store에출시
slide 20: iOS 상에서 WebRTC 사용의어려움
● iOS의경우성능부족으로영상통화가어려움. 코어가 2개에불과하고
코어당성능도 iPhone5s 이전에는 안드로이드에비해부족
● 안드로이드의 WebRTC 코드를그대로사용해서는 CPU가 200가
모두차버리고폰이먹통이되는현상이발생
200이안되지만시스템프로세스까지합치면...
slide 21: 최적화 최적화 최적화
● CPU 시간의상당부분을소비하는 memcpy를줄이기위해레퍼런스
카운팅기반프레임관리를 upstream보다먼저도입
● SIMD 오퍼레이션을적극적으로사용.프레임의복사 포맷변경
리사이즈 회전등을여러번이아닌한번의작업으로처리하게함.
● Out of the box 지원이아닌 H.264 코덱을구글보다 6개월이상앞서서
밑바닥부터만들어포함시킴. H/W 가속을사용하여 CPU사용을크게
줄임
● Byte buffer를사용하는것을최대한줄이고가능하면 texture를
사용하여화면을그리거나프레임을전달
slide 22: 최적화로가능했던 iOS 버전의출시
● 아이폰종류에따라 3050 CPU 사용량을절감하여정상적인앱
사용이가능해짐
● 해당개선으로안드로이드역시발열과배터리소모량이전체적으로
감소하여유저가앱을사용하는시간이늘어나고앱평가도개선됨
● 이시점부터 WebRTC가앱을만들때사용된여러 third party 기술중
하나가아닌회사가독자적으로연구개발하는핵심기술로자리잡음
slide 23: 1. WebRTC 그리고 Azar의시작
2.최적화를통한성능개선
3.그룹비디오콜을위한 WebRTC
4.실시간라이브스트리밍
5. WebRTC와미래
Agenda
slide 24: 그룹비디오콜서비스 - Groovi
● 2106년부터하우스파티Houseparty 등
의앱을시작으로그룹비디오콜에대한
관심증대
● 하이퍼커넥트도 2016년말부터 Groovi라
는그룹비디오콜앱을만들기시작하여
2017년초출시
● Groovi Group + video
Groovi의유저경험
slide 25: 그룹비디오콜구현방식탐색 1/2
● 일반적으로는중앙서버를두고해당서버
가영상을다른유저들에게중개하는 Hub-
and-Spoke 구현을사용
● 이경우 Hub 역할을하는중앙서버에많은
트래픽이발생하기때문에비용문제발생
● 중앙서버가각유저마다다시영상을인코
딩하는고전적인방식MCU의경우방대
한규모의서버인프라가필요
slide 26: 그룹비디오콜구현방식탐색 2/2
● 이에대한대안으로최대 8명의유저가서
로 full mesh 방식으로연결하여영상을
주고받는구조를사용
● 중앙서버를사용하지않기때문에서비스
제공자가트래픽비용을낼필요가없음
● 단모든상대에대해별도로영상을인코
딩/전송해야하기때문에모바일에서사
용하기는어려운구조였음
slide 27: Custom WebRTC 구현을통한 Full-mesh 최적화
● SFUSelective Forwarding Unit를통한서버측구성의아이디어를빌려
클라이언트 WebRTC 구현을 customize
● 영상/음성의인코딩을상대유저peer마다하지않고한번인코딩을한
다음모든상대유저에게공유하도록함
● 상대유저마다연결의 bandwidth가다를수있는문제에대응하기위해
서글로벌인코딩결과가여러개의 substream/temporal layer를가지도
록하고 peer 마다다른 stream/layer를배분
● 다시말해 느린속도로연결된유저에게는 240p/7fps로영상을보내고빠
른속도로연결된유저에게는 480p/30fps로영상을보내는방식을사용
slide 28: 성공적인성능목표달성
● 클라이언트기반의그룹비디오콜
기술은매우도전적인시도였으나
결과적으로성공적이였음
● Groovi는경쟁앱이비해서
동등하거나더쾌적한유저경험을
제공하면서트래픽비용을회피
TURN 서버제외
slide 29: 1. WebRTC 그리고 Azar의시작
2.최적화를통한성능개선
3.그룹비디오콜을위한 WebRTC
4.실시간라이브스트리밍
5. WebRTC와미래
Agenda
slide 30: 라이브스트리밍시장으로의확장
● 2018년회사의주요한사업영역에라이브
스트리밍을포함시킨후라이브스트리밍에
대한연구개발을시작
● 최종적으로기존에널리쓰이고있는 HLS 기반
스트리밍이아닌완전히새로운 WebRTC 기반
스트리밍기술에투자하기로결정
● 새로운스트리밍기술을바탕으로인터랙티브
라이브스트리밍앱 Hakuna를출시
slide 31: 전통적인 비디오스트리밍기술
- HLSHttp Live Streaming
● 원본비디오를다양한해상도bitrate의비디오로다시인코딩하고
작은 chunk로나눔
● m3us 파일에담긴메타정보및측정된 bandwidth를바탕으로적절
한 chunk를재생함
● HTTP를통해파일을다운로드하는방식으므로 CDN 인프라를사용
할수있고관리가쉬움
slide 32: HLS 방식의한계
● HLS는본질적으로 latency를줄일수없음
TV로축구중계를보는남들은골을외치는데스마트폰으로보
는내화면에선우리편이드리블도시작안한이유
평범한 HLS WebRTC
노력한 HLS
15 sec 58 sec 1 sec
slide 33: WebRTC 기반라이브스트리밍의이점
● 1초미만의 latency를달성할수있음
유럽에서버가있는 Hakuna를한국에
서써도 1초미만
● 라이브스트리밍을보는시청자의반응
에방송하는사람이즉각적으로대응
● 라이브스트리밍인프라를그대로사용
하면서방송하는사람여러명이실시간
으로소통하는것이가능
slide 34: WebRTC 스트리밍인프라구성
● 오픈소스미디어서버janus-gateway를
사용하지만안정성을위해자체제작한
media broker를앞에두는구조채택
● 잘정의된 client API를통해미디어서버
instance의 crash에도자연스럽게방송
이다른 instance로 fail-over 가능
● media broker는단순리소스할당뿐만
아니라 load-balancing auto-scaling
등의다양한기능수행
slide 35: WebRTC 스트리밍최적화
● 대규모시청자처리를위해오픈소스 janus-gateway의최적화진행
→ AWS EC2 기준 instance 당시청자 5000명이상
● 보다나은시청경험을위해기존기능을개선하고새로운기능을추가
○ bandwidth probing 기반 automatic substream change
○ abs-send-time/transport-wide-cc 및 RRTR/DLRR를통한더정확
한 REMB/RTP 계산
○ subscriber type 별 playout-delay 할당
● 개선사항중일부는내부테스트를거쳐 upstream에도기여하는중
slide 36: 1. WebRTC 그리고 Azar의시작
2.최적화를통한성능개선
3.그룹비디오콜을위한 WebRTC
4.실시간라이브스트리밍
5. WebRTC와미래
Agenda
slide 37: WebRTC와 MLMachine Learning
● 하이퍼커넥트는 WebRTC 및 ML을
연구개발의두축으로삼아투자
● WebRTC와관련이많은 Video
Image Classification 및
Segmentation에서다양한성과
● mobile 환경에서의 ML 활용에초첨
을두고있으며 audio/voice 관련된
분야도활발히연구하는중
slide 38: WebRTC와 ARAugmented Reality
● ML기반으로영상에서인물과배경을
분리하여가상의장소로변경하는등의
AR적인활용이가능
● 2D/3D 스티커를표시하거나얼굴의
형상을변경하는기술을보유중
face rigging/mapping
● 모바일에서 AR기술이성숙함에따라더
다양한활용이가능해질것이라기대
slide 39: 하이퍼커넥트와함께
전세계를연결할분을모십니다
We Connect the World
with WebRTC
Tech Blog hyperconnect.github.io
Website hyperconnect.com
Facebook hpcnt
Instagram hyperconnect
Email careerhpcnt.com
Connect with Hyperconnect