Obtaining a live video and audio feed from a user's webcam and microphone is the first step to creating a communication platform on WebRTC. This has traditionally been done through browser plugins, but we will use the getUserMedia API to do this all in JavaScript.
In this chapter, we will cover the following topics:
- Getting access to media devices
- Constraining the media stream
- Handling multiple devices
- Modifying the stream data
There has been a long history behind trying to get media devices to the browser screen. Many have struggled with various Flash-based or other plugin-based solutions that required you to download and install something in your browser to be able to capture the user's camera. This is why the W3C decided to finally create a group to bring this functionality into the browser. The latest browsers now give the JavaScript access to the getUserMedia API, also known as the MediaStream API.
This API has a few key points of functionality:
- It provides a
streamobject that represents a real-time media stream, either in the form of audio or video - It handles the selection of input devices when there are multiple cameras or microphones connected to the computer
- It provides security through user preferences and permissions that ask the user before a web page can start fetching a stream from a computer's device
Before we move any further, we should set a few standards about our coding environment. First off, you should have a text editor that allows you to edit HTML and JavaScript. There are tons of ways to accomplish this and, if you have purchased this book, the chances are high that you have a preferred editor already.
The other requirement for working on the media APIs is having a server to host and serve the HTML and JavaScript files. Opening up the files directly by double-clicking them will not work for the code presented in this book. This is due to the permissions and security set forth by the browser that does not allow it to connect to cameras or microphones unless it is being served by an actual server.
Setting up a local web server is the first step in any web developer's tool belt. In conjunction with text editors, static web servers are also plentiful and vary from language to language. My personal favorite is using Node.js with node-static, a great and easy-to-use web server:
- Visit the Node.js website at http://nodejs.org/. There should be a big INSTALL button on the home page that will help you with installing Node.js on your OS.
- Once Node.js is installed on your system, you will also have the package manager for Node.js installed called node package manager (npm).
- Open up a terminal or command line interface and type
npm install -g node-static(you will, more than likely, need administrator privileges). - Now you can navigate to any directory that contains the HTML files you would like to host on the server.
- Run the
staticcommand to start a static web server in this directory. You can navigate tohttp://localhost:8080to see your file in the browser!
You will also be able to make directories and serve as many HTML files as you would like from this server. You can also use this to serve the example files associated with this book.
Now we can move on to creating our first project!
Our first WebRTC-enabled page will be a simple one. It will show a single <video> element on the screen, ask to use the user's camera, and show a live video feed of the user right in the browser. The video tag is a powerful HTML5 feature in itself. It will not only allow us to see our video on the screen, but can also be used to play back a variety of video sources. We will start by creating a simple HTML page with a video element contained in the body tag. Create a file named index.html and type the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Learning WebRTC - Chapter 2: Get User Media</title>
</head>
<body>
<video autoplay></video>
<script src="main.js"></script>
</body>
</html>If you open this page, there is nothing exciting going on yet. It should be a blank white page, which tells you that it is looking for the main.js file. We can start by adding the main.js file and add the getUserMedia code to it:
function hasUserMedia() {
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasUserMedia()) {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({ video: true, audio: true }, function (stream) {
var video = document.querySelector('video'),
video.src = window.URL.createObjectURL(stream);
}, function (err) {});
} else {
alert("Sorry, your browser does not support getUserMedia.");
}Now, you should be able to refresh your page and see everything in action! First, you should see a similar permission popup that you saw in the previous example when you ran the WebRTC demo. If you select Allow, it should get access to your camera and display your face in the <video> element on the web page.
The first step to work with the new browser APIs is to deal with the browser prefixes. Most of the time, browsers like to be ahead of the curve and implement features before they become an official standard. When they do this, they tend to create a prefix which is similar to the name of the browser (that is, WebKit for Chrome or Moz for Firefox). This allows the code to know if the API is a standard one or not, and deals with it accordingly. Unfortunately, this also creates several different methods for accessing the API in different browsers. We overcome this by creating a function to test if any of these functions exist in the current browser and, if they do, we assign them all to one common function that we can use in the rest of the code.
The next thing we do is to access the getUserMedia function. This function looks for a set of parameters (to customize what the browser will do) and a callback function. The callback function should accept one parameter: where the stream is coming from and the media devices on the computer.
This object points to a media stream that the browser is holding onto for us. This is constantly capturing data from the camera and microphone, and waiting for the instructions from the web application to do something with it. We then get the <video> element on the screen and load this stream into that element using window.URL.createObjectURL. Since elements cannot accept the JavaScript objects as parameters, it needs some string to fetch the video stream from. This function takes the stream object and turns it into a local URL that it can get the stream data from.
You have now completed the first step to build a WebRTC application! Reflecting on the code for this page, you can now see that the getUserMedia API is doing a lot for you. Even just getting a stream object from the camera and feeding it into a video on the screen could be the subject of an entire C or C++ book!