web rtc 핵심 기술에 대한 이해
TRANSCRIPT
WebRTC
Web Real-TimeCommunication
WebRTC & VOIP
WebRTC & VOIP
NOT NEW!
WebRTC Service Companies
VeckonNOW
History On Web
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
WebRTC & ORTC
WebRTC (Shim )
SIP/SDP
API Layer
WebRTC Roadmap
FPWD : First Public Working DraftCR : Candidate RecommendationsPR : Proposed RecommenedationsRec : Recommendations
Support
Web Browser
Mobile
29+ 24+
WebView
5.x
23+ 22+ 18+ ??? Not Yet
AppRTC ???20+ AppRTC Browser
적용버전이다소차이가있을수있음
Support
KEYWORDs
P2P
SDP
ICENAT
TURN
STUN
Signaling
RTP
SCTP
DTLS
Architect
P2P
P2P
Find(+Discovery)
Connection(Communication)
P2P
Super Node
Super Node
Super Node
P2P
Server
Signaling
Signaling
ICEICE Framework (Interactive Connectivity Establishment)
A framework for connecting peers
Tries to find the best path for each call
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
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...
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)
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)
Ideal Network Environments
Real Network Environments
NAT ( Network Address Translation )
Corn NAT
Semmetric NAT
STUN (Session Traversal Utilities for NAT)
TURN (Traversal Using Relays around NAT)
UDP : User Datagram ProtocolDTLS (Datagram Transport Layer Security)
No 3-Way HandShake
Simple Header
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
RTP ( Real-time Transport Protocol )network protocol for delivering audio and video over IP networks
RTP
IP
TCP
RTP
IP
TCP
Network
RTP SecuritySRTP
WebRTC Connection Sequence Diagram
WebRTC Target
VOICE
VIDEO
File Sharing
Media
Data
WebRTC APIs
Main APIs
MediaStream (aka getUserMedia)
RTCPeerConnection
RTCDataChannel
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);
MediaStream ( constraints )video: { mandatory: { minWidth: 640, minHeight: 360 }, optional [{ minWidth: 1280, minHeight: 720 }]}
Controls the contents
Media type
Resolution
Frame Rate
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);}
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} ]}
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);};
ORTC APIs
RTCDtlsTransport / RTCIceTransport / RTCIceListener / RTCRtpSender / RTCRtpReceiver / RTCRtpListener / RTCDtmfSender / RTCDataChannel / RTCSctpTransport
Singnaling ServerHow to make signaling server?
WebSocket
Channel APIChannel API
Socket.IO
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/
Q & A