Download presentation
Presentation is loading. Please wait.
Published bym m Modified over 4 years ago
1
WebRTC 101 by Shuai Zhao
2
Outline Introduction Signaling Server Support WebRTC APIs. How to use it? Demo
3
History Starts at 2009 in WHATWG (Web Hypertext Application Technology Working Group) IETF and W3C get involved at 2011 W3C: http://dev.w3.org/2011/webrtc/editor/webrtc.html IETF: http://trac.tools.ietf.org/wg/rtcweb/
4
Real Time Communication (RTC) over the Internet RTP (real time transport protocol) at 1992 IETF Its the standard protocol for today’s VoIP Video/audio conferencing around 1999 IETF SIP (Session Initiation protocol) RTC over the web browser video/audio using plug-in Gmail Googletalk at 2006 WebRTC requires no plug-in and provides fast, low-delay multimedia communication using web browser
5
WebRTC Web Real-Time Communications (RTC) Add new features to web browser Using Web as a application development framwework/platform/OS javascript HTML5 Video/audio websocket Cloud computing client side applications interactive with Server resides at the cloud Its introduced to provide “Skype” services without any plug-in
6
Supported browsers
7
RTC Function in the browser The RTC function interacts with web app using standard APIs Peer-to-peer connections with another browser on-the-wire protocol TCP UDP not HTTP Signaling server a route search channel between browsers
8
Why WebRTC? No doubt, the web is becoming a application development platform The need for RTC for video/audio application is increasing New audio/video codecs are now included in web browser WebRTC can establish Peer-to-Peer communication and take care the network issue NAT firewall WebRTC can co-exist with current VoIP and PSTN network WebRTC provide video, audio and data communication channel
9
WebRTC protocol Stack IP UDP DTLS SRTP SCTP Video, Audio, Data, HTTP, WebSocket, ICE, STUN, TURN, SDP Datagram Transport Layer communications protocol Stream Control Transmission Protocol
10
The SCTP protocol reliable and unreliable secure transport packet reassemble ordered/not ordered datagram packets flow and congestion control
11
WebRTC architecture
12
The standard WebRTC Triangle WebSocket HTTP WebSocket HTTP Webserver + Signaling Server
13
What is signaling? its like when you try to call someone and you need to send out a signal and try to make a connection exchange peers information browser version video/audio codec its the control band for webrtc peer communication, not the actual video/audio/data transfer channel
14
Signaling Server Support No standards are defined from the webRTC APIs The signaling can run over HTTP or websocket ex: using Node.js ws module FireBase Socket.io
15
WebRTC Session Establishment Signaling + web Server Browser-1Broswer-2 1 2 5 8 4 3 6 7 9 10 11
16
How to use WebRTC? getUserMedia() RTCPeerConnection() addstream() Signal offer create/accept Get Local Media Setup Peer connection Attach Media/datachannl to connection Call the peers
17
WebRTC APIs RTCPeerConnection: var connections = new RTCPeerConnection(); Addstream to your connection getUserMedia addstream connections.onaddstream = function {} //add stream event handler RTCDatachannel var datachannel = connections.createDataChannel(); datachannel.send()
18
getUserMedia() var video //FInd out which browser you are using and get video and audio media from your computer navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; //enabling video and audio channels navigator.getUserMedia({ video: true, audio: true }, function (stream) { video = document.querySelector('video'); //inserting our stream to the video tag video.src = window.URL.createObjectURL(stream); }, function (err) {});
19
RTCPeerConnection APIs RTCPeerConnection() – Returns a new RTCPeerConnection object. RTCPeerConnection.addStream() RTCPeerConnection.close() RTCPeerConnection.createDataChannel() – Creates a new RTCDataChannel. NOW YOU Need a Signaling Server in order to send signaling message to another peer (browser)
20
Steps to establish Peer connection and add streams on that connection Get Local Media Setup Peer connection Attach Media/datachannl to connection Call the peers Get Local Media Setup Peer connection Attach Media/datachannl to connection Call the peers Signaling server
21
Example1 Server: Node.js – ws module run: node server.js Client: Video/audio start a simple server to server your HTML file or your media wont be accessible ex: python –m SimpleHTTPServer
26
Session description Protocol (SDP) Got message {"type":"offer","offer":{"type":"offer","sdp":"v=0\r\no=- 8175972782099455380 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE audio video data\r\na=msid-semantic: WMS 1kQ3vQSpUGBL3yP0sk9AFL40livsUxkWAW5g\r\nm=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 126\r\nc=IN IP4 0.0.0.0\r\na=rtcp:9 IN IP4 0.0.0.0\r\na=ice-ufrag:iyk/KCMoKxcKED4a\r\na=ice-pwd:QEhADJARmLufNI78J3LNq1qU\r\na=fingerprint:sha-256 46:A3:6E:F1:CA:AE:EE:32:77:8E:1B:DA:5B:8B:B5:F5:21:C7:EC:41:94:5D:8D:83:15:BF:10:D7:1E:54:31:44\r\na=setup:actpass\r\na=mid:audio\r\na=extmap:1 urn:ietf:params:rtp- hdrext:ssrc-audio-level\r\na=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\r\na=sendrecv\r\na=rtcp-mux\r\na=rtpmap:111 opus/48000/2\r\na=rtcp-fb:111 transport-cc\r\na=fmtp:111 minptime=10; useinbandfec=1\r\na=rtpmap:103 ISAC/16000\r\na=rtpmap:104 ISAC/32000\r\na=rtpmap:9 G722/8000\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:106 CN/32000\r\na=rtpmap:105 CN/16000\r\na=rtpmap:13 CN/8000\r\na=rtpmap:126 telephone-event/8000\r\na=maxptime:60\r\na=ssrc:1075132903 cname:ueTFCyDAVb0WjWmm\r\na=ssrc:1075132903 msid:1kQ3vQSpUGBL3yP0sk9AFL40livsUxkWAW5g 9a3b4e61-e2b8-42d0-a6fd-6dc275a90c81\r\na=ssrc:1075132903 mslabel:1kQ3vQSpUGBL3yP0sk9AFL40livsUxkWAW5g\r\na=ssrc:1075132903 label:9a3b4e61-e2b8-42d0-a6fd- 6dc275a90c81\r\nm=video 9 UDP/TLS/RTP/SAVPF 100 101 116 117 96 97 98\r\nc=IN IP4 0.0.0.0\r\na=rtcp:9 IN IP4 0.0.0.0\r\na=ice-ufrag:iyk/KCMoKxcKED4a\r\na=ice- pwd:QEhADJARmLufNI78J3LNq1qU\r\na=fingerprint:sha-256 46:A3:6E:F1:CA:AE:EE:32:77:8E:1B:DA:5B:8B:B5:F5:21:C7:EC:41:94:5D:8D:83:15:BF:10:D7:1E:54:31:44\r\na=setup:actpass\r\na=mid:video\r\na=extmap:2 urn:ietf:params:rtp- hdrext:toffset\r\na=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\r\na=extmap:4 urn:3gpp:video-orientation\r\na=sendrecv\r\na=rtcp- mux\r\na=rtpmap:100 VP8/90000\r\na=rtcp-fb:100 ccm fir\r\na=rtcp-fb:100 nack\r\na=rtcp-fb:100 nack pli\r\na=rtcp-fb:100 goog-remb\r\na=rtcp-fb:100 transport- cc\r\na=rtpmap:101 VP9/90000\r\na=rtcp-fb:101 ccm fir\r\na=rtcp-fb:101 nack\r\na=rtcp-fb:101 nack pli\r\na=rtcp-fb:101 goog-remb\r\na=rtcp-fb:101 transport- cc\r\na=rtpmap:116 red/90000\r\na=rtpmap:117 ulpfec/90000\r\na=rtpmap:96 rtx/90000\r\na=fmtp:96 apt=100\r\na=rtpmap:97 rtx/90000\r\na=fmtp:97 apt=101\r\na=rtpmap:98 rtx/90000\r\na=fmtp:98 apt=116\r\na=ssrc-group:FID 3022760465 3166375697\r\na=ssrc:3022760465 cname:ueTFCyDAVb0WjWmm\r\na=ssrc:3022760465 msid:1kQ3vQSpUGBL3yP0sk9AFL40livsUxkWAW5g b44a5149-1793-463f-a056-79a1f01ce26b\r\na=ssrc:3022760465 mslabel:1kQ3vQSpUGBL3yP0sk9AFL40livsUxkWAW5g\r\na=ssrc:3022760465 label:b44a5149-1793-463f-a056-79a1f01ce26b\r\na=ssrc:3166375697 cname:ueTFCyDAVb0WjWmm\r\na=ssrc:3166375697 msid:1kQ3vQSpUGBL3yP0sk9AFL40livsUxkWAW5g b44a5149-1793-463f-a056-79a1f01ce26b\r\na=ssrc:3166375697 mslabel:1kQ3vQSpUGBL3yP0sk9AFL40livsUxkWAW5g\r\na=ssrc:3166375697 label:b44a5149-1793-463f-a056-79a1f01ce26b\r\nm=application 9 UDP/TLS/RTP/SAVPF 127\r\nc=IN IP4 0.0.0.0\r\nb=AS:30\r\na=rtcp:9 IN IP4 0.0.0.0\r\na=ice-ufrag:iyk/KCMoKxcKED4a\r\na=ice-pwd:QEhADJARmLufNI78J3LNq1qU\r\na=fingerprint:sha-256 46:A3:6E:F1:CA:AE:EE:32:77:8E:1B:DA:5B:8B:B5:F5:21:C7:EC:41:94:5D:8D:83:15:BF:10:D7:1E:54:31:44\r\na=setup:actpass\r\na=mid:data\r\na=sendrecv\r\na=rtcp- mux\r\na=rtpmap:127 google-data/90000\r\na=ssrc:3113773943 cname:csQaCKzMM0dKvLLD\r\na=ssrc:3113773943 msid:myDataChannel myDataChannel\r\na=ssrc:3113773943 mslabel:myDataChannel\r\na=ssrc:3113773943 label:myDataChannel\r\n"},"name":"user1"}client-3-1.js:13 Got message {"type":"candidate","candidate":{"candidate":"candidate:4252197341 1 udp 2122260223 10.205.0.82 61008 typ host generation 0 ufrag iyk/KCMoKxcKED4a","sdpMid":"audio","sdpMLineIndex":0}}
27
Useful Links More on WebRTC signaling: http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ Demo link: https://github.com/webrtc/samples http://www.tutorialspoint.com/webrtc/index.htm Node.js Websocket https://www.npmjs.com/package/nodejs-websocket
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.