Data Stream from your Webcam and Microphone: Video Call with WebRTC Step 1

Photo by Austin Distel on Unsplash

Real time communication between browsers has been made possible in 2011 by WebRTC. This API enables you to create a P2P connection between two users and allow them to share data, for example to communicate over a video chat and share their screen. In this series of articles, we are going to create such a video chat. You can check the next articles:

• Step 2: Set up a Connection over WebSocket
• Step 3: Establish the WebRTC Connection
• Step 3: Find your contact

A first step to create a video chat is to have access to the user’s devices, like webcam and microphone, and their stream of data. In this first article, we are going to access our devices and display the video (with audio) in our browser. The end result will look like this:

Access User Audio and Video Stream

We first need to have access to the user’s webcam and microphone. The navigator has access to the media devices through the MediaDevices interface.

window.navigator.mediaDevices

We can get a list of all the devices the browser has access to by calling in the console:

const devices = await window.navigator
                            .mediaDevices
                            .enumerateDevices();

In my browser, I get an array of five devices, one video input and five audio input. But we are not interested in the devices themselves, we want to get the data stream from them.

Media content, like audio and video, are represented by the MediaStream interface. To get access to the data stream, you need to call the getUserMedia function on the mediaDevices object. We need to give the types of media we want as a parameter, here audio and video. We can give a bunch of constraints as parameter, not only the media type, but also the size of the video we want, the orientation, … We keep it simple here:

const stream = await window.navigator.mediaDevices.getUserMedia(
  {
    video: true…