Web rtc 핵심 기술에 대한 이해
-
Upload
dahyun-kim -
Category
Software
-
view
175 -
download
8
Transcript of Web rtc 핵심 기술에 대한 이해
![Page 1: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/1.jpg)
![Page 2: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/2.jpg)
WebRTC
Web Real-TimeCommunication
![Page 3: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/3.jpg)
WebRTC & VOIP
![Page 4: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/4.jpg)
WebRTC & VOIP
NOT NEW!
![Page 5: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/5.jpg)
WebRTC Service Companies
VeckonNOW
![Page 6: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/6.jpg)
![Page 7: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/7.jpg)
History On Web
![Page 8: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/8.jpg)
P2P
WebRTC & JINGLE
Extensible Messaging and Presence Protocol
Voice Streaming
Video Streaming
File-Sharing Session
Initiate & maintainpeer to peer connection
RTPReal-time Transport Protocol
ICEInteractive Connectivity Establishment
SDPSession Description Protocol
![Page 9: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/9.jpg)
WebRTC & ORTC
WebRTC (Shim )
SIP/SDP
API Layer
![Page 10: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/10.jpg)
WebRTC Roadmap
FPWD : First Public Working DraftCR : Candidate RecommendationsPR : Proposed RecommenedationsRec : Recommendations
![Page 11: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/11.jpg)
Support
Web Browser
Mobile
29+ 24+
WebView
5.x
23+ 22+ 18+ ??? Not Yet
AppRTC ???20+ AppRTC Browser
적용버전이다소차이가있을수있음
![Page 12: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/12.jpg)
Support
![Page 13: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/13.jpg)
![Page 14: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/14.jpg)
KEYWORDs
P2P
SDP
ICENAT
TURN
STUN
Signaling
RTP
SCTP
DTLS
![Page 15: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/15.jpg)
Architect
![Page 16: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/16.jpg)
P2P
![Page 17: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/17.jpg)
P2P
Find(+Discovery)
Connection(Communication)
![Page 18: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/18.jpg)
P2P
Super Node
Super Node
Super Node
![Page 19: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/19.jpg)
P2P
Server
![Page 20: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/20.jpg)
Signaling
![Page 21: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/21.jpg)
Signaling
![Page 22: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/22.jpg)
ICEICE Framework (Interactive Connectivity Establishment)
A framework for connecting peers
Tries to find the best path for each call
![Page 23: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/23.jpg)
Session description v= (protocol version number, currently only 0) o= (originator and session identifier : username, id, version number, network address) s= (session name : mandatory with at least one UTF-8-encoded character) i=* (session title or short information) u=* (URI of description) e=* (zero or more email address with optional name of contacts) p=* (zero or more phone number with optional name of contacts) c=* (connection information—not required if included in all media) b=* (zero or more bandwidth information lines)
Time description (mandatory) t= (time the session is active) r=* (zero or more repeat times)
z=* (time zone adjustments) k=* (encryption key) a=* (zero or more session attribute lines)
Media description (if present) m= (media name and transport address) i=* (media title or information field) c=* (connection information — optional if included at session level) b=* (zero or more bandwidth information lines) k=* (encryption key) a=* (zero or more media attribute lines — overriding the Session attribute lines)
SDP
![Page 24: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/24.jpg)
SDPv=0o=- 7614219274584779017 2 IN IP4 127.0.0.1s=-t=0 0a=group:BUNDLE audio videoa=msid-semantic: WMSm=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126c=IN IP4 0.0.0.0a=rtcp:1 IN IP4 0.0.0.0a=ice-ufrag:W2TGCZw2NZHuwlnfa=ice-pwd:xdQEccP40E+P0L5qTyzDgfmWa=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-levela=mid:audioa=rtcp-muxa=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQea=rtpmap:111 opus/48000/2...
![Page 25: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/25.jpg)
v=0o=- 7614219274584779017 2 IN IP4 127.0.0.1s=-t=0 0a=group:BUNDLE audio videoa=msid-semantic: WMSm=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126c=IN IP4 0.0.0.0a=rtcp:1 IN IP4 0.0.0.0a=ice-ufrag:W2TGCZw2NZHuwlnfa=ice-pwd:xdQEccP40E+P0L5qTyzDgfmWa=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-levela=mid:audioa=rtcp-muxa=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQea=rtpmap:111 opus/48000/2...
SDPSession description a=* (zero or more session attribute lines)
![Page 26: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/26.jpg)
v=0o=- 7614219274584779017 2 IN IP4 127.0.0.1s=-t=0 0a=group:BUNDLE audio videoa=msid-semantic: WMSm=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126c=IN IP4 0.0.0.0a=rtcp:1 IN IP4 0.0.0.0a=ice-ufrag:W2TGCZw2NZHuwlnfa=ice-pwd:xdQEccP40E+P0L5qTyzDgfmWa=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-levela=mid:audioa=rtcp-muxa=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQea=rtpmap:111 opus/48000/2...
SDPSession description
Media description (if present) m= (media name and transport address)
![Page 27: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/27.jpg)
Ideal Network Environments
![Page 28: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/28.jpg)
Real Network Environments
![Page 29: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/29.jpg)
NAT ( Network Address Translation )
Corn NAT
Semmetric NAT
![Page 30: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/30.jpg)
STUN (Session Traversal Utilities for NAT)
![Page 31: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/31.jpg)
TURN (Traversal Using Relays around NAT)
![Page 32: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/32.jpg)
UDP : User Datagram ProtocolDTLS (Datagram Transport Layer Security)
No 3-Way HandShake
Simple Header
![Page 33: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/33.jpg)
UDP + TCPSCTP (Stream Control Transmission Protocol)
4-Way HandShake
Stream Oriented
Stream ID
Stream Sequence Number
Multi Association
DATA 신뢰도 UPDATA 전송속도 UP
MULTI HOMING MULTI Streaming
![Page 34: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/34.jpg)
RTP ( Real-time Transport Protocol )network protocol for delivering audio and video over IP networks
RTP
IP
TCP
RTP
IP
TCP
Network
RTP SecuritySRTP
![Page 35: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/35.jpg)
WebRTC Connection Sequence Diagram
![Page 36: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/36.jpg)
![Page 37: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/37.jpg)
WebRTC Target
VOICE
VIDEO
File Sharing
Media
Data
![Page 38: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/38.jpg)
WebRTC APIs
Main APIs
MediaStream (aka getUserMedia)
RTCPeerConnection
RTCDataChannel
![Page 39: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/39.jpg)
MediaStream ( getUserMedia )var constraints = {video: true}; // {video:true, audio:true}
function successCallback(stream) { var video = document.querySelector("video"); video.src = window.URL.createObjectURL(stream);}
function errorCallback(error) { console.log("navigator.getUserMedia error: ", error);}
navigator.getUserMedia(constraints, successCallback, errorCallback);
![Page 40: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/40.jpg)
MediaStream ( constraints )video: { mandatory: { minWidth: 640, minHeight: 360 }, optional [{ minWidth: 1280, minHeight: 720 }]}
Controls the contents
Media type
Resolution
Frame Rate
![Page 41: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/41.jpg)
RTCPeerConnectionpc = new RTCPeerConnection(null);pc.onaddstream = gotRemoteStream;pc.addStream(localStream);pc.createOffer(gotOffer);
function gotOffer(desc) { pc.setLocalDescription(desc); sendOffer(desc);}
function gotAnswer(desc) { pc.setRemoteDescription(desc);}
function gotRemoteStream(e) { attachMediaStream(remoteVideo, e.stream);}
![Page 42: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/42.jpg)
RTCPeerConnection ( Configuration / Optional )var configuration = { iceServers: [ {url: "stun:23.21.150.121"}, {url: "stun:stun.l.google.com:19302"}, {url: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"} ]}
var options = { optional: [ {DtlsSrtpKeyAgreement: true}, {RtpDataChannels: true} ]}
![Page 43: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/43.jpg)
RTCDataChannelvar pc = new webkitRTCPeerConnection(servers, {optional: [{RtpDataChannels: true}]});
pc.ondatachannel = function(event) { receiveChannel = event.channel; receiveChannel.onmessage = function(event){ document.querySelector("div#receive").innerHTML = event.data; };};
sendChannel = pc.createDataChannel("sendDataChannel", {reliable: false});
document.querySelector("button#send").onclick = function (){ var data = document.querySelector("textarea#send").value; sendChannel.send(data);};
![Page 44: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/44.jpg)
ORTC APIs
RTCDtlsTransport / RTCIceTransport / RTCIceListener / RTCRtpSender / RTCRtpReceiver / RTCRtpListener / RTCDtmfSender / RTCDataChannel / RTCSctpTransport
![Page 45: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/45.jpg)
Singnaling ServerHow to make signaling server?
WebSocket
Channel APIChannel API
Socket.IO
![Page 46: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/46.jpg)
ReferencesThanks to VECKON! And Special Thanks To WonJae Sama!
WebRTC.orghttp://www.webrtc.org/
AppRTC Demo Sitehttps://apprtc.webrtc.org/
Interactive Connectivity Establishment (ICE)https://tools.ietf.org/html/rfc5245
Session Description Protocol (SDP)https://tools.ietf.org/html/rfc4566http://en.wikipedia.org/wiki/Session_Description_Protocol
jniglehttp://xmpp.org/about-xmpp/technology-overview/jingle/
Real-time Transport Protocol (RTP)http://xmpp.org/extensions/xep-0167.html
ORTChttp://ortc.org/wp-content/uploads/2014/04/ortc.html
Google I/O 2013 WebRTC Presentationhttp://io13webrtc.appspot.com/
Best Referece Site (한글도 지원됨!)http://www.html5rocks.com/en/search?q=WebRTC
(Thanks to )
Thanks To Wikipedia!http://en.wikipedia.org/
![Page 47: Web rtc 핵심 기술에 대한 이해](https://reader031.fdocuments.net/reader031/viewer/2022012306/55b6e53ebb61eb6e688b45a2/html5/thumbnails/47.jpg)
Q & A