Download - What is web rtc
![Page 1: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/1.jpg)
What is WebRTC?기술연구소 / 정기철
![Page 2: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/2.jpg)
동기
•IT News 에 WebRTC 라는 용어가 자주 나옴
•앞으로 뜰거 같아서
![Page 3: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/3.jpg)
![Page 4: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/4.jpg)
without plugin
![Page 5: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/5.jpg)
20142014 년 초반되면년 초반되면 ... ...
![Page 6: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/6.jpg)
Roadmap
•WebRTC 소개
•WebRTC API
•WebRTC 를 활용한 주요 서비스
![Page 7: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/7.jpg)
WebRTC 소개
![Page 8: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/8.jpg)
WebRTC 란 ?
•Real-Time Communications (RTC)Web+RTC
•자바스크립트 API 를 통해서
•Google Mozilla, Opera 의 지원을 받는 오픈 프로젝트
•Mission : HTML5+Javascript API 를 통해서 높은 수준의 RTC Application 이 개발 될 수 있도록 하는 것
![Page 9: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/9.jpg)
History
•2011 년 5 월 Ericsson 에 의해 처음 구현
•2011 년 10 월W3C 에 처음 공식 드래프팅
•2012 년 2 월 ,WebRTC Native APIs 2.0 (libjingle r115)
![Page 10: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/10.jpg)
History
•2012 년 6 월Google I/O WebRTC Session 발표
•2013 년 2 월 ,Firefox와 Chrome간 통신 성공
•2013 년 5 월Google I/O WebRTC Session 다시 발표
![Page 11: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/11.jpg)
WebRTC API주요 역할
•Audio, Video 얻기
•Audio, Video 통신
•기타 임의 데이터를 통신
![Page 12: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/12.jpg)
WebRTC APIs•MediaStream
Camera, Mic, 화면으로부터 스트림을 얻음
•PeerConnection오디오 , 비디오를 호출네트워크와 관련
•DataChannel일반적인 데이터 전송WebSocket 과 유사
![Page 13: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/13.jpg)
WebRTC APIs
![Page 14: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/14.jpg)
MediaStream?
•데이터 스트림에 접근할 수 있게 함Camera, Mic , Screen, ...
•navigator.getUserMedia()
•맥의 Photobooth 와 같은 어플리케이션을 웹에서 구현 가능
•Chrome, FF, Opera 최신버전에서 지원
![Page 15: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/15.jpg)
API support summary
APIAPI ChromeChrome FFFF OperaOperaEricssonEricssonBowserBowser
MediaStreamMediaStream 18+18+ 17+17+ 12+12+ 지원지원
PeerConnectionPeerConnection 20+20+ Aurora/Aurora/NightlyNightly -- 지원지원
DataChannelDataChannel 25+25+ Aurora/Aurora/NightlyNightly -- --
![Page 16: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/16.jpg)
MediaStream활용
•+ Canvas + CSS : Snapshot, 필터 효과 , ...
•+ Audio API : 녹음기 , ...
•+ JS : 얼굴인식 , 모션캡쳐 , ...
•+ PeerConnection API : 원격 화상회의 , ......
![Page 17: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/17.jpg)
MediaStream 의 흐름
![Page 18: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/18.jpg)
MediaStream 의 흐름WebRTC 아키텍쳐
![Page 19: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/19.jpg)
MediaStreamCode
![Page 23: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/23.jpg)
MediaStreamTracking
•https://github.com/eduardolundgren/tracking.js
![Page 24: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/24.jpg)
MediaStreamAudioRecorder
•http://www.webaudiodemos.appspot.com/AudioRecorder/index.html
![Page 25: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/25.jpg)
MediaStreamScreen share
•https://html5-demos.appspot.com/static/getusermedia/screenshare.html
•웹서버 - SSL 필요
•chrome://flags/
![Page 26: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/26.jpg)
PeerConnection?•Signal processing
•Codec handling
•P2P CommunicationPeer 생성과 전달
•Security
•Bandwidth management...
![Page 27: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/27.jpg)
Signaling?
• Peer 간에 세션정보를 교환하는 것SDP(Session Description Protocol) rfc3264
• PeerConnection API 에 속하지 않는 영역
• SIP, XMPP, Websocket, 등 ... 적절한 방법
• P2P 스트리밍이 시작되기 전에 시그널링을 통해 정보 교환이 정상적으로 완료되어야 함 .
![Page 28: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/28.jpg)
SDP교환하는 3 가지 정보•세션 컨트롤 메세지
통신을 초기화 , 종료 에러 보고
•네트워크 설정
•미디어 재생 능력코덱 , 해상도
![Page 30: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/30.jpg)
연결후보 찾기
![Page 31: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/31.jpg)
서버 없는 구성 예제
![Page 32: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/32.jpg)
서버 있는 구성 예제WebSocket
![Page 33: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/33.jpg)
![Page 34: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/34.jpg)
DataChannels
•웹소켓과 유사하지만 P2P
•audio/video 를 제외한 다른 데이터 타입을 전송하기 위한 채널
•게임 , 문자채팅 , 파일전송 , ...
![Page 35: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/35.jpg)
DataChannel 예제
![Page 37: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/37.jpg)
WebRTC 상태보기
•chrome://webrtc-internals
![Page 38: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/38.jpg)
WebRTC Service
![Page 39: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/39.jpg)
OpenTokVideo Chat
•http://www.tokbox.com/
•통합을 위한 개발 가능
![Page 40: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/40.jpg)
•https://vline.com/
•통합을 위한 개발 가능
vLineVideo Chat
![Page 41: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/41.jpg)
VeckonVideo Chat
•http://www.veckon.com/
•IE( 크롬프레임 ), FF, Chrome 간 통신 성공
•모든 API 를 사용
•가입없이 사용 가능
•한국 회사
![Page 42: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/42.jpg)
TowTruck
•https://towtruck.mozillalabs.com/
•실시간 협업
•음성채팅 기능에서 WebRTC 사용
![Page 43: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/43.jpg)
PeerCDN
•https://peercdn.com/
•DataChannel API 를 이용한 P2P CDN
•비공개 베타
•크롬만 지원
![Page 44: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/44.jpg)
Recap
![Page 45: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/45.jpg)
Reference
•WebRTC 공식 사이트
•Getting Started with WebRTC
•WebRTC WebAPI Spec - W3C
•Ericcson Lab
•ICE, TURN and STUN for NAT Traversal
![Page 46: What is web rtc](https://reader030.vdocuments.pub/reader030/viewer/2022020715/557acd1bd8b42add288b4a50/html5/thumbnails/46.jpg)
Thanks