WebRTC 소개와

1. What is WebRTC?
기술연구소 / 정기철

2. 동기
• IT News 에 WebRTC 라는 용어가
자주 나옴
• 앞으로 뜰거 같아서

4. without plugin

5. 20142014 년 초반되면년 초반되면 ......

6. Roadmap
• WebRTC 소개
• WebRTC API
• WebRTC 를 활용한 주요 서비스

7. WebRTC 소개

8. WebRTC 란 ?
• Real-Time Communications (RTC)
Web+RTC
• 자바스크립트 API 를 통해서
• Google Mozilla, Opera 의 지원을 받는
오픈 프로젝트
• Mission : HTML5+Javascript API 를 통해서
높은 수준의 RTC Application 이 개발 될
수 있도록 하는 것

9. History
• 2011 년 5 월
Ericsson 에 의해 처음 구현
• 2011 년 10 월
W3C 에 처음 공식 드래프팅
• 2012 년 2 월 ,
WebRTC Native APIs 2.0 (libjingle r115)

10. History
• 2012 년 6 월
Google I/O WebRTC Session 발표
• 2013 년 2 월 ,
Firefox와 Chrome간 통신 성공
• 2013 년 5 월
Google I/O WebRTC Session 다시 발표

11. WebRTC API
주요 역할
• Audio,Video 얻기
• Audio,Video 통신
• 기타 임의 데이터를 통신

12. WebRTC APIs
• MediaStream
Camera, Mic, 화면으로부터
스트림을 얻음
• PeerConnection
오디오 , 비디오를 호출
네트워크와 관련
• DataChannel
일반적인 데이터 전송
WebSocket 과 유사

13. WebRTC APIs

14. MediaStream?
• 데이터 스트림에 접근할 수 있게 함
Camera, Mic , Screen, ...
• navigator.getUserMedia()
• 맥의 Photobooth 와 같은 어플리케이션
을 웹에서 구현 가능
• Chrome, FF, Opera 최신버전에서 지원

15. API support summary

16. MediaStream
활용
• + Canvas + CSS : Snapshot, 필터 효과 , ...
• + Audio API : 녹음기 , ...
• + JS : 얼굴인식 , 모션캡쳐 , ...
• + PeerConnection API : 원격 화상회의 , ...
...

17. MediaStream 의 흐름

18. MediaStream 의 흐름
WebRTC 아키텍쳐

19. MediaStream
Code

20. MediaStream
Ascii Camera
• http://idevelop.ro/ascii-camera/

21. MediaStream
WebCamToy
• http://webcamtoy.com/app/

22. MediaStream
Facekat
• http://shinydemos.com/facekat/

23. MediaStream
Tracking
• https://github.com/eduardolundgren/tracking.js

24. MediaStream
AudioRecorder
• http://www.webaudiodemos.appspot.com/AudioRe

25. MediaStream
Screen share
• https://html5-demos.appspot.com/static/getuserme
• 웹서버 - SSL 필요
• chrome://flags/

26. PeerConnection?
• Signal processing
• Codec handling
• P2P Communication
Peer 생성과 전달
• Security
• Bandwidth management
...

27. Signaling?
• Peer 간에 세션정보를 교환하는 것
SDP(Session Description Protocol) rfc3264
• PeerConnection API 에 속하지 않는 영역
• SIP, XMPP,Websocket, 등 ... 적절한 방법
• P2P 스트리밍이 시작되기 전에 시그널링을 통
해 정보 교환이 정상적으로 완료되어야 함 .

28. SDP
교환하는 3 가지 정보
• 세션 컨트롤 메세지
통신을 초기화 , 종료
에러 보고
• 네트워크 설정
• 미디어 재생 능력
코덱 , 해상도

29. JSEP Architecture

30. 연결후보 찾기

31. 서버 없는 구성 예제

32. 서버 있는 구성 예제
WebSocket

34. DataChannels
• 웹소켓과 유사하지만 P2P
• audio/video 를 제외한
다른 데이터 타입을 전송하기 위한 채널
• 게임 , 문자채팅 , 파일전송 , ...

35. DataChannel 예제

36. DataChannel Demo
Sharefest
• https://github.com/Peer5/ShareFest

37. WebRTC 상태보기
• chrome://webrtc-internals

38. WebRTC Service

39. OpenTok
Video Chat
• http://www.tokbox.com/
• 통합을 위한 개발 가능

40. • https://vline.com/
• 통합을 위한 개발 가능
vLine
Video Chat

41. Veckon
Video Chat
• http://www.veckon.com/
• IE( 크롬프레임 ), FF, Chrome 간 통신 성
공
• 모든 API 를 사용
• 가입없이 사용 가능
• 한국 회사

42. TowTruck
• https://towtruck.mozillalabs.com/
• 실시간 협업
• 음성채팅 기능에서 WebRTC 사용

43. PeerCDN
• https://peercdn.com/
• DataChannel API 를 이용한 P2P CDN
• 비공개 베타
• 크롬만 지원

44. Recap

45. Reference
• WebRTC 공식 사이트
• Getting Started with WebRTC
• WebRTC WebAPI Spec - W3C
• Ericcson Lab
• ICE,TURN and STUN for NAT Traversal

46. Thanks