what is web rtc

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

MediaStreamAscii Camera

•http://idevelop.ro/ascii-camera/

MediaStreamWebCamToy

•http://webcamtoy.com/app/

MediaStreamFacekat

•http://shinydemos.com/facekat/

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 가지 정보•세션 컨트롤 메세지

통신을 초기화 , 종료 에러 보고

•네트워크 설정

•미디어 재생 능력코덱 , 해상도

JSEP Architecture

연결후보 찾기

서버 없는 구성 예제

서버 있는 구성 예제WebSocket

DataChannels

•웹소켓과 유사하지만 P2P

•audio/video 를 제외한 다른 데이터 타입을 전송하기 위한 채널

•게임 , 문자채팅 , 파일전송 , ...

DataChannel 예제

DataChannel DemoSharefest

•https://github.com/Peer5/ShareFest

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