Book Image

Getting Started with WebRTC

By : Rob Manson
Book Image

Getting Started with WebRTC

By: Rob Manson

Overview of this book

WebRTC delivers web-based real-time communication and is set to revolutionize our view of what the Web really is. Streaming audio and video from browser to browser, as well as opening raw access to the camera and microphone, is already creating a whole new dynamic web. WebRTC also introduces real-time data channels that will allow interaction with dynamic data feeds from sensors and other devices. This really is a great time to be a web developer! Getting Started with WebRTC provides all of the practical information you need to quickly understand what WebRTC is, how it works, and how you can add it to your own web applications. It includes clear working examples designed to help you get started building your own WebRTC-enabled applications right away. Getting Started with WebRTC will guide you through the process of creating your own WebRTC application that can be applied in a number of different real-world situations, using well documented and clearly explained code examples. You will learn how to quickly and easily create a practical peer-to-peer video chat application, an audio only call option, and how a Web-Socket-based signaling server can also be used to enable real-time text-based chat. You will also be shown how this same server and application structure can easily be extended to include simple drag-and-drop file sharing with transfer updates and thumbnail previews.
Table of Contents (15 chapters)
Getting Started with WebRTC
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

The HTML user interface for text-based chat


First, let's look at how the HTML-based web page will need to be modified. As usual, we start with a standard HTML5 web page that includes a DOCTYPE definition, a document head, and a document body.

<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
…
</body>
</html>

And again, the first element inside the document head is a pair of <script> tags that includes the webrtc_polyfill.js script.

As before, this is followed by the video_call_with_chat.js code that defines the browser side logic included inline within a pair of <script></script> tags. This code only differs slightly from the original basic_video_call.js code, and we'll walk through this in detail now.

Next, our simple CSS-based styles are defined within a pair of <style></style> tags as usual with style definitions for chat, messages, and message_input ID's.

Then as usual, the HTML body content of the page is defined to bind...