HTML5 RTC , WebRTC presentation

1. HTML5 RTC
Lunch and Learn Series
Lesson 1.

2. Agenda
 Introduction
 HTML 5 Overview
 WHY HTML5 RTC ?
 HTML5 RTC Javascript APIs
 MediaStream (getUserMedia) API
 RTC Workshop / Demo

3. Introduction
HTML5 RTC is also known as Web RTC and supports
browser-to-browser applications for voice calling, video
chat, and P2P file sharing.
RTC : Real Time Communication
It provides browsers and mobile applications with Real-Time
Communications (RTC) capabilities via simple APIs.
List of technologies that can be used for ral time communications : http://www.leggetter.co.uk/real-
time-web-technologies-guide/

4. Introduction

5. HTML5 Overview
HTML5 is a new standard for structuring and presenting content on the World Wide
Web.
HTML5 standard incorporates features like video playback and drag-and-drop that
have been previously dependent on third-party browser plug-ins such as Adobe Flash,
Microsoft Silverlight, and Google Gears.
Browser Support
All the latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all
support many HTML5 features and Microsoft Edge has support for some HTML5
functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and Android
phones all have excellent support for HTML5.

6. HTML5 Overview
New Features
New Semantic Elements − These are like <header>, <footer>, and <section>.
Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced
for <input> tag.
Persistent Local Storage − To achieve without resorting to third-party plugins.
WebSocket − A next-generation bidirectional communication technology for web
applications.
Server-Sent Events − HTML5 introduces events which flow from web server to the web
browsers called Server-Sent Events (SSE).

7. HTML5 Overview
New Features
Canvas − This supports a two-dimensional drawing surface that you can program with
JavaScript.
Audio & Video − You can embed audio or video on your web pages without resorting to
third-party plugins.
Geolocation − Now visitors can choose to share their physical location with your web
application.
Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web
pages with custom semantics.
Drag and drop − Drag and drop the items from one location to another location on a the
same webpage.

8. WHY HTML5 RTC ?
History
One of the last major challenges for the web was to enable easy and inexpensive human
communication via voice and video.
RTC has been corporate and complex, requiring expensive audio and video technologies to be
licensed or developed in house.
Integrating RTC technology with existing content, data and services has been difficult and
time consuming, particularly on the web.
Need
Many web services already use RTC, but need downloads, native apps or plugins. These includes
 Skype,
 Facebook (which uses Skype)
 Google Hangouts (which use the Google Talk plugin).
Downloading, installing and updating plugins can be complex, error prone and annoying.

9. WHY HTML5 RTC ?
Benefits
It enables rich and high-quality RTC applications to be developed for the browser, mobile
platforms, and IoT devices, and allow them all to communicate via a common set of
protocols.
It provides low cost and high quality data, audio and video communication
Browsers
HTML5 RTC is currently supported by Google Chrome, Mozilla Firefox, and Opera, in both
their desktop and Android versions.
Microsoft’s Internet Explorer and Apple’s Safari have yet to add full support for HTML5 RTC.

10. HTML5 RTC Javascript APIs
RTC Tasks
HTML5 RTC applications need to do several things:
 Retrieving audio and video streams online.
 Enable communication between users in audio and video format.
 Enable transfer of random data formats between users.
 Get network information such as IP addresses and ports, and exchange this with other
WebRTC clients (known as peers) to enable connection, even through NATs and firewalls.
 Coordinate signaling communication to report errors and initiate or close sessions.
 Exchange information about media and client capability, such as resolution and codecs.

11.  RTCPeerConnection
is the WebRTC component that handles stable and efficient communication of streaming
data between peers. This requires a mechanism to coordinate communication and to send
control messages, a process known as signaling.
HTML5 RTC Javascript APIs
 RTCDataChannel
enables peer-to-peer exchange of random data, with low time lag and high processing
speed. Examples gaming, remote desktop apps and real time text chat
API
 MediaStream (getUserMedia)
provides access to multimedia streams (video, audio, or both) from local devices without the
need to install additional software. Used for realtime communication and recording tutorials.

12. MediaStream (getUserMedia) API
This API allows web applications to access a user's camera and microphone.
The API is only capable of acquiring audio and video, not sending the data or storing it in a
file.
It exposes only one method, getUserMedia(), that belongs to the window.navigator object of
the DOM.
The getUserMedia() method takes 3 parameters
1. Contraints
2. Success callback which processes a MediaStream
3. Failure callback which processes an error object

13. MediaStream (getUserMedia) API
Constraints
The constraints parameter is an object having either one or both the properties audio and
video.
{
video: true,
audio: true
}

14. Constraints
{
video: {
mandatory: {
minWidth: 1280,
minHeight: 720,
minFrameRate: 30
},
optional: [
{ minFrameRate: 60 }
]
},
audio: true
}
MediaStream (getUserMedia) API

15. MediaStream (getUserMedia) API
Success Callback
function(stream)
{
videoStream = stream;
// Stream the data
video.src = createSrc(stream);
video.play();
}

16. MediaStream (getUserMedia) API
Error Callback
function(error) {
console.log("Video capture error: ", error.code);
});

17. Workshop
At the end of the series we should have an RTC enabled application for video and
voice chat.
Demo 1 : Implement the MediaStream API.

18. THANKS… 