WebRTC official site • http://www.webrtc.org/ – HTML5 ROCKS • http://www.html5rocks.com/en/tutorials/webrtc/basics/ – WebRTC for Beginners Muaz Khan • https://www.webrtc-experiment.com/docs/webrtc-for-beginners.html • https://github.com/muaz-khan/WebRTC-Experiment – WebRTC Conference 2013 Atlanta • http://www.webrtcworld.com/conference/west/default.aspx • http://images.tmcnet.com/expo/webrtc- conference/pdfs/WebRTC%20SG13AtlantaRe-CapSml.pdf – And so many blogs. • All rights of each product is reserved by original right holder. – ®, TM are omitted. 2
fixed telephone mobile phone (TV broadcast) method Over The Top Skype, WebEx (YouTube, USTREAM) Web Browser WebRTC can speak to world- wide (with cost) for users can speak to world- wide with low cost no application, free to use only careers with infrastructure can participate market independent of careers, few venders can participate without special infrastructure, everyone can participate none for venders limited API, limited combination fully programmable, use as component single use usage user can combine built in to products / services call center, e-commerce, information site, etc.
camera <video id="video2" autoplay="1" style="-webkit-transform: scaleX(1.5);"></video> Hang down camera <video id="video2" autoplay="1" style="-webkit-transform: scaleY(-1);"></video> Black and White <video id="video2" autoplay="1" style="-webkit-filter: grayscale(100%);"></video> Lean camera <video id="video6" autoplay="1" style="-webkit-transform: rotate(-30deg);"></video> 18
of each other • Have to know UPD port number to use – UDP port is decided dynamically • Negotiation process is necessary, before RTCPeerConnection communication – This process is called as “Signaling” 27 RTCPeerConnection RTCPeerConnection UDP/IP IP address of each other UDP port number to use
by both browser – → Signaling server is prepared usually • No standard of signaling protocol – Your own way • WebSocket (TCP/IP) • Ajax (HTTP, HTTPS) – Existing protocol • SIP(for VoIP) with WebSocket(TCP/IP) • XMPP(for IM）with WebSocket(TCP/IP) 28
Information of session contents, such as media type (video, audio), codec, etc. – IP address, port number – P2P data transfer protocol → Secure RTP is used in WebRTC – Band width – Session property (name, id, active time, etc.) • Interactive Connectivity Establishment (ICE) – Lists of possible transfer roots • Direct P2P • Using STUN to go through NAT port mapping • Using TRUN, with packet relay server – Shortest (less hop) root will be chosen 29
Signaling Server PeerConnection socket Application onIceCandidate(ice) send(ice) send ice send ice onMessage(ice) addIceCandidate(ice) send ice send(ice) send ice onMessage(ice) addIceCandidate(ice) onIceCandidate(ice) onIceCandidate() : end of candidate onIceCandidate() : end of candidate P2P stream transfer At last, P2P starts.
UDP/IP, so packet may be lost – → DataChannel has retry feature (not packet, but whole data) • Events of onOpen, onClose, onMessage • For text chat, file transfer, game • DataChannel VS. WebScoket – DataChannel is P2P, WebSocket is server-client – DataChannel is UDP/IP, WebSocket is TCP/IP • Specification is not determined yet. 43
Camera, microphone, screen capture. – Combination with other HTML5 features • Canvas, CSS, WebAudio API, WebGL • WebRTC is flexible – Local, 1 to 1, n to n – Bidirectional, single-way • WebRTC is disruptive – Any one can participate • WebRTC is programmable – Built into your own products / services 44