Web rtc 入門
- 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?
- 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
- 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"}
- 27. Q&A