Web rtc 핵심 기술에 대한 이해
2 likes828 views
This document provides an overview of WebRTC including its history and key concepts. WebRTC allows for real-time communication between browsers or mobile applications. It uses peer-to-peer connections over protocols like ICE, STUN, and TURN to establish connections that can transmit audio, video, and generic data independently of intermediaries. The document outlines WebRTC's signaling process, APIs like RTCPeerConnection and RTCDataChannel, and how sessions are described through SDP. It also discusses support across browsers and applications as well as related concepts like RTP, DTLS, and ORTC.
![MediaStream ( constraints )
video: {
mandatory: {
minWidth: 640,
minHeight: 360
},
optional [{
minWidth: 1280,
minHeight: 720
}]
}
Controls the contents
Media type
Resolution
Frame Rate](https://image.slidesharecdn.com/webrt-150529051537-lva1-app6891/85/Web-rtc-40-320.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}
]
}](https://image.slidesharecdn.com/webrt-150529051537-lva1-app6891/85/Web-rtc-42-320.jpg)
![RTCDataChannel
var 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);
};](https://image.slidesharecdn.com/webrt-150529051537-lva1-app6891/85/Web-rtc-43-320.jpg)
Web rtc 핵심 기술에 대한 이해
- 4. WebRTC & VOIP NOT NEW!
- 8. P2P WebRTC & JINGLE Extensible Messaging and Presence Protocol Voice Streaming Video Streaming File-Sharing Session Initiate & maintain peer to peer connection RTP Real-time Transport Protocol ICE Interactive Connectivity Establishment SDP Session Description Protocol
- 9. WebRTC & ORTC WebRTC (Shim ) SIP/SDP API Layer
- 10. WebRTC Roadmap FPWD : First Public Working Draft CR : Candidate Recommendations PR : Proposed Recommenedations Rec : Recommendations
- 11. Support Web Browser Mobile 29+ 24+ WebVie w 5.x 23+ 22+ 18+ ??? Not Yet AppRTC ???20+ AppRTC Browser 적용 버전이 다소 차이가 있을 수 있음
- 12. Support
- 15. Architect
- 16. P2P
- 18. P2P Super Node Super Node Super Node
- 19. P2P Server
- 20. Signaling
- 21. Signaling
- 22. ICE ICE Framework (Interactive Connectivity Establishment) A framework for connecting peers Tries to find the best path for each call
- 23. 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
- 24. SDP v=0 o=- 7614219274584779017 2 IN IP4 127.0.0.1 s=- t=0 0 a=group:BUNDLE audio video a=msid-semantic: WMS m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126 c=IN IP4 0.0.0.0 a=rtcp:1 IN IP4 0.0.0.0 a=ice-ufrag:W2TGCZw2NZHuwlnf a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level a=mid:audio a=rtcp-mux a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQe a=rtpmap:111 opus/48000/2 ...
- 25. v=0 o=- 7614219274584779017 2 IN IP4 127.0.0.1 s=- t=0 0 a=group:BUNDLE audio video a=msid-semantic: WMS m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126 c=IN IP4 0.0.0.0 a=rtcp:1 IN IP4 0.0.0.0 a=ice-ufrag:W2TGCZw2NZHuwlnf a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level a=mid:audio a=rtcp-mux a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQe a=rtpmap:111 opus/48000/2 ... SDP Session description a=* (zero or more session attribute lines)
- 26. v=0 o=- 7614219274584779017 2 IN IP4 127.0.0.1 s=- t=0 0 a=group:BUNDLE audio video a=msid-semantic: WMS m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126 c=IN IP4 0.0.0.0 a=rtcp:1 IN IP4 0.0.0.0 a=ice-ufrag:W2TGCZw2NZHuwlnf a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level a=mid:audio a=rtcp-mux a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQe a=rtpmap:111 opus/48000/2 ... SDP Session description Media description (if present) m= (media name and transport address)
- 29. NAT ( Network Address Translation ) Corn NAT Semmetric NAT
- 30. STUN (Session Traversal Utilities for NAT)
- 31. TURN (Traversal Using Relays around NAT)
- 32. UDP : User Datagram Protocol DTLS (Datagram Transport Layer Security) No 3-Way HandShake Simple Header
- 33. UDP + TCP SCTP (Stream Control Transmission Protocol) 4-Way HandShake Stream Oriented Stream ID Stream Sequence Number Multi Association DATA 신뢰도 UP DATA 전송속도 UP MULTI HOMING MULTI Streaming
- 34. RTP ( Real-time Transport Protocol ) network protocol for delivering audio and video over IP networks RTP IP TCP RTP IP TCP Network RTP Security SRTP
- 35. WebRTC Connection Sequence Diagram
- 38. WebRTC APIs Main APIs MediaStream (aka getUserMedia) RTCPeerConnection RTCDataChannel
- 39. 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);
- 40. MediaStream ( constraints ) video: { mandatory: { minWidth: 640, minHeight: 360 }, optional [{ minWidth: 1280, minHeight: 720 }] } Controls the contents Media type Resolution Frame Rate
- 41. RTCPeerConnection pc = 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); }
- 42. 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} ] }
- 43. RTCDataChannel var 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); };
- 44. ORTC APIs RTCDtlsTransport / RTCIceTransport / RTCIceListener / RTCRtpSender / RTCRtpReceiver / RTCRtpListener / RTCDtmfSender / RTCDataChannel / RTCSctpTransport
- 45. Singnaling Server How to make signaling server? WebSocket Channel APIChannel API Socket.IO
- 46. References Thanks to VECKON! And Special Thanks To WonJae Sama! WebRTC.org http://www.webrtc.org/ AppRTC Demo Site https://apprtc.webrtc.org/ Interactive Connectivity Establishment (ICE) https://tools.ietf.org/html/rfc5245 Session Description Protocol (SDP) https://tools.ietf.org/html/rfc4566 http://en.wikipedia.org/wiki/Session_Description_Protocol jnigle http://xmpp.org/about-xmpp/technology-overview/jingle/ Real-time Transport Protocol (RTP) http://xmpp.org/extensions/xep-0167.html ORTC http://ortc.org/wp-content/uploads/2014/04/ortc.html Google I/O 2013 WebRTC Presentation http://io13webrtc.appspot.com/ Best Referece Site (한글도 지원됨!) http://www.html5rocks.com/en/search?q=WebRTC (Thanks to ) Thanks To Wikipedia! http://en.wikipedia.org/
- 47. Q & A