HTML 5 Web RTC

Introduction to HTML5 & WebRTC

Juan QuemadaWebRTC and Q4S HackathonMadrid, 23 October 2012

Friday, November 23, 12

The Web platform is evolving

2From Brad Neuberg, Google, http://www.slideshare.net/jobfan/google-html5-tutorial


http://www.slideshare.net/jobfan/google-html5-tutorial


JavaScript gets more efficient





Consolidation of HTML5 platformn HTML + CSS + JavaScript

w http://www.html5rocks.com/

The Web browser is getting a net O.S.n Websockets, SSE and other protocolsn Vector graphics y formula with SVG & MathMLn Games and 3D with Canvas and WebGLn Fantastic interfaces with CSS3 n Video and Audion WebStorage and Data Bases inside the browsern Access to system resources with JavaScript APIsn ......n Real time Audio y Video with WebRTC

5

Web as Platform!!!


http://www.html5rocks.com/

http://www.html5rocks.com/

Client apps in the Browser interacting with

Server apps in CDC (the cloud) using

Protocols of the HTML5 platformn HTTP 1.1 (2.0 starting) n Websocketsn XMLHTTPRequestn Server side eventsn PeerConnectionn ..........

6

The CloudInternet -> is the computer


7

HTML5 + WebGL + CSS3 https://webglmeeting.appspot.com


https://webglmeeting.appspot.com

https://webglmeeting.appspot.com

Development starts in WHATWG (2009 - 2010)n Objetive: introduce VoIP to the Web

W3C, IETF, .. starts activity in 2011n W3C: Browser APIs

w http://dev.w3.org/2011/webrtc/editor/webrtc.html

n IETF: Communication Protocolsw http://trac.tools.ietf.org/wg/rtcweb/

WebRTC suported now in Chromen Before end of 2012: support for Firefox, Opera, Explorer

w Mobile device support expected in 2013

8

WebRTC history


http://dev.w3.org/2011/webrtc/editor/webrtc.html

http://dev.w3.org/2011/webrtc/editor/webrtc.html

http://trac.tools.ietf.org/wg/rtcweb/

http://trac.tools.ietf.org/wg/rtcweb/

Peerconnectionsn UDP/RTP streams between browsers

w with low latency

Signalling with SDP configurationsn But using proprietary protocols

9

PeerConnections


getUserMedian Local stream management: camara, microphone, ....

StreamAPIn Management of multimedia streams

PeerConnectionn UDP/RTP streams between browsers

APIs JavaScript de WebRTCnavigator.webkitGetUserMedia("video,audio", gotStream, gotStreamFailed);

function gotStream(stream) {

var url = webkitURL.createObjectURL(stream);

document.getElementById("localView").src = url;

trace("User has granted access to local media.”);

localStream = stream;

}

function gotStreamFailed(error) {

alert("Failed to get access to local media.”);

}

function doCall() {

createPeerConnection();

}


Proyecto Software Libre(C++):Apoyado por: Google, Mozilla, Opera


Arquitectura Web RTC


iSACn Wideband audio codec for VoIP and streaming audio.

w16 kHz or 32 kHz sampling, adaptive bit rate: 12 to 52 kbpsiLBCn Narrowband codec for VoIP and streaming (RFCs 3951, 3952)

w8 kHz sampling, 5.2 kbps (20ms frames), 13.33 kbps (30ms fr.) NetEQ for Voicen Dynamic jitter buffer and error concealment algorithm used for

concealing the negative effects of network jitter and packet loss. wKeeps latency low, while maintaining the highest voice quality.

Acoustic Echo Canceler (AEC)n Software signal processing component, for real time removal of

acoustic echo of voice feeding into the active microphoneNoise Reduction (NR)n Software signal processing component removing background

noise usually associated with VoIP, such as Hiss, fan noise, etc.

AudioEngine


VideoEngine is a framework video media chain for video, from camera to the network, and from network to the screen.

VP8n Video codec from WebM Project.

wWell suited for RTC as it is designed for low latency

Video Jitter Buffern Dynamic Jitter Buffer for video.

wConceals effects of jitter and packet loss on overall video quality

Image enhancementsn For example, removes video noise from the image capture by the

webcam

VideoEngine


http://webmproject.org/

http://webmproject.org/

El ejemplo intercambia información a traves de Servidor Web (chat)n Que luego es utilizada en ICE/TURN/STUN

wPara establecer la conexión a través de NATICE n Interactive Connectivity Establishment. RFC 5245

wEstablishing connectivity over NATs with STUN/TURN serversTURNn Traversal Using Relays around NAT (TURN), RFC 5766

wPara NATs simetricos, con servidor TURN (relay)STUNn Session Traversal Utilities for NAT (STUN), IETF 5389

wNo funciona con nat simetricosLa conexion se realiza a través de UDP/RTP

Protocolos PeerConnection


http://tools.ietf.org/html/rfc5766




Proyecto Software Libre: LyncKia: WebRTC MCU


Thanks


HTML 5 Web RTC

Documents

Transcript of HTML 5 Web RTC