33
Cross-Platform WebRTC ALEX DUNN TWITTER: @SUAVE_PIRATE BLOG: HTTPS://ALEXDUNN.ORG

WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

  • Upload
    others

  • View
    13

  • Download
    0

Embed Size (px)

Citation preview

Page 1: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

Cross-PlatformWebRTCALEXDUNN

TWITTER:@SUAVE_PIRATE

BLOG:HTTPS://ALEXDUNN.ORG

Page 2: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

AgendaBriefIntroductiontoWebRTC

HowWebRTC Works

AdaptingtoNativePlatforms

ToolsandResources

LookatSomeCode

2

Page 3: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

ResourcesFinishedsource:https://github.com/SuavePirate/Xamarin.WebRTC

WebRTC docs:https://webrtc.org

IceLink docs:http://docs.frozenmountain.com/icelink2/

Nativelibraries:https://webrtc.org/native-code/native-apis/

3

Page 4: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

Whatis

4

Page 5: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

TheBasicsofWebRTCWebReal-Time-Communication

New(ish)open-sourcedstandardfortransmittingdatafromonepeertoanother

Asetofframeworksandtoolsforcreatingconnectionsandsendingdata

Datatransmittedoverpeer-to-peerconnections

Agnostictotypesofdatasent◦ Audiobuffers◦ Videoframes◦ Rawdata◦ Files

5

Page 6: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

ImportantComponentsandTermsPeerConnections– theactualconnectionbetweentwoclients

6

Page 7: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

ImportantComponentsandTermsPeerConnections– theactualconnectionbetweentwoclients

STUN- SessionTraversalofUserDatagramProtocol[UDP]ThroughNetworkAddressTranslators[NATs]

7

Page 8: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

ImportantComponentsandTermsPeerConnections– theactualconnectionbetweentwoclients

STUN- SessionTraversalofUserDatagramProtocol[UDP]ThroughNetworkAddressTranslators[NATs]

TURN– TraversalUsingRelaysaroundNAT

8

Page 9: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

ImportantComponentsandTermsPeerConnections– theactualconnectionbetweentwoclients

STUN- SessionTraversalofUserDatagramProtocol[UDP]ThroughNetworkAddressTranslators[NATs]

TURN– TraversalUsingRelaysaroundNAT

ICE- InteractiveConnectivityEstablishment

9

VanillaIce

Page 10: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

ImportantComponentsandTermsPeerConnections– theactualconnectionbetweentwoclients

STUN- SessionTraversalofUserDatagramProtocol[UDP]ThroughNetworkAddressTranslators[NATs]

TURN– TraversalUsingRelaysaroundNAT

ICE- InteractiveConnectivityEstablishment

Signaling– ameansofcommunicatingconnectioninfobetweenclients

10

Page 11: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

ImportantComponentsandTermsPeerConnections– theactualconnectionbetweentwoclients

STUN- SessionTraversalofUserDatagramProtocol[UDP]ThroughNetworkAddressTranslators[NATs]

TURN– TraversalUsingRelaysaroundNAT

ICE- InteractiveConnectivityEstablishment

Signaling– ameansofcommunicatingconnectioninfobetweenclients

Codecs◦ Video

◦ VP8

◦ Audio◦ Opus

11

Page 12: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

MakingPeerConnections

Page 13: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

CreatingaP2PConnectionviaSTUN

13

Page 14: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

CreatingaP2PConnectionviaSTUNCoversmostscenarios

Failswhenpeershave2incompatibleNATtypesorpeersrunthroughheavyfirewalls

14

Page 15: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

CreatingaP2PConnectionviaSTUN+TURN

15

Page 16: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

CreatingaP2PConnectionviaSTUN+TURNTURNserverrelaysdatabetweentwopeers

Meansnodirectpeerconnectionismade

Canhaveperformanceimplications

Canbeexpensive

Covers99.999%ofcases

16

Page 17: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

Multi-connectionMeshModelEachclientcreatesaconnectiontoeveryotherclient

Cancreateunreliableconnections

Individualconnectionscanbedroppedwithoutdroppingthemall

Requiresextendedsignalingandaccountability

17

Page 18: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

Multi-connectionMixerModelEachclientconnectstoasingleserver

Theservermixesaudioandvideostreamsperpeer

Theserverrelaysthemixedstreamstoeachpeer

Heavyliftingputonserverratherthandistributed

Expensive

Hardtoscale

18

Page 19: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

UsingaConnection

19

Page 20: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

SendingAudioandVideoDataGetUserMedia◦ Getsaccesstodevicehardware(micandcamera)

20

Page 21: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

SendingAudioandVideoDataGetUserMedia◦ Getsaccesstodevicehardware(micandcamera)

Encodethemedia◦ Pickacodec◦ Encodethedatawiththatcodec

21

Page 22: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

SendingAudioandVideoDataGetUserMedia◦ Getsaccesstodevicehardware(micandcamera)

Encodethemedia◦ Pickacodec◦ Encodethedatawiththatcodec

Sendencodedmediaoverconnection

22

Page 23: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

SendingAudioandVideoDataGetUserMedia◦ Getsaccesstodevicehardware(micandcamera)

Encodethemedia◦ Pickacodec◦ Encodethedatawiththatcodec

Sendencodedmediaoverconnection

Switchmediasources(switchcamera,switchmic)

23

Page 24: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

AdvancedFunctionalityScreenstreaming

Multi-sourcestreaming◦ Streamingmultiplevideostreamsfromoneclient◦ Streamingmultipleaudiostreamsfromoneclient

AudioMixing

Non-TURNrelaying

Recordingstreams

Distributedstreaming

Streamsignatures

24

Page 25: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

GoingCross-Platform

25

Page 26: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

PlatformsSupportedWeb*Windows◦ WPF◦ WindowsForms◦ Win8◦ UWP*

WindowsPhone◦ 8.0Silverlight+◦ 8.1RT*

AndroidiOSMac

26

Page 27: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

WebSupport

27

Page 28: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

28

Page 29: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

WebWorkaroundsNpapi plugins

Chrome+Firefoxextensions

ActiveXplugins

JavaAppletplugins

Stilldoesn’tcatchall◦ EdgedoesnotsupportWebRTC (theyarepushingORTC)◦ EdgedoesnotsupportActiveXplugins,JavaApplets,ornpapi

29

Page 30: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

NativePlatformSupportandIssuesWebRTC isbuiltonanopensourcedC++platform-agnosticframework◦ Youtheoreticallycanrunitanywhere!

Noteveryplatformsupportsgivencodecs

VP8isnotnativetoanyWindowsSDK!

WeneedtogetacustombuildofthenativeVP8(C++)codec

CompiletheVP8codecagainstVisualC++perplatform

SamewithOpus

UnlikewebbrowsersthatshipwithVP8andOpuscodecsaspartoftheapplication,weneedtoincludethelibrariesseparately

30

Page 31: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

BuildingWindows◦ BuildVP8codec◦ BuildOpuscodec◦ WrapcallstoC++library

Android◦ IncludereferencetonativecodecsbuiltintoOS

iOS+Mac◦ Addofficiallibrariesfornativecodecs

Xamarin◦ Addbindingstonativelibrariesforcodecsandwrapcalls

31

Page 32: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

IceLinkAlibraryandframeworkwrappingalotofnativeWebRTC

Languagesandplatformssupported◦ Android◦ iOS◦ Windows(WinForms,WPF,Win8,UWP)◦ WindowsPhone(8,8.1)◦ Web

◦ ActiveXcontrol◦ JavaApplet◦ Npapi intheworks

◦ Mac◦ Xamarin (Android,iOS,Mac)◦ Java

32

Page 33: WebRTC XamU [Autosaved] · The Basics of WebRTC Web Real-Time-Communication New(ish) open-sourced standard for transmitting data from one peer to another A set of frameworks and tools

Demo