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