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

Adding JavaScript functions to enable chatting


Next, we need to add a few simple functions that will handle the chat messages received from the signaling server and that will enable the local users to send their own messages.

At the end of the existing start() function, we add two calls that define some basic functionality for the message_input bar.

The first step is to add an onkeydown event handler that checks each new character entered into the message_input bar, and if the latest one is a return, then it takes the full value of the message and sends it to the signaling server as a new_chat_message.

  document.getElementById("message_input").onkeydown =
    send_chat_message;

The second step is to add a simple onfocus event handler that clears the message_input bar so that you can start typing a new message. By default, we start with a simple hint that says Type here then hit enter... and we need to clear this as soon as you bring focus to the message_input bar.

  document.getElementById(...