WebRTC WebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD Alan Johnston, PhD Rowan University h9p://standardsplay.com h9p://allthingsrtc.org IETF 100 Singapore November 2017 0
WebRTC: A Joint Standards Effort • Internet Engineering Task Force (IETF) and World Wide Web ConsorFum (W3C) are working together on WebRTC • IETF – Protocols – “bits on wire” – Main protocols are already RFCs, but many extensions in progress – RTCWEB (Real-Time CommunicaFons on the Web) Working Group is the main focus, but other WGs involved as well • MMUSIC WG (ICE and SDP extensions) • TRAM WG (STUN and TURN extensions) • AVTCORE WG (RTP extensions) • RMCAT WG (RTP Media CongesFon Avoidance) • W3C – APIs – used by JavaScript code in HTML5 – WEBRTC WG and Media Capture TF are main groups IETF 100 Singapore November 2017 1
WebRTC Protocols ApplicaFon Layer ICE HTTP SRTP SDP WebSock STUN et TURN Transport Layer SCTP TLS DTLS DTLS TCP UDP UDP Network Layer IP IETF 100 Singapore November 2017 2
The Browser RTC FuncFon • New Real-Time CommunicaFon (RTC) Web Signaling FuncFon built-in to Server Server browsers • Contains HTTP or WebSockets HTTP or WebSockets (Signaling) – Audio and video codecs JavaScript/HTML/CSS – Ability to negoFate peer- Other APIs RTC APIs to-peer connecFons – Echo cancellaFon, packet Web Browser On-the-wire protocols loss concealment RTC Browser (Media or Data) FuncFon • In Chrome, Firefox, Microso^ EDGE, and NaFve OS Services Safari today IETF 100 Singapore November 2017 3
Benefits of WebRTC For Developer For User • No download or install – • Streamlined development – easy to use one plaaorm • All communicaton • NAT traversal only uses encrypted – private expensive relays when no • Reliable session other choice establishment – “just works” • Advanced voice and video • Excellent voice and video codecs without licensing quality • Many more choices for real- Fme communicaFon IETF 100 Singapore November 2017 4
WebRTC Triangle Web Server (ApplicaFon) Peer ConnecFon (Audio, Video, and/or Data) Browser L Browser M (Running HTML5 ApplicaFon (Running HTML5 ApplicaFon from Web Server) from Web Server) • Both browsers running the same web applicaFon from web server • Peer ConnecFon established between them with the help of the web server IETF 100 Singapore November 2017 5
WebRTC Triangle Web Server "Signaling" (ApplicaFon & Signaling) Peer ConnecFon (Audio, Video, and/or Data) Browser L Browser M (Running HTML5 ApplicaFon (Running HTML5 ApplicaFon from Web Server) from Web Server) • Both browsers running the same web applicaFon from web server • Peer ConnecFon established between them with the help of the web server ("Signaling") IETF 100 Singapore November 2017 6
WebRTC Trapezoid SIP or Jingle Web Server B Web Server A (ApplicaFon B) (ApplicaFon A) Peer ConnecFon (Audio and/or Video) Browser T Browser M (Running HTML5 ApplicaFon (Running HTML5 ApplicaFon from Web Server B) from Web Server A) • Similar to SIP Trapezoid • Web Servers communicate using SIP or Jingle or proprietary IETF 100 Singapore November 2017 7
NAT Traversal and STUN
Peer-to-Peer Media with WebRTC Web Server Internet Router Home WiFi Router Browser D Browser M Coffee Shop Browser T WiFi Router Media can go directly between browsers! Browser L IETF 100 Singapore November 2017 9
NAT Complicates Peer-to-Peer Media Web Server Most browsers are behind NATs on the Internet, which complicates the establishment of peer-to-peer media sessions. Internet Router with Home WiFi NAT with NAT Browser D Browser M Coffee Shop Browser T WiFi with NAT Browser L IETF 100 Singapore November 2017 10
NAT – Network Address Translator Internet “Outside” Public IP Address 203.0.113.4 “Inside” Private IP Addresses 192.168.x.x Home WiFi with NAT Browser M 192.168.0.5 Browser T 192.168.0.6 A NAT maps an “inside” address to an “outside” address allowing mulFple hosts to share the same IP address. IETF 100 Singapore November 2017 11
STUN Session Traversal UFliFes for NAT STUN Server Web Server TURN Server 198.51.100.9 198.51.100.2 Browser sends STUN test packet to STUN server to learn its public IP address Internet (address of the NAT). Home WiFi Router with with NAT NAT 203.0.113.4 Browser D Browser M 192.168.0.5 Coffee Shop Browser T WiFi with NAT No authenFcaFon of STUN! Browser L IETF 100 Singapore November 2017 12
TURN – Traversal Using Relay around NAT STUN TURN Server as a In some cases, hole Web Server Server Media Relay punching fails, and a TURN Media Relay on the public Internet must Internet be used. Router with Home WiFi NAT with NAT Browser D Browser M Coffee Shop Browser T WiFi with NAT Browser L IETF 100 Singapore November 2017 13
What's New for Web Developers
Two API pieces • Local media capture – Camera, Microphone, <video> element, screen/ window • Peer connecFon – Media and data between two client browsers (or arbitrary devices using naFve API) IETF 100 Singapore November 2017 15
WebRTC usage in brief Obtain Local Get more media Media All media added Set Up Peer Connection Peer ConnecFon established Attach Media Apach more media or data or Data Ready for call Exchange Offer/Answer IETF 100 Singapore November 2017 16
WebRTC usage in brief • getUserMedia() Obtain Local Get more media Media – Audio and/or video – Constraints All media added – User permissions Set Up Peer • Browser must ask before Connection allowing a page to access Peer ConnecFon established microphone or camera • MediaStream Attach Media Apach more media or data or Data • MediaStreamTrack Ready for call Exchange Offer/Answer IETF 100 Singapore November 2017 17
WebRTC usage in brief • RTCPeerConnection Obtain Local Get more media Media – Direct media – Between two peers All media added – ICE processing Set Up Peer – SDP processing Connection – DTMF support Peer ConnecFon established – Data channels Attach Media Apach more media or data – IdenFty verificaFon or Data – StaFsFcs reporFng Ready for call Exchange Offer/Answer IETF 100 Singapore November 2017 18
WebRTC usage in brief • addTrack() Obtain Local Get more media Media – Doesn't change media state! • removeTrack() All media added – Dipo! Set Up Peer • createDataChannel() Connection – Depends on transport Peer ConnecFon established Attach Media Apach more media or data or Data Ready for call Exchange Offer/Answer IETF 100 Singapore November 2017 19
WebRTC usage in brief • createOffer(), Obtain Local Get more media createAnswer() Media • setLocalDescription(), All media added setRemoteDescription() Set Up Peer Connection • Offer/answer exchange Peer ConnecFon established needed for this to work Attach Media Apach more media or data or Data Ready for call Exchange Offer/Answer IETF 100 Singapore November 2017 20
WebRTC usage in brief Set Up Signaling Channel Obtain Local Get more Media media Set Up Peer ConnecFon Apach Media Apach more or Data media or data Exchange Session DescripFons IETF 100 Singapore November 2017 21
Local Media
Media capture and use • navigator. mediaDevices.getUserMedia() – Request camera, microphone access – Permission check required for hpp page • <video> .srcObject = <mediastream> – Direct assignment – Works for <audio> as well • new MediaStream() – Can build from tracks in other streams IETF 100 Singapore November 2017 23
Browser Media Model: Sources and Sinks • Sources can be: – staFc: files, RTSP, <canvas>, etc – dynamic: • local: webcam, microphone - need getUserMedia to access • remote: RTCPeerConnecFon or streaming media • Sinks are <img>, <video>, and <audio> tags – They can be sized, which can cause scaling depending on the constraints on the source • RTCPeerConnecFon can be both a source and a sink IETF 100 Singapore November 2017 24
Browser Prompts for Permission IETF 100 Singapore November 2017 25
Local: Tracks and Streams • A MediaStreamTrack – is a handle to one real-Fme source of media of one type (audio/video/depth) • A MediaStream – represents a collecFon of zero or more MediaStreamTrack s, of the same or different media types – indicates that the collected tracks are to be kept synchronized to the best ability of the browser IETF 100 Singapore November 2017 26
Peer ConnecFons
RTCPeerConnecFon APIs • Track stuff – addTrack(), removeTrack() – onaddtrack, onremovetrack • Offer/answer stuff – createOffer(), createAnswer() – setLocalDescripFon(), setRemoteDescripFon() • Much more IETF 100 Singapore November 2017 28
SDP Offer/Answer
Session DescripFon Protocol (SDP) • Used by browser and WebRTC APIs to describe media session – RTP media flows, candidate transport addresses, codec informaFon, media keying informaFon • SDP is widely used in SIP VoIP and video systems • Browser use of SDP is based on Offer/Answer – Defined in JSEP - JavaScript Session Establishment Protocol – NegoFaFon proceeds according to Offer/Answer State Machine in next slides IETF 100 Singapore November 2017 30
Recommend
More recommend
