BRINGING REALTIME MEDIA CAPABILITIES TO YOUR INTERFACE WITH

BRINGING REALTIME MEDIA CAPABILITIES TO YOUR INTERFACE WITH WEBRTC Francisco Valentín 14/02/2017

Web RTC Francisco Valentín 14/02/2017

Web RTC Java. Script API for peer-to-peer Real-Time Communications Video, audio, IM, data in the browser Plugin-free! 5 years relationship Originally just for Chrome, Firefox and Opera Microsoft entered the game with ORTC Native i. OS and Android code too

Web RTC: offspring

Web RTC: Source: webrtcbydralex. com

Web RTC: polyfill Your Java. Script code Adapter. js (shim) Web. RTC 1. 0 ORTC

Web RTC: polyfill (without) navigator. get. User. Media = navigator. get. User. Media || navigator. moz. Get. User. Media || navigator. webkit. Get. User. Media; window. RTCPeer. Connection = window. RTCPeer. Connection || window. moz. RTCPeer. Connection || window. webkit. RTCPeer. Connection; window. RTCIce. Candidate = window. RTCIce. Candidate || window. moz. RTCIce. Candidate || window. webkit. RTCIce. Candidate; window. RTCSession. Description = window. RTCSession. Description || window. moz. RTCSession. Description || window. webkit. RTCSession. Description;

Web RTC: Interfaces • Media. Stream (aka get. User. Media) • RTCPeer. Connection • RTCData. Channel

Web RTC: Media Stream Detect’s the user devices and creates a stream 1 stream = synchronized media tracks (audio, video) var constraints = {video: true}; navigator. get. User. Media(constraints, success. Callback, error. Callback);

Web RTC: Peer Connection Establishes a P 2 P channel with the other end. Provides security and bandwidth allocation. Codes/decodes incoming and outgoing streams (VP 8, OPUS) Creates the SDP (Session Description Protocol) from the Media. Stream.

Web RTC: Peer Connection (2) pc = new RTCPeer. Connection(null); pc. onaddstream = got. Remote. Stream; pc. add. Stream(local. Stream); pc. create. Offer(got. Offer); function got. Offer(desc) { pc. set. Local. Description(desc); send. Offer(desc); } function got. Answer(desc) { pc. set. Remote. Description(desc); } function got. Remote. Stream(e) { e. stream); } attach. Media. Stream(remote. Video,

Web RTC: Peer Connection (3)

Web RTC: P 2 P

Web RTC: P 2 P – Nope with NAT

Web RTC: P 2 P – You need STUN Who am I?

Web RTC: You want a Back End Media transmission is P 2 P You need a backend to discover other peers. You need signalling to offer your media capabilities to others. Source: webrtcbydralex. com

Web RTC: P 2 P with Back End Initial signalling exchange SIP XMPP NODE Initial signalling exchange

Web RTC: Data Channel For arbitrary binary streams (gaming, Io. T) Same API as Web. Sockets. Unreliable / reliable transmission.

Web STUN RTC: Full Picture Back End

is. Web. RTCreadyyet. com

Web RTC: Conclusion Entry-level: basic JS skills Uncomplicated API Easy to set-up a demo with Node. js You need to understand the STUN and Back End signalling exchange… …or you can use a CPaa. S: Twilio, ONSIP, Nexmo, Tok. Box, Tropo. (or a framework: easy. RTC, simple. WRTC, Open. RTC, Peer. JS)

Questions? Francisco. Valentin@cern. ch