WebRTC for Beginners: Accessing Video and Audio in the Browser

Have you ever joined a Google Meet, Zoom alternative, or even a small browser based video chat app and wondered how it works directly in your browser without plugins? The technology behind this is called WebRTC.

WebRTC stands for Web Real Time Communication. It is a collection of browser features that allow direct communication between two devices. Using WebRTC, you can stream audio, video, or even arbitrary data between browsers with very low delay. The most exciting part is that it works natively in most modern browsers without installing anything extra.

One of the first building blocks of WebRTC is the getUserMedia() API, which lets you access the microphone and camera on a user’s device. If you can show a live webcam preview or record audio in the browser, you are already using a part of WebRTC.

What is getUserMedia?

The getUserMedia() API is part of the MediaDevices interface. It gives your JavaScript code access to the user’s audio and video hardware.

The API returns a MediaStream, which you can attach to a video element, record, or send across a WebRTC connection.

Think of it like this: getUserMedia() is your entry ticket to work with live media inside the browser.

A Simple Example

Here is the smallest example that captures both video and audio:

const videoElement = document.querySelector("video");

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    videoElement.srcObject = stream;
  })
  .catch(error => {
    console.error("Error accessing media devices.", error);
  });

This does three things:

1. Asks for both video and audio.
2. If the user grants permission, it attaches the stream to a video element.
3. If permission is denied or no device is found, it logs an error.

Working with Constraints

Constraints let you tell the browser what kind of media you want. You can specify resolution, frame rate, or even the camera to use.

const constraints = {
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 },
    facingMode: "user" // "environment" selects the back camera on phones
  },
  audio: true
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    document.querySelector("video").srcObject = stream;
  });

Constraints are not strict. If the device cannot provide exactly 1280x720, the browser will choose the closest available option.

Permissions

Security is built into the API. The browser will always ask the user for permission before sharing the microphone or camera.

It is a good idea to explain to users why you need access before calling the API. For example, if your app records voice notes, let them know before triggering the popup.

Stopping the Stream

When you are done, you should release the camera and microphone:

stream.getTracks().forEach(track => track.stop());

This is especially useful if you switch between multiple cameras or allow users to pause recording.

Where WebRTC Fits In

So far we have only talked about capturing media. The real magic of WebRTC happens when you combine it with peer to peer connections. With WebRTC, one browser can send that captured stream directly to another browser without routing through a central server. This makes live video chat and conferencing possible.

In short:

• getUserMedia() captures the media.
• WebRTC transport sends it to other peers.
• The receiving browser plays it back.

Together, these features create the seamless real time experiences we use daily.

Real World Examples

Here are a few ways getUserMedia() and WebRTC are used:

• Video calls in Google Meet or Microsoft Teams
• Online learning platforms with live classes
• Browser based screen recording tools
• Multiplayer web games that use voice chat
• Creative projects that use the webcam for motion or gesture input

Wrapping Up

WebRTC is a powerful web technology that enables real time communication directly in the browser. The getUserMedia() API is the entry point, giving developers direct access to cameras and microphones with just a few lines of code.

If you are new to WebRTC, start simple. Try displaying your webcam feed on a webpage, then experiment with constraints and permissions. Once you are comfortable, you can dive deeper into peer to peer connections, screen sharing, and recording.

If you're a software developer who enjoys exploring different technologies and techniques like this one, check out LiveReview.

LiveReview delivers high-quality feedback on your PRs/MRs within minutes.
It saves hours per review by providing fast, automated first-pass insights. This helps both junior and senior engineers move faster.

If you're tired of waiting on peer reviews or unsure about the quality of feedback you'll receive, LiveReview is here to help.