Introduction to WebRTC

Web real time communication

Transcript

1. 2022/02/25 Gen Ichino Introduction to WebRTC Real-time communication
2. IAM Short introduction • Frontend engineer • ex- fl ash author • Experiences in creative interactive web contents • Like stacking games (doesn’t mean I play them!) • NEED PS5 NOW! @zenoplex
3. My Routine 24h schedule pie chart FreeTime Bathtime Activity Tutor Dinner Prepare Dinner Pickup Work Lunch Work Walk Bedtime
4. Preface Why did I choose such topic • Covid-19 spurred remote-work • Curious of video conferencing technology and its limit • How much did technology improve since I’ve last touched Flash Communication Server which could do real-time video chat?
5. What is WebRTC?
6. WebRTC De fi nition • Web Real Time Communication • W3C standard (open-sourced by Google) • P2P Video/audio communication between browsers and devices • Send data other than media (DataChannel) • Access via javascript API without requiring plugins or install
7. Yep, we need to know a lot of terms Beware
8. Negotiation
9. Signaling Before establishing p2p negotiation • Not part of WebRTC specs • Provides information(s) needed to connect clients • Room id • STUN/TURN server information • etc https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/
10. STUN Session Traversal Utilities for NAT • WebRTC client does not know public ip address by itself • Responsible to reply public ip address to WebRTC client • Almost always required in real world application https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/
11. TURN Traversal Using Relays around NAT • Server which will relay media in case p2p cannot be established • Required for symmetric NAT? https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/
12. const pc = new RTCPeerConnection({ iceServers: [ // STUN server { urls: "stun:stun1.example.net" }, // TURN server { urls: ["turns:turn1.example.net"], username: "someUsername", credential: "someCredential", }] });
13. Interactive Connectivity Establishment ICE
14. Sequence Road to negotiation https://programmer.help/blogs/getting-started-with-webrtc-video-communications.html
15. Architecture
16. Peer-to-Peer Mesh • Pros • Simplicity • Low operating cost • Cons • High bandwidth with multi-peers • High computational cost on client • Non-scalable
17. MCU Multipoint Conferencing Unit • Pros • Client simplicity • Optimal downstream quality depending on client condition • Cons • High computational cost for decoding/encoding stream • High latency at large scale due to encoding delay
18. SFU Selective Forwarding Unit • Pros • Can handle large connection pool • Scalable • Optimal downstream quality depending on client condition • Cons • Clients requires more computational cost than MCU
19. Demo(P2P)
20. Challenges Things needs to be learned along the way • Client-side knowledge • MediaStream constraints • WebRTC/RTP Compatibility( ie. Webrtc-adapter, safari 😰 ) • Network engineering knowledge • Server costs(Turn) • Testing
21. Closing Thank you for listening • https://webrtcglossary.com/ • https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Perfect_negotiation • https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ • https://www.cloudbees.com/blog/webrtc-issues-and-how-to-debug-them • https://princiya777.wordpress.com/2017/08/19/webrtc-behind-the-browser/ • https://programmer.help/blogs/getting-started-with-webrtc-video- communications.html • chrome://webrtc-internals/