33
Getting Started with WebRTC 장정환

Getting started with WebRTC

Embed Size (px)

DESCRIPTION

JSLounge 네 번째 세미나의 Getting Started with WebRTC 발표 자료입니다. WebRTC에 대해 간략히 알 수 있습니다. 이 자료는 http://www.html5rocks.com/en/tutorials/webrtc/basics/ 페이지를 기초로 만들었습니다.

Citation preview

Page 1: Getting started with WebRTC

Getting����������� ������������������  Started����������� ������������������  with����������� ������������������  WebRTC

장정환

Page 2: Getting started with WebRTC

about����������� ������������������  me

•장정환

[email protected]

•http://nundefined.com

•@nundefined

Page 3: Getting started with WebRTC

들어가며

•Getting����������� ������������������  Started����������� ������������������  with����������� ������������������  WebRTC

•http://www.html5rocks.com/en/tutorials/webrtc/basics/

Page 4: Getting started with WebRTC

RTC

•Real-Time����������� ������������������  Communication

•실시간����������� ������������������  통신

•복잡하고����������� ������������������  직접����������� ������������������  개발하기에는����������� ������������������  비쌈

•라이센스,����������� ������������������  개발비����������� ������������������  등

•앱을����������� ������������������  설치하거나����������� ������������������  플러그인����������� ������������������  설치가����������� ������������������  필요

•Google����������� ������������������  Hangouts,����������� ������������������  Skype����������� ������������������  ...

Page 5: Getting started with WebRTC

WebRTC

•Web����������� ������������������  +����������� ������������������  RTC

•브라우저를����������� ������������������  통해����������� ������������������  실시간����������� ������������������  통신을����������� ������������������  하는����������� ������������������  것

•비디오,����������� ������������������  오디오����������� ������������������  외에도����������� ������������������  다양한����������� ������������������  데이터를����������� ������������������  교환

•플러그인����������� ������������������  불필요

Page 6: Getting started with WebRTC

WebRTC����������� ������������������  히스토리

•구글에서����������� ������������������  관련����������� ������������������  기술을����������� ������������������  오픈소스화

•IETF와����������� ������������������  W3C에서����������� ������������������  표준화����������� ������������������  작업

•현재����������� ������������������  Working����������� ������������������  Draft����������� ������������������  상태

•Chrome과����������� ������������������  FireFox간의����������� ������������������  통신����������� ������������������  성공����������� ������������������  (2013/02)

•http://youtu.be/MsAWR_rJ5n8

Page 7: Getting started with WebRTC

WebRTC����������� ������������������  표준����������� ������������������  현황

•Editor’s����������� ������������������  Draft����������� ������������������  /����������� ������������������  Working����������� ������������������  Draft����������� ������������������  (WD)

•Candidate����������� ������������������  Recommendation����������� ������������������  (CR)

•Proposed����������� ������������������  Recommendation����������� ������������������  (PR)

•W3C����������� ������������������  Recommendation����������� ������������������  (REC)

Page 8: Getting started with WebRTC

전체����������� ������������������  구조

https://sites.google.com/site/webrtc/reference/architecture

Page 9: Getting started with WebRTC

WebRTC����������� ������������������  관련����������� ������������������  API

•MediaStream����������� ������������������  (getUserMedia)

•RTCPeerConnection

•RTCDataChannel

Page 10: Getting started with WebRTC

API와����������� ������������������  전체����������� ������������������  흐름

MediaStream MediaStream

RTCPeerConnection/ RTCDataChannel

??blah

blahblahblah

Page 11: Getting started with WebRTC

MediaStream

•getUserMedia()

•미디어의����������� ������������������  동기화된����������� ������������������  스트림을����������� ������������������  제공

•카메라����������� ������������������  화면����������� ������������������  +����������� ������������������  마이크����������� ������������������  소리

•오디오는����������� ������������������  chrome://flags에서����������� ������������������  설정����������� ������������������  후����������� ������������������  사용����������� ������������������  가능

•항상����������� ������������������  사용자의����������� ������������������  권한����������� ������������������  확인을����������� ������������������  요구함

Page 12: Getting started with WebRTC

<!doctype HTML><html><body>

<video autoplay></video>

<script>var onFail = function(e){ console.log('Rejected: ', e);}

// because of webkit prefix, this code work on Chrome onlynavigator.webkitGetUserMedia({video: true, audio: true}, function(localMediaStream){ var video = document.querySelector('video'); video.src = window.URL.createObjectURL(localMediaStream);

video.onloadedmetadata = function(e){ console.log('meta data loaded: ', e); };}, onFail);</script>

</body></html>

Page 13: Getting started with WebRTC

Signaling

•양쪽의����������� ������������������  연결을����������� ������������������  위해����������� ������������������  필요한����������� ������������������  모든����������� ������������������  과정

•WebRTC에서����������� ������������������  정의한����������� ������������������  내용은����������� ������������������  없음

•시그널을����������� ������������������  주고����������� ������������������  받는����������� ������������������  방법이나����������� ������������������  규칙은����������� ������������������  개발자의����������� ������������������  역할

•SIP,����������� ������������������  XMPP����������� ������������������  ...

•XHR,����������� ������������������  Channel����������� ������������������  API,����������� ������������������  Web����������� ������������������  Socket����������� ������������������  ...

•이����������� ������������������  과정이����������� ������������������  완료되어야����������� ������������������  통신����������� ������������������  가능

Page 14: Getting started with WebRTC

Signaling����������� ������������������  -����������� ������������������  교환����������� ������������������  정보

•Session����������� ������������������  Control����������� ������������������  Message

•통신����������� ������������������  시작,����������� ������������������  종료,����������� ������������������  에러

•Network����������� ������������������  Configuration

•IP����������� ������������������  address,����������� ������������������  port����������� ������������������  #

•Media����������� ������������������  capabilities

•codecs,����������� ������������������  resolutions

Page 15: Getting started with WebRTC

var signalingChannel = createSignalingChannel();var pc;var configuration = ...;

// run start(true) to initiate a callfunction start(isCaller) { pc = new RTCPeerConnection(configuration);

// send any ice candidates to the other peer pc.onicecandidate = function (evt) { signalingChannel.send(JSON.stringify({ "candidate": evt.candidate })); };

// once remote stream arrives, show it in the remote video element pc.onaddstream = function (evt) { remoteView.src = URL.createObjectURL(evt.stream); };

// get the local stream, show it in the local video element and send it navigator.getUserMedia({ "audio": true, "video": true }, function (stream) { selfView.src = URL.createObjectURL(stream); pc.addStream(stream);

if (isCaller) pc.createOffer(gotDescription); else pc.createAnswer(pc.remoteDescription, gotDescription);

function gotDescription(desc) { pc.setLocalDescription(desc); signalingChannel.send(JSON.stringify({ "sdp": desc })); } });}

(1)

Page 16: Getting started with WebRTC

signalingChannel.onmessage = function (evt) { if (!pc) start(false);

var signal = JSON.parse(evt.data); if (signal.sdp) pc.setRemoteDescription(new RTCSessionDescription(signal.sdp)); else pc.addIceCandidate(new RTCIceCandidate(signal.candidate));};

(2)

Page 17: Getting started with WebRTC

var signalingChannel = createSignalingChannel();var pc;var configuration = ...;

// run start(true) to initiate a callfunction start(isCaller) { pc = new RTCPeerConnection(configuration);

// send any ice candidates to the other peer pc.onicecandidate = function (evt) { signalingChannel.send(JSON.stringify({ "candidate": evt.candidate })); };

// once remote stream arrives, show it in the remote video element pc.onaddstream = function (evt) { remoteView.src = URL.createObjectURL(evt.stream); };

// get the local stream, show it in the local video element and send it navigator.getUserMedia({ "audio": true, "video": true }, function (stream) { selfView.src = URL.createObjectURL(stream); pc.addStream(stream);

if (isCaller) pc.createOffer(gotDescription); else pc.createAnswer(pc.remoteDescription, gotDescription);

function gotDescription(desc) { pc.setLocalDescription(desc); signalingChannel.send(JSON.stringify({ "sdp": desc })); } });}

(2)

(1)

Page 18: Getting started with WebRTC

signalingChannel.onmessage = function (evt) { if (!pc) start(false);

var signal = JSON.parse(evt.data); if (signal.sdp) pc.setRemoteDescription(new RTCSessionDescription(signal.sdp)); else pc.addIceCandidate(new RTCIceCandidate(signal.candidate));};

(3)

Page 19: Getting started with WebRTC

Signaling����������� ������������������  -����������� ������������������  순서

Caller

ServerCallee

offer

candidate

offer

answer

candidate

answer

stream

Page 20: Getting started with WebRTC

JSEP

JavaScript Session Establishment Protocol(JSEP) architecture

Page 21: Getting started with WebRTC

RTCPeerConnection

•안정적이고����������� ������������������  효과적인����������� ������������������  통신을����������� ������������������  담당

•복잡한����������� ������������������  내용은����������� ������������������  신경쓸����������� ������������������  필요����������� ������������������  없다

•브라우저����������� ������������������  개발자의����������� ������������������  몫

Page 22: Getting started with WebRTC

전체����������� ������������������  구조

https://sites.google.com/site/webrtc/reference/architecture

Page 23: Getting started with WebRTC

한����������� ������������������  페이지����������� ������������������  내에서의RTCPeerConnection

MediaStream

RTCPeerConnection

Page 24: Getting started with WebRTC

서버를����������� ������������������  통한����������� ������������������  RTCPeerConnection

•서버의����������� ������������������  역할

•통신할����������� ������������������  사용자를����������� ������������������  찾는����������� ������������������  일

•Signaling

•NAT/firewall����������� ������������������  traversal

•P2P가����������� ������������������  실패할����������� ������������������  경우����������� ������������������  연결해주는����������� ������������������  일

Page 25: Getting started with WebRTC

RTCDataChannel

•임의의����������� ������������������  데이터����������� ������������������  교환을����������� ������������������  위한����������� ������������������  API

•low����������� ������������������  latency,����������� ������������������  high����������� ������������������  throughput

•Web����������� ������������������  Socket과����������� ������������������  유사

Page 26: Getting started with WebRTC

Security

•RTC����������� ������������������  프로그램의����������� ������������������  일반적인����������� ������������������  보안����������� ������������������  문제

•암호화되지����������� ������������������  않은����������� ������������������  데이터를����������� ������������������  중간에서����������� ������������������  누군가가����������� ������������������  가로챌����������� ������������������  수����������� ������������������  있는����������� ������������������  문제

•사용자가����������� ������������������  인식하지����������� ������������������  못한����������� ������������������  채로����������� ������������������  데이터가����������� ������������������  녹화되고����������� ������������������  배포될����������� ������������������  수����������� ������������������  있는����������� ������������������  문제

•악성����������� ������������������  프로그램이����������� ������������������  설치될����������� ������������������  수����������� ������������������  있는����������� ������������������  문제

Page 27: Getting started with WebRTC

Security

•WebRTC의����������� ������������������  회피����������� ������������������  노력

•보안����������� ������������������  프로토콜의����������� ������������������  사용

•암호화����������� ������������������  필수

•별도의����������� ������������������  설치가����������� ������������������  필요����������� ������������������  없으며����������� ������������������  브라우저의����������� ������������������  샌드박스에서����������� ������������������  실행

•카메라와����������� ������������������  마이크의����������� ������������������  명시적인����������� ������������������  사용����������� ������������������  허락과����������� ������������������  사용����������� ������������������  상태를����������� ������������������  UI에����������� ������������������  표시

Page 28: Getting started with WebRTC

WebRTC����������� ������������������  일정

•첫����������� ������������������  번째����������� ������������������  Working����������� ������������������  Draft:����������� ������������������  2011-10-27

•현재����������� ������������������  Working����������� ������������������  Draft:����������� ������������������  2012-08-21

•Last����������� ������������������  Call����������� ������������������  Working����������� ������������������  Draft:����������� ������������������  

•Q1����������� ������������������  2013����������� ������������������  >����������� ������������������  Q3����������� ������������������  2013

•Candidate����������� ������������������  Recommendation:����������� ������������������  

•Q4����������� ������������������  2012����������� ������������������  >����������� ������������������  Q1����������� ������������������  2014

Page 29: Getting started with WebRTC

getUserMedia����������� ������������������  일정

•첫����������� ������������������  번째����������� ������������������  Working����������� ������������������  Draft:����������� ������������������  2011-10-27

•현재����������� ������������������  Working����������� ������������������  Draft:����������� ������������������  2012-06-28

•Last����������� ������������������  Call����������� ������������������  Working����������� ������������������  Draft

•Q2����������� ������������������  2013

Page 30: Getting started with WebRTC

'Potentially,����������� ������������������  WebRTC����������� ������������������  and����������� ������������������  HTML5����������� ������������������  could����������� ������������������  enable����������� ������������������  the����������� ������������������  same����������� ������������������  transformation����������� ������������������  for����������� ������������������  real-time����������� ������������������  communications����������� ������������������  that����������� ������������������  the����������� ������������������  original����������� ������������������  browser����������� ������������������  did����������� ������������������  for����������� ������������������  information.'

-����������� ������������������  Phil����������� ������������������  Edholm,����������� ������������������  the����������� ������������������  President����������� ������������������  and����������� ������������������  Founder����������� ������������������  of����������� ������������������  PKE����������� ������������������  Consulting

Page 31: Getting started with WebRTC

Questions?

Page 32: Getting started with WebRTC

감사합니다[email protected]

Page 33: Getting started with WebRTC

참고����������� ������������������  자료

• Getting����������� ������������������  Started����������� ������������������  with����������� ������������������  WebRTC

• http://www.html5rocks.com/en/tutorials/webrtc/basics/

• Google����������� ������������������  I/O����������� ������������������  2012����������� ������������������  -����������� ������������������  WebRTC:����������� ������������������  Real-time����������� ������������������  Audio/Video����������� ������������������  and����������� ������������������  P2P����������� ������������������  in����������� ������������������  HTML5

• https://www.youtube.com/watch?v=E8C8ouiXHHk

• WebRTC����������� ������������������  Working����������� ������������������  Draft����������� ������������������  21

• http://www.w3.org/TR/2012/WD-webrtc-20120821/

• http://www.nojitter.com/post/232901042/webrtc-is-it-a-game-changer

• Source����������� ������������������  Code

• https://github.com/inomies/WebRTCDemo