This document provides an overview of WebRTC, including: - What WebRTC is and how it allows for real-time communication like audio/video chat directly in web browsers using JavaScript APIs. - How WebRTC works by accessing users' cameras and microphones via MediaStreams and enabling audio/video calls via PeerConnection using WebSockets for peer-to-peer data transfer. - The network architecture of WebRTC including media negotiation using SDP and browser support from browsers like Chrome, Firefox, and Opera. - Example use cases for WebRTC applications and a demonstration of WebRTC capabilities.

2. Agenda

What is WebRTC ?

Introduction to HTML5 and WebRTC

How does WebRTC work ?

Network Architecture

Application cases

Demo

Identity Management

3. What is WebRTC?
Web Browsers with Real-Time-Communication

Audio/Video Chat on the web.

Accessed through Javascript API.

Does not require plugins, downloads or installs.

Multiple browsers, multiple platforms.

4. HTML5 and WebRTC. Short intro
... is the fifth version of the HTML language, that offers
new capabilities to create web pages, specially in
terms of dynamic elements.
Defines WebSockets as the new transport protocol
between browser and servers
It is promoted by W3C
... is an opensource project that makes possible to
manage mutlimedia communications in the web
browser, using simple API's in Javascript.
It is promoted by the team of Google Chrome

5. How did we get here ?

6. Javascript Session Establishment Protocol
Peer-to-peer exchange of data

7. How does WebRTC work ?

MediaStreams – access to user's camera and
microphone

PeerConnection – audio/video calls

WebSockets – p2p application data transfer

8. WebSockets



Its an application protocol that provides
communications between two peers over the TCP
protocol
The server publishes a WebSocket endpoint and
client uses the endpoint's URI to connect to server
WebSocket endpoint's URI
ws://host:port/path
wss://host:port/path

9. WebRTC Architecture

10. WebRTC Architecture

11. Media Negotiation

Uses SDP for negotiating media. Classic
negotiation offer-answer.
Example SDP:
| v=0
o=bob 16833 0 IN IP4 0.0.0.0
| s=
| t=0 0
| a=ice-ufrag:c300d85b
| a=ice-pwd:de4e99bd291c325921d5d47efbabd9
| a2
| a=fingerprint:sha-1
| 99:41:49:83:4a:97:0e:1f:ef:6d:f7:c9:c7:7
| 0:9d:1f:66:79:a8:07 |
| m=audio 49203 RTP/AVP 109

12. Adoption Browsers

13. Adoption Browsers

14. Identity Management

15. Application cases

16. Application cases

17. Demo

18. References
http://www.webrtc.org/
http://dev.w3.org/2011/webrtc/editor/webrtc.html
http://www.html5rocks.com/en/tutorials/webrtc/basics/

19. Thank You