Twilio Signal 2016 presentation by Dan Jenkins on building WebRTC apps

1. WebRTC Reborn
Dan Jenkins @dan_jenkins

2. Dan Jenkins
@dan_jenkins

3. Node.js Developer
Love Lego & Technic
General Geek
Founder of Nimble Ape Ltd
❤ open source

5. github.com/danjenkins

6. @dan_jenkins

7. Nimble Ape
nimblea.pe
dan@nimblea.pe
@nimbleapeltd

8. Node.js / IoT / VoIP/WebRTC
Consulting
(Anything real-time)

9. WebRTC

10. Heard of it?

11. Built something with it?

12. Used it?

13. Built with WebRTC

14. What is WebRTC?

15. Web Real
Time
Communication

16. Secure by design

17. Peer to Peer Technology

18. Media Channel
for Audio & Video

19. Data Channel
for almost any kind of Data

20. 3 Core JavaScript APIs
getUserMedia
RTCPeerConnection
RTCDataChannel

21. Peer To Peer
Communication

22. Signalling Server / Protocol

23. It's not magic...

24. Signalling Server / Protocol

25. Signalling Server / Protocol

26. 2 Peers

27. 3 peers
(Mesh)

28. *n peers
(Mesh)
(Not Recommended for all situations)

29. No plugins
(Browser extensions are required for screensharing)

30. Opens the door for Awesome

31. Open Technology

32. Browsers, Mobiles and
Other Devices

34. Web Scale

35. Little Dependence on
Media Servers

36. Easier on the wallet

37. Awesome apps are being
launched

38. Be My eyes
38
http://www.bemyeyes.org/

39. Mindme
http://www.realtimecommunicationsworld.com/topics/realtimecommunicationsworld/articles/404891-webrtc-enrolled-suicide-prevention.htm

40. Cystic Fibrosis Telehealth In
Australia
http://www.webrtcworld.com/topics/webrtc-world/articles/334242-australian-cystic-fibrosis-telehealth-project-relies-webrtc.htm

41. Cancer Telehealth in Texas
https://developer.ibm.com/bluemix/2015/09/16/bluemix-and-twilio-at-krankygeek-2015/

42. Developers are building
Apps that help humanity

43. WebRTC
Reborn

44. A brief history of time WebRTC…

45. Its 5 years old!

46. You always mess
up the first child

47. We messed up.

48. At the start,
everyone was
so excited

49. Countless talks at
conferences

50. Look ma,
no plugins!

51. “It’s freaking awesome!”
(dude)

52. Developers went and tried it

53. And usually failed

54. We didn’t tell Developers
about the complicated stuff

55. Heard of STUN or TURN?

56. We failed you.

57. But…
that’s all changed

58. Oh Really?

59. Strong community

60. Google Developer Experts

61. WebRTC Weekly
https://webrtcweekly.com/

62. WebRTC Hacks
https://webrtchacks.com/

63. Excellent Browser Support

64. Chrome on Desktop

65. Chrome on Android

66. Firefox

67. Opera on Desktop

68. Opera on Android

69. Microsoft Edge
(ORTC)

70. Who’s missing?

71. Safari
Desktop & Mobile

72. But…
There’s Hope!

73. Apple Put An Engineer on the
WebRTC-in-webkit
Project

74. And contributed to
getUserMedia

75. And then...

76. webkit.org/status

77. Microsoft Edge
Currently supports ORTC
What about WebRTC?

78. Edge will soon support
WebRTC!

79. edgewebsummit2016

80. All those Supported browsers…
Their support and
progress is awesome

81. Don’t Break things.
Move Fast.

82. And we have plugins for IE
and Safari

83. Temasys
+ many others

84. API & Browser
Status Check
iswebrtcreadyyet.com

85. Simple Signalling

86. You need a Signalling Server

87. Who Knew?!

88. Open Source signalling

89. socket.io P2P
http://socket.io/blog/socket-io-p2p/

90. matrix.org

91. asterisk

92. signalmaster
https://github.com/andyet/signalmaster

93. And many many others

94. Documentation!

95. https://github.com/webrtc
https://bitbucket.org/webrtc/codelab

96. https://github.com/muaz-khan
https://www.webrtc-experiment.com

97. https://github.com/webrtc/samples
https://webrtc.github.io/samples/
g.co/webrtc
https://codelabs.developers.google.com/codelabs/
webrtc-web

98. STUN & TURN Servers

99. You still don’t know
what they do.
Do you?

100. STUN
Siri, What’s my IP Address?
Here’s your address:
James R. Herman Cruise Terminal at Pier 27
Pier 27
The Embarcadero
San Francisco
CA
94111
Siri wouldn’t make a good STUN Server

101. TURN
(Media Relay)

102. More choice

103. Docker images

104. Don’t Forget!…
You need to address a
STUN server in your App!

105. Google give you some!
stun.l.google.com:19302
stun1.l.google.com:19302
stun2.l.google.com:19302
stun3.l.google.com:19302
stun4.l.google.com:19302
There are many others!

106. Don’t repeat History
Use a STUN Server!

107. Modules on npm

108. Many
Open Source
wrappers

109. adapter.js
https://github.com/webrtc/adapter

110. PeerJS
https://github.com/peers

111. easyRTC
https://github.com/priologic/easyrtc

112. SimpleWebRTC
https://simplewebrtc.com/

113. Many Many Others

114. PaaS
Use them!

115. Twilio

116. Xura … (Forge) … (Acision)
Kandy
Tokbox
Respoke
Cisco … (Tropo)
Plus many others…

117. Some quick stats...

118. 2 Billion+
WebRTC Enabled Browsers
https://docs.google.com/presentation/d/1JwnW6v3OM0RfoDYrPPTJrDNeIpidgh7hF_k5E1j2oKM/pub

119. 1 Billion+
Transmitted audio/video minutes per week
in Chrome
https://docs.google.com/presentation/d/1JwnW6v3OM0RfoDYrPPTJrDNeIpidgh7hF_k5E1j2oKM/pub

120. And a whole host of
internal improvements

121. ECDSA
OPUS 1.2
MediaRecorder
H.264
VP9
CocoaPod
Tab Sharing
Canvas Streaming

122. https://docs.google.com/presentation/d/1JwnW6v3OM0RfoDYrPPTJrDNeIpidgh7hF_k5E1j2oKM/pub

123. https://docs.google.com/presentation/d/1JwnW6v3OM0RfoDYrPPTJrDNeIpidgh7hF_k5E1j2oKM/pub
https://goo.gl/UK4sNV

124. And finally...
a specification soon
(hopefully)

125. Currently a working draft
https://www.w3.org/TR/webrtc/

126. Public Service
Announcement

127. Chrome limits
getUserMedia to
Trusted Origins

128. Trusted Origins =
Localhost + HTTPS
(But not Self Signed Certs)

129. But LetsEncrypt
Is Here
letsencrypt.org

130. Don't get caught out in
wondering why your app
doesn't work...

131. It’s time to give WebRTC
another go

132. Is WebRTC
Production Ready?

133. Heck YES!

134. Go use it!

135. Thanks!
@dan_jenkins
nimblea.pe
dan@nimblea.pe

136. https://www.flickr.com/photos/clement127/
http://images.techhive.com/images/article/2012/11/legohawking-100014318-orig.jpg