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 files using the <input> element


The first thing you will notice when you use this version of the application is that there is now a Share a new file button sitting underneath the local video preview window at the top left-hand corner of the user interface. As you saw previously, this button is bound to the click_file_input() function using an onclick event handler. This is a very simple function that triggers the click event on the file_input element itself.

// initiate manual file selection
function click_file_input(event) {
  document.getElementById('file_input').click();
}

Doing so allows us to use an image button and hide the default file_input element, so that we can easily customize the design of the user interface as per our choice and not just limited by the design constraints of the input element.

This then prompts the browser to present the user with the native file selection user interface. Once the user has selected the file of his/her choice, then the file_input change...