![Page 1: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/1.jpg)
0
WebRTC:Real-TimeCommunica2onsontheWeb
DanBurne9,PhDh9p://standardsplay.comh9p://allthingsrtc.org
AlanJohnston,PhDRowanUniversity
WebRTC
IETF100SingaporeNovember2017
![Page 2: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/2.jpg)
WebRTC:AJointStandardsEffort• InternetEngineeringTaskForce(IETF)andWorldWideWeb
ConsorFum(W3C)areworkingtogetheronWebRTC• IETF
– Protocols–“bitsonwire”– MainprotocolsarealreadyRFCs,butmanyextensionsin
progress– RTCWEB(Real-TimeCommunicaFonsontheWeb)Working
Groupisthemainfocus,butotherWGsinvolvedaswell• MMUSICWG(ICEandSDPextensions)• TRAMWG(STUNandTURNextensions)• AVTCOREWG(RTPextensions)• RMCATWG(RTPMediaCongesFonAvoidance)
• W3C– APIs–usedbyJavaScriptcodeinHTML5– WEBRTCWGandMediaCaptureTFaremaingroups
1IETF100SingaporeNovember2017
![Page 3: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/3.jpg)
WebRTCProtocols
IP
UDP
WebSocket
SRTP SDP
TURNSTUN
ICE
TCPTLS
TransportLayer
NetworkLayer
ApplicaFonLayer
DTLS
HTTP
UDPDTLS
SCTP
2IETF100SingaporeNovember2017
![Page 4: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/4.jpg)
TheBrowserRTCFuncFon• NewReal-TimeCommunicaFon(RTC)FuncFonbuilt-intobrowsers
• Contains– Audioandvideocodecs– AbilitytonegoFatepeer-
to-peerconnecFons– EchocancellaFon,packet
lossconcealment• InChrome,Firefox,Microso^EDGE,andSafaritoday
3
HTTPorWebSockets
On-the-wireprotocols
RTCAPIsOtherAPIs
NaFveOSServices
WebServer
JavaScript/HTML/CSS
WebBrowser
BrowserRTC
FuncFon
(Signaling)
(MediaorData)
HTTPorWebSockets
SignalingServer
IETF100SingaporeNovember2017
![Page 5: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/5.jpg)
BenefitsofWebRTC
ForDeveloper • Streamlineddevelopment–
oneplaaorm• NATtraversalonlyuses
expensiverelayswhennootherchoice
• Advancedvoiceandvideocodecswithoutlicensing
ForUser• Nodownloadorinstall–
easytouse• Allcommunicaton
encrypted–private• Reliablesession
establishment–“justworks”• Excellentvoiceandvideo
quality• Manymorechoicesforreal-
FmecommunicaFon
4IETF100SingaporeNovember2017
![Page 6: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/6.jpg)
WebRTCTriangle
• BothbrowsersrunningthesamewebapplicaFonfromwebserver
• PeerConnecFonestablishedbetweenthemwiththehelpofthewebserver
WebServer(ApplicaFon)
BrowserM(RunningHTML5ApplicaFon
fromWebServer)
BrowserL(RunningHTML5ApplicaFon
fromWebServer)
PeerConnecFon(Audio,Video,and/orData)
5IETF100SingaporeNovember2017
![Page 7: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/7.jpg)
WebRTCTriangle
• BothbrowsersrunningthesamewebapplicaFonfromwebserver
• PeerConnecFonestablishedbetweenthemwiththehelpofthewebserver("Signaling")
WebServer(ApplicaFon&Signaling)
BrowserM(RunningHTML5ApplicaFon
fromWebServer)
BrowserL(RunningHTML5ApplicaFon
fromWebServer)
PeerConnecFon(Audio,Video,and/orData)
6IETF100SingaporeNovember2017
"Signaling"
![Page 8: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/8.jpg)
WebRTCTrapezoid
• SimilartoSIPTrapezoid• WebServerscommunicateusingSIPorJingleorproprietary
WebServerA(ApplicaFonA)
PeerConnecFon(Audioand/orVideo)
WebServerB(ApplicaFonB)
SIPorJingle
BrowserM(RunningHTML5ApplicaFon
fromWebServerA)
BrowserT(RunningHTML5ApplicaFon
fromWebServerB)
7IETF100SingaporeNovember2017
![Page 9: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/9.jpg)
NATTraversalandSTUN
![Page 10: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/10.jpg)
Peer-to-PeerMediawithWebRTC
WebServer
Internet
Router
BrowserL
HomeWiFiRouter
BrowserT
BrowserM
CoffeeShopWiFiRouter
BrowserD
9
Mediacangodirectlybetweenbrowsers!
IETF100SingaporeNovember2017
![Page 11: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/11.jpg)
WebServer
Internet
RouterwithNAT
BrowserL
HomeWiFiwithNAT
BrowserT
BrowserM
MostbrowsersarebehindNATsontheInternet,whichcomplicatestheestablishmentofpeer-to-peermediasessions.
CoffeeShopWiFiwith
NAT
BrowserD
NATComplicatesPeer-to-PeerMedia
10IETF100SingaporeNovember2017
![Page 12: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/12.jpg)
Internet
HomeWiFiwithNAT
BrowserT192.168.0.6
BrowserM192.168.0.5
“Outside”PublicIPAddress203.0.113.4
“Inside”PrivateIPAddresses192.168.x.x
NAT–NetworkAddressTranslator
11
ANATmapsan“inside”addresstoan“outside”addressallowingmulFplehoststosharethesameIPaddress.
IETF100SingaporeNovember2017
![Page 13: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/13.jpg)
WebServer
Internet
RouterwithNAT
BrowserL
HomeWiFiwithNAT
203.0.113.4
BrowserT
BrowserM192.168.0.5
CoffeeShopWiFiwith
NAT
BrowserD
TURNServer198.51.100.2
BrowsersendsSTUNtestpackettoSTUNservertolearnitspublicIPaddress(addressoftheNAT).
STUNServer198.51.100.9
STUNSessionTraversalUFliFesforNAT
12IETF100SingaporeNovember2017
NoauthenFcaFonofSTUN!
![Page 14: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/14.jpg)
WebServer
Internet
RouterwithNAT
BrowserL
HomeWiFiwithNAT
BrowserT
BrowserM
CoffeeShopWiFiwith
NAT
BrowserD
TURNServerasaMediaRelay
Insomecases,holepunchingfails,andaTURNMediaRelayonthepublicInternetmustbeused.
STUNServer
TURN–TraversalUsingRelayaroundNAT
13IETF100SingaporeNovember2017
![Page 15: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/15.jpg)
What'sNewforWebDevelopers
![Page 16: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/16.jpg)
TwoAPIpieces
• Localmediacapture– Camera,Microphone,<video>element,screen/window
• PeerconnecFon– Mediaanddatabetweentwoclientbrowsers(orarbitrarydevicesusingnaFveAPI)
IETF100SingaporeNovember2017 15
![Page 17: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/17.jpg)
WebRTCusageinbrief
Set Up Peer Connection
Obtain Local Media
Exchange Offer/Answer
Attach Media or Data
Getmoremedia
Allmediaadded
PeerConnecFonestablished
Apachmoremediaordata
Readyforcall
IETF100SingaporeNovember2017 16
![Page 18: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/18.jpg)
WebRTCusageinbrief
• getUserMedia() – Audioand/orvideo– Constraints– Userpermissions
• Browsermustaskbeforeallowingapagetoaccessmicrophoneorcamera
• MediaStream • MediaStreamTrack
Set Up Peer Connection
Obtain Local Media
Exchange Offer/Answer
Attach Media or Data
Getmoremedia
Allmediaadded
PeerConnecFonestablished
Apachmoremediaordata
Readyforcall
IETF100SingaporeNovember2017 17
![Page 19: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/19.jpg)
WebRTCusageinbrief
• RTCPeerConnection – Directmedia– Betweentwopeers– ICEprocessing– SDPprocessing– DTMFsupport– Datachannels– IdenFtyverificaFon– StaFsFcsreporFng
Set Up Peer Connection
Obtain Local Media
Exchange Offer/Answer
Attach Media or Data
Getmoremedia
Allmediaadded
PeerConnecFonestablished
Apachmoremediaordata
Readyforcall
IETF100SingaporeNovember2017 18
![Page 20: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/20.jpg)
WebRTCusageinbrief
• addTrack() – Doesn'tchangemediastate!
• removeTrack() – Dipo!
• createDataChannel() – Dependsontransport
Set Up Peer Connection
Obtain Local Media
Exchange Offer/Answer
Attach Media or Data
Getmoremedia
Allmediaadded
PeerConnecFonestablished
Apachmoremediaordata
Readyforcall
IETF100SingaporeNovember2017 19
![Page 21: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/21.jpg)
WebRTCusageinbrief
• createOffer(), createAnswer()
• setLocalDescription(), setRemoteDescription()
• Offer/answerexchangeneededforthistowork
Set Up Peer Connection
Obtain Local Media
Exchange Offer/Answer
Attach Media or Data
Getmoremedia
Allmediaadded
PeerConnecFonestablished
Apachmoremediaordata
Readyforcall
IETF100SingaporeNovember2017 20
![Page 22: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/22.jpg)
WebRTCusageinbrief
SetUpPeerConnecFon
ObtainLocalMedia
ExchangeSession
DescripFons
ApachMediaorData
Getmoremedia
Apachmoremediaordata
SetUpSignalingChannel
21IETF100SingaporeNovember2017
![Page 23: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/23.jpg)
LocalMedia
![Page 24: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/24.jpg)
Mediacaptureanduse
• navigator. mediaDevices.getUserMedia() – Requestcamera,microphoneaccess– Permissioncheckrequiredforhpppage
• <video>.srcObject = <mediastream>– Directassignment– Worksfor<audio>aswell
• new MediaStream() – Canbuildfromtracksinotherstreams
IETF100SingaporeNovember2017 23
![Page 25: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/25.jpg)
BrowserMediaModel:SourcesandSinks
• Sourcescanbe:– staFc:files,RTSP,<canvas>,etc– dynamic:
• local:webcam,microphone-needgetUserMediatoaccess
• remote:RTCPeerConnecFonorstreamingmedia
• Sinksare<img>,<video>,and<audio>tags– Theycanbesized,whichcancausescalingdependingontheconstraintsonthesource
• RTCPeerConnecFoncanbebothasourceandasink
24IETF100SingaporeNovember2017
![Page 26: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/26.jpg)
BrowserPromptsforPermission
25IETF100SingaporeNovember2017
![Page 27: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/27.jpg)
Local:TracksandStreams
• AMediaStreamTrack – isahandletoonereal-Fmesourceofmediaofonetype(audio/video/depth)
• AMediaStream – representsacollecFonofzeroormoreMediaStreamTracks,ofthesameordifferentmediatypes
– indicatesthatthecollectedtracksaretobekeptsynchronizedtothebestabilityofthebrowser
IETF100SingaporeNovember2017 26
![Page 28: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/28.jpg)
PeerConnecFons
![Page 29: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/29.jpg)
RTCPeerConnecFonAPIs
• Trackstuff– addTrack(),removeTrack()– onaddtrack,onremovetrack
• Offer/answerstuff– createOffer(),createAnswer()– setLocalDescripFon(),setRemoteDescripFon()
• Muchmore
IETF100SingaporeNovember2017 28
![Page 30: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/30.jpg)
SDPOffer/Answer
![Page 31: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/31.jpg)
SessionDescripFonProtocol(SDP)
• UsedbybrowserandWebRTCAPIstodescribemediasession– RTPmediaflows,candidatetransportaddresses,codecinformaFon,mediakeyinginformaFon
• SDPiswidelyusedinSIPVoIPandvideosystems• BrowseruseofSDPisbasedonOffer/Answer– DefinedinJSEP-JavaScriptSessionEstablishmentProtocol
– NegoFaFonproceedsaccordingtoOffer/AnswerStateMachineinnextslides
30IETF100SingaporeNovember2017
![Page 32: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/32.jpg)
SDPOffer/AnswerinRTCPeerConnecFon
• PeerConnecFonAPIstreattheprotocol-levelconfig(SDP)asablob
• createOffer(),createAnswer() – generateSDP
• setLocalDescription(),setRemoteDescription() – tellthebrowserwhichSDPtouse
31IETF100SingaporeNovember2017
![Page 33: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/33.jpg)
Offer/AnswerStateMachine
32
stable
have-remote-offer
have-local-offer
IETF100SingaporeNovember2017
createOffer()
![Page 34: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/34.jpg)
Offer/AnswerStateMachine
33
stable
have-remote-offer
have-local-offer
setLocalDescripFon(localOffer)
IETF100SingaporeNovember2017
createOffer()
![Page 35: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/35.jpg)
Offer/AnswerStateMachine
34
stable
have-remote-offer
have-local-offer
setLocalDescripFon(localOffer)
setRemoteDescripFon(remoteOffer)
IETF100SingaporeNovember2017
SDPoffersentoversignalingchanneltootherbrowser
createOffer()
createAnswer()
![Page 36: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/36.jpg)
Offer/AnswerStateMachine
35
stable
have-remote-offer
have-local-offer
setLocalDescripFon(localAnswer)
setLocalDescripFon(localOffer)
setRemoteDescripFon(remoteOffer)
IETF100SingaporeNovember2017
SDPoffersentoversignalingchanneltootherbrowser
createOffer()
createAnswer()
![Page 37: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/37.jpg)
Offer/AnswerStateMachine
36
stable
have-remote-offer
have-local-offer
setLocalDescripFon(localAnswer)
setRemoteDescripFon(remoteAnswer)
setLocalDescripFon(localOffer)
setRemoteDescripFon(remoteOffer)
IETF100SingaporeNovember2017
SDPanswersentoversignalingchanneltootherbrowser
SDPoffersentoversignalingchanneltootherbrowser
createOffer()
createAnswer()
![Page 38: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/38.jpg)
SDPExtensionsinWebRTC• AnumberofnewSDPextensionsdevelopedforWebRTC.Theyinclude:– BUNDLE–awaytosignalthatasetofm=medialines(e.g.audioandvideo)shouldbemulFplexedoverthesametransportaddressandport• a=group:BUNDLE audio video
– MSID–awaytosignaltheMediaStreamIDusedinJavaScriptinSDP• a=msid
– Source-SpecificApributes–properFesofasource• a=ssrc
37IETF100SingaporeNovember2017
![Page 39: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/39.jpg)
SDPOffer/AnswerUsesSignaling
(notstandardized)
![Page 40: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/40.jpg)
WebRTCSignalingApproaches• Signalingisrequiredforexchangeofcandidatetransport
addressesandSDPblobs• ManyopFons–choiceisuptowebdeveloper
39IETF100SingaporeNovember2017
![Page 41: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/41.jpg)
Example:WebRTCSignalingusingSIP
40
WebServer
SRTPMedia
SIPProxy/RegistrarServer
BrowserM(runningJavaScriptSIPUA)
BrowserT(runningJavaScriptSIPUA)
HTTP(HTML5/CSS/JavaScript)
WebSocket(SIP)
WebSocket(SIP)
HTTP(HTML5/CSS/JavaScript)
• BrowserrunsaSIPUserAgentbyrunningJavaScriptfromWebServer• SRTPmediaconnecFonusesWebRTCAPIs• DetailsinRFC7118thatdefinesSIPtransportoverWebSockets
IETF100SingaporeNovember2017
![Page 42: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/42.jpg)
DataChannel
![Page 43: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/43.jpg)
DataChannelProtocols
• Datachannelprovidesanon-mediachannelbetweenbrowsers• StreamControlTransportProtocol(SCTP)providesreliability,
congesFoncontrol,andmessagedelivery• MulFplexedoversameportsasRTPmedia
42
DTLS
DataChannelData
ProvidescongesFonandflowcontrol
Providessecurity(confidenFality)
ProvidestransportthroughNAT(a^erICEholepunching)
Internet
UDP
DTLS
SCTP
IETF100SingaporeNovember2017
![Page 44: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/44.jpg)
Datachannel
• RTCPeerConnecFon.createDataChannel()– send()methodforasyncmessagesending– onmessagehandlerforasyncmessagereceipt
• BidirecFonalbydefault• CansendstringsorArrayBuffertypes
IETF100SingaporeNovember2017 43
![Page 45: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/45.jpg)
Otherdetails
![Page 46: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/46.jpg)
MediaCodecs
45
• Audiomandatory-to-implement:– Opus(RFC6716):NarrowbandtowidebandInternetaudiocodecforspeechandmusic
– G.711(RFC3551):PCMaudioencodingforPSTNinterworkingandbackwardscompaFbilitywithVoIPsystems
– TelephoneEvents(RFC4733):TransportofDualToneMulFFrequency(DTMF)tones
• Videomandatory-to-implement:– H.264(RFC6184):Commonvideocodec(requireslicensing)
– VP8(RFC6386):Opensourcevideocodec
IETF100SingaporeNovember2017
![Page 47: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/47.jpg)
Security
• MediaisalwaysencryptedinWebRTC• SecureRTP(SRTP)isusedtoassureconfidenFalityandauthenFcaFonofRTPandRTCPpackets
46IETF100SingaporeNovember2017
![Page 48: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/48.jpg)
Privacy
• SRTP,DTLSguaranteeintegrityofcontentbutnottheendpoint
• NewIdenFtyProxyproposedinWebRTC– dra^-iea-rtcweb-security– Allowsuseofthird-partyidenFtyservice(e.g.,FacebookConnect)
– BrowsersignsSRTPkeysusingmaterialfromidenFtyservice,verifiedatotherendusingidenFtyservice
IETF100SingaporeNovember2017 47
![Page 49: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/49.jpg)
NewLow-levelControls
![Page 50: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/50.jpg)
V
A
HowitReallyWorks
IETF100SingaporeNovember2017 49
AV
AA
V
AV
V
AV
Audiom-line
Audiom-line
Videom-line
Videom-line
Stream1 Stream1
Stream2 Stream2
SDPm-line:bidirecFonalSRTPstream
Browser1 Browser2
![Page 51: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/51.jpg)
Senders/Receivers
• WebRTC1.0recentlyadded:– RTCRtpSenders–AhandletoanoutboundRTPstream(one-halfofanm-line)
– RTCRtpReceivers–AhandletoaninboundRTPstream(theotherhalfofanm-line)
• ForeverytracksentorreceivedoveraPeerConnecFonthereisanassociatedsenderorreceiver.ThesegivedirectaccesstoandcontrolovertherelevantRTPstreams.
IETF100SingaporeNovember2017 50
![Page 52: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/52.jpg)
V
A
HowitReallyWorks
IETF100SingaporeNovember2017 51
AV
AA
V
AV
V
AV
Audiom-line
Audiom-line
Videom-line
Videom-line
Stream1 Stream1
Stream2 Stream2
Senders
Senders
Receivers
Receivers
SDPm-line:bidirecFonalSRTPstream
![Page 53: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/53.jpg)
Transceivers
• Butthatwasn'tenough,because– attheSDPleveleverysenderispairedwithareceiver,evenifonlyonehasatrackthatisacFvelyusingit
• EntertheRTCRtpTransceiver.Ateachendpoint – Thereispreciselyonetransceiverforeachm-line.– Thereisasenderandareceiverforeachtransceiver.– Themidofthem-lineisthemid(mediaid)ofthetransceiver.ItisuniqueperPeerConnecFon.
IETF100SingaporeNovember2017 52
![Page 54: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/54.jpg)
V
A
HowitReallyWorks
IETF100SingaporeNovember2017 53
AV
AA
V
AV
V
AV
Audiom-line
Audiom-line
Videom-line
Videom-line
Stream1 Stream1
Stream2 Stream2
Senders
Senders
Receivers
Receivers
Foreachside,eachofthesehasaTransceiver
SDPm-line:bidirecFonalSRTPstream
![Page 55: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/55.jpg)
StatusofWebRTCAPIs• JavaScriptAPIsarebeingstandardizedbyW3C• TwomainspecificaFons– “WebRTC1.0:Real-FmeCommunicaFonBetweenBrowsers”(akaPeerConnecFon)• CandidateRecommendaFon:hpp://www.w3.org/TR/webrtc• Coreisstable,justcleaningupedgecasesnow
– “MediaCaptureandStreams”(akagetUserMedia)• CandidateRecommendaFon:
– hpps://www.w3.org/TR/mediacapture-streams/• Ohsoclose...
• NeedimplementaFonexperienceatthispoint54IETF100SingaporeNovember2017
![Page 56: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/56.jpg)
StatusofWebRTCProtocols
• Tworeferencestocheckforthis:– PrimaryisCullenJennings'WebRTCDependenciesdra^dra^-jennings-rtcweb-deps
– RTCWEBdocumentscanbefollowedasusualhpps://tools.iea.org/wg/rtcweb/
55IETF100SingaporeNovember2017
![Page 57: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/57.jpg)
ToolsandServices• TohelpWebRTCprogramming – Libraries,codesnippets
• EasyRTC,SimpleWebRTC.js,CoTurn(hpps://github.com/coturn/coturn)
– SIPsignaling• sipML5,JsSIP,reSIProcate
• TohelpWebRTCdeployment– Hostedsignalingservices
• PubNub,FireBase– HostedSTUNandTURNservers
• XirSys,Twilio– HostedSFUand/ornetworkopFmizaFon
• Jitsi,SwitchRTC,Agora.io
IETF100SingaporeNovember2017 56
![Page 58: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/58.jpg)
Higher-levelAPIs
• Alternate(higher-level)APIs– Twilio,TokBox– APIDaze– PeerJS,RTCMulFConnecFon
IETF100SingaporeNovember2017 57
![Page 59: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/59.jpg)
Greatonlineresources
• InformaFonalsites– hpp://webrtc.org– http://html5rocks.com/en/tutorials/webrtc/basics– http://webrtchacks.com– hpps://webrtcstandards.info
• Games/demos/apps– hpp://www.cubeslam.com– hpp://shinydemos.com/facekat– hpp://sharefest.me(github.com/Peer5/Sharefest)
IETF100SingaporeNovember2017 58
![Page 60: WebRTC - · PDF fileWebRTC: Real-Time Communica2ons on the Web Dan Burne9, PhD ... – Echo cancellaFon, packet loss concealment • In Chrome, Firefox, Microso^ EDGE, and](https://reader037.vdocument.in/reader037/viewer/2022103107/5a81736f7f8b9a38478d450c/html5/thumbnails/60.jpg)
Whataboutdeployments?• Well-knownservices
– FacebookChat– AmazonMayday(andnowChime)– GoogleHangouts,Duo
• Plaaormembeddings– EveryUCplaaormtoday– Andmosttelecomproviders
• Free(mium)commservices– Crowdcast.io– GoToMeeFngFree(previouslyHu.p)– vLine– Talky.io– Appear.in– Gruveo– Room– Rabbit– GetARoom.io– UberConference
IETF100SingaporeNovember2017 59