0Pricing
Real-Time Streaming Systems (WebRTC + Live Data) · Lesson

Accessing User Media Devices

Discover how to use `navigator.mediaDevices.getUserMedia()` to access a user's camera and microphone in a web browser.

Accessing User Media Devices is a free Real-Time Streaming Systems (WebRTC + Live Data) lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Real-Time Streaming Systems (WebRTC + Live Data) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Get User's Camera & Mic

Welcome! In this lesson, we'll learn how to access a user's camera and microphone directly from their web browser. This is the first step for any real-time video or audio application.

We'll use a powerful Web API called navigator.mediaDevices.getUserMedia().

Why getUserMedia?

getUserMedia() is a core WebRTC feature. It allows your web application to:

  • Capture audio from a microphone.
  • Capture video from a camera.
  • Access these streams as MediaStream objects.

These streams can then be displayed, recorded, or sent to other peers.

User Permissions are Key

Before your app can access any media devices, the browser must ask the user for permission. This is a crucial security and privacy feature.

  • A prompt will appear asking to "Allow" or "Block" camera/microphone access.
  • Your code only runs if the user grants permission.

Requesting Media with Constraints

getUserMedia() takes a single argument: a constraints object. This object tells the browser which media types you need and any specific requirements.

You can request:

  • audio: true for microphone access.
  • video: true for camera access.

Let's see a basic example.

Requesting Only Audio

Here's how to request only the user's microphone. If successful, the browser provides a MediaStream object containing the audio track.

We'll then log the success (or failure) of getting the stream. In a real app, you'd attach it to an <audio> element.

Live Audio Stream

Try running this example to access your microphone. Make sure your browser has permission!

async function getAudio() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
    console.log('Audio stream obtained successfully!');
    // In a browser, you'd typically attach this to an <audio> element:
    // const audioEl = document.getElementById('localAudio');
    // if (audioEl) audioEl.srcObject = stream;
  } catch (err) {
    console.error('Error accessing audio:', err.name, err.message);
    alert('Failed to get audio. Check permissions! Error: ' + err.name);
  }
}

getAudio();

Requesting Only Video

Similarly, we can request only the user's camera. The resulting MediaStream will contain a video track.

This stream can then be displayed in an <video> element, allowing you to see your live camera feed.

Live Video Stream

Run this example to try accessing your camera. Remember to grant camera access when prompted!

async function getVideo() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
    console.log('Video stream obtained successfully!');
    // In a browser, you'd typically attach this to a <video> element:
    // const videoEl = document.getElementById('localVideo');
    // if (videoEl) {
    //   videoEl.srcObject = stream;
    //   videoEl.play();
    // }
  } catch (err) {
    console.error('Error accessing video:', err.name, err.message);
    alert('Failed to get video. Check permissions! Error: ' + err.name);
  }
}

getVideo();

Dealing with Errors

getUserMedia() returns a Promise that can reject. It's crucial to handle these errors gracefully.

Common error types include:

  • NotAllowedError: User denied permission.
  • NotFoundError: No camera/mic found.
  • NotReadableError: Hardware error.

Always use a try...catch block as shown in the examples!

Quick Check: Constraints

You want to access both the user's microphone and camera. Which constraints object should you pass to getUserMedia()?

Recap: Accessing Media

Great job! You've learned how to use navigator.mediaDevices.getUserMedia() to access a user's camera and microphone.

  • It requires explicit user permission.
  • The constraints object specifies desired media types.
  • Always handle potential errors with try...catch.

Next, we'll learn how to manage these media tracks within a WebRTC peer connection.

Frequently asked questions

Is the “Accessing User Media Devices” lesson free?

Yes — the full text of “Accessing User Media Devices” is free to read here on the web, and the Real-Time Streaming Systems (WebRTC + Live Data) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Real-Time Streaming Systems (WebRTC + Live Data) course, upgrade to CoddyKit PRO.

What will I learn in “Accessing User Media Devices”?

Discover how to use `navigator.mediaDevices.getUserMedia()` to access a user's camera and microphone in a web browser. You practise Real-Time Streaming Systems (WebRTC + Live Data) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Real-Time Streaming Systems (WebRTC + Live Data)?

No prior experience is required. Real-Time Streaming Systems (WebRTC + Live Data) on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Accessing User Media Devices” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Real-Time Streaming Systems (WebRTC + Live Data) lesson?

Yes. Every Real-Time Streaming Systems (WebRTC + Live Data) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Accessing User Media Devices
  2. Adding and Removing Media Tracks
  3. Displaying Remote Audio/Video
  4. Controlling Media Quality and Constraints
← Back to Real-Time Streaming Systems (WebRTC + Live Data)