理解基本 WEB RTC 的概念

1. WebRTC Introduction
Derek Chiu
2016/9/1

2. Self-introduction
• 中文: 邱繼平
• English: Derek Chiu
• Previous Job: Benq/Qisda HW engineer
• SW experience: 1.5 years RoR/Front-end engineer
• Skill: RoR, Javascript, CSS, Objective C(a little),
Excel VBA
• Email: crsgypin@gmail
• FB: 邱繼平

3. Current Job
• VR
• Full-stack engineer, rather backend.
https://www.eyehouse.co/live?c=ec22522407104193

4. Let’s start: Web RTC

5. WebRTC
• Web Real-Time Communication
– WebRTC (Web Real-Time Communication) is an API definition drafted by theWorld Wide Web
Consortium (W3C) that supports applications for voice calling, video calling, and P2P file
sharing without the need of either internal or external plugins
– W3C (Big boss: Google)
– P2P (Server-free)
– Voice-calling, video-calling
– Without any plugins
• History
– May 2011, Google released
– Firefox 34.0 was released on December 1, 2014
• Who uses
– Snapchat
– Airbnb
– Hangout?

6. caniuse
http://caniuse.com/#search=webrtc

7. Solution for iOS
• Native code developed by Google
– https://webrtc.org/native-code/ios/
• OpenWebRTC
– Developed by Ericsson
– Bowser, not browser, is a browser in iOS that supported WebRTC
– Support native code for iOS app
– Support browser for iOS app

8. Rumor
• Apple is rolling WebRTC video-chat into Safari iOS, OS X browsers (13 Apr
2016)
• Apple is hiring engineers to bring WebRTC to Safari (Feb 21, 2016)

9. Concept

10. Video
• https://www.youtube.com/watch?v=kM2EFWpTWc8

11. Architecture
http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/?redirect_from_locale=tw
Data
Server

12. STUN, TURN Servers
Peer-to-peer with STUN servers
TURN server
Directly Mode
Peer-to-peer with TURN servers
•ICE: Interactive Connectivity Establishment
•STUN: Session Traversal Utilities for NAT
•TURN: Traversal Using Relay NAT

13. SDP (Session Description Protocol)
For detail understanding, please refer to
https://webrtchacks.com/sdp-anatomy/
Example format
My note: an information of media for local peer device

14. Ice Candidates
Example format
My note: an information of internet channel for local peer device

15. Examples of STUN, TURN Servers
Setup for STUN and TURN servers
1. STUN server is free
2. TURN server is charge-required

16. ICE Candidate test
Test Your Ice Candidates
My PC test result (Chrome in Mac OS) Component Type
1. Srflx is by STUN server
2. Relay is by TURN server

17. Demo

18. Key Api
• GetUserMedia
– Get audio and video streaming
• RTCPeerConnection
– WebRTC peer object
• SDP
– Session Description Protocol
• ICECandidate
– Interactive Connectivity Establishment

19. Flow Chart of WebRTC
getUserMedia
Create Peer Object
Peer A Peer B
Create offer SDP
Set offer SDP
getUserMedia
Create Peer Object
Set Offer SDP
Create Answer SDP
Set Answer SDP
Send SDP of offer side
Set Answer SDP
Create local ice candidates
Set remote ice candidates
Create local ice candidates
Set remote ice candidates
Send local ice candidates

20. My Signaling Solution
Peer A Peer B
Rails
Server
My Server
Thin
Server
WebSocket
Implemented by Thin Server with Faye Gem

21. WebRTC in iOS

22. Solution1 in IOS
iOS
APP
Safari
getUserMedia api
Cam, Mic
1. Overwrite the original api for webRTC
2. Solutions are developed by two organizations
1. Google webRTC
2. Erission webRTC Data Server
SDP
ICE Candidate

23. Solution2 for iOS and Android
iOS/Android
APP
Cam, Mic
Data Server
SDP
ICE Candidate
1. Directly calling by APP native code

24. More

25. Third-Party IceServers
• Xirsys
– http://xirsys.com/
{"url":"stun:turn02.uswest.xirsys.com"}
{"username":"f75e313a-7027-11e6-a302-16f6c33bdaed",
"url":"turn:turn02.uswest.xirsys.com:80?transport=udp",
"credential":"f75e31c6-7027-11e6-9f9c-40a3acb71766"}
{"username":"f75e313a-7027-11e6-a302-16f6c33bdaed",
"url":"turn:turn02.uswest.xirsys.com:80?transport=tcp",
"credential":"f75e31c6-7027-11e6-9f9c-40a3acb71766"}
{"username":"f75e313a-7027-11e6-a302-16f6c33bdaed",
"url":"turn:turn02.uswest.xirsys.com:3478?transport=udp",
"credential":"f75e31c6-7027-11e6-9f9c-40a3acb71766"}
{"username":"f75e313a-7027-11e6-a302-16f6c33bdaed",
"url":"turn:turn02.uswest.xirsys.com:3478?transport=tcp",
"credential":"f75e31c6-7027-11e6-9f9c-40a3acb71766"}

26. chrome://webrtc-internals/
Google console for webrtc

27. Q&A