Javascript WebRTC APIs explained to make audio/video real-time communications: you will learn how to implement your video conference application from scratch. We will start from the basics, giving an overview of what WebRTC is and then we will explore the fundamental Javascript APIs to create performant real-time applications, no prior knowledge is required. WebRTC is used by all video conference platforms today and we will go under the hood to analyze it from a Javascript perspective: at the end, you will be able to easily develop your video conference application from scratch.

1. JS Audio/Video Streaming
WebRTC API 101 explained
ale_polidori
alepolidori

3. webrtc.org

5. Our Purpose
● What’s WebRTC
● How it works
● 3 Javascript APIs
● Video Conference App
● Resources
��

6. WebRTC
Web Real-Time Communication

7. WebRTC
Web Real-Time Communication
to the WEB

8. open-source
protocols,
JS Web APIs,
web Browsers,
mobile app

9. WebRTC
JS Web APIs

10. Peer-2-Peer
real-time communications

11. How WebRTC
Works

12. How WebRTC
Works
1 2
● 1-2 offer request to start a call

13. How WebRTC
Works
1 2
● 1-2 offer request to start a call
● 3-4 answer to the offer
3
4

14. How WebRTC
Works
1 2
● 1-2 offer request to start a call
● 3-4 answer to the offer
● 5 peer-to-peer communications
3
4
5

15. How WebRTC
Works
● 1-2 offer request to start a call
● 3-4 answer to the offer
● 5 peer-to-peer communications

16. 1 2
● 1-2 Offer request to start a call
● 3-4 Answer to the offer
● 5 peer-to-peer communications
3
4
5
Signaling
Signaling Server

17. WebRTC Javascript APIs

18. 3 APIs
● getUserMedia
● RTCPeerConnection
● RTCDataChannel

19. 3 APIs
● getUserMedia

25. Security

26. Permissions
HTTPS encryption

28. Let’s try getUserMedia

29. 3 APIs
● getUserMedia
● RTCPeerConnection
● RTCDataChannel

30. 1 2
● 1-2 Offer request to start a call
● 3-4 Answer to the offer
● 5 peer-to-peer communications
3
4
5
Signaling
Signaling Server

31. Signaling Server
1. new RTCPeerConnection
2. get & share Network Info
(ICE candidate)
3. get & share local/remote description
(SDP)
1. new RTCPeerConnection
2. get & share Network Info
(ICE candidate)
3. get & share local/remote description
(SDP)

32. Demo Time

33. Protocols Recap
● HTTPS
● RTP, SRTP: media exchange
● SDP: media description
● ICE: peer-to-peer connectivity
● WebSocket: custom signaling (alternative: SIP)

34. trends.google.com

35. Resources
● CityJS Talk: github.com/alepolidori/cityjs-athens-2023
● Samples: https://webrtc.github.io/samples/
● DOCs
○ https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
● Get support
○ https://groups.google.com/forum/#!forum/discuss-webrtc
● Standard W3C & IETF
○ https://www.w3.org/TR/webrtc/
● Debug
○ chrome://webrtc-internals

36. Thanks!
ale_polidori
alepolidori
CityJS Athens 2023