Real-Time Streaming Systems (WebRTC + Live Data) · Lektion

Auf Benutzer-Mediengeräte zugreifen

Erfahren Sie, wie Sie mit `navigator.mediaDevices.getUserMedia()` im Webbrowser auf die Kamera und das Mikrofon eines Benutzers zugreifen.

Auf Benutzer-Mediengeräte zugreifen ist eine kostenlose Real-Time Streaming Systems (WebRTC + Live Data)-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Real-Time Streaming Systems (WebRTC + Live Data)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Real-Time Streaming Systems (WebRTC + Live Data)-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Häufig gestellte Fragen

Ist die Lektion „Auf Benutzer-Mediengeräte zugreifen“ kostenlos?

Ja — der vollständige Text von „Auf Benutzer-Mediengeräte zugreifen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Real-Time Streaming Systems (WebRTC + Live Data)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Real-Time Streaming Systems (WebRTC + Live Data)-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Auf Benutzer-Mediengeräte zugreifen“?

Erfahren Sie, wie Sie mit `navigator.mediaDevices.getUserMedia()` im Webbrowser auf die Kamera und das Mikrofon eines Benutzers zugreifen. Du übst Real-Time Streaming Systems (WebRTC + Live Data) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Real-Time Streaming Systems (WebRTC + Live Data) zu starten?

Keine Vorkenntnisse erforderlich. Real-Time Streaming Systems (WebRTC + Live Data) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Auf Benutzer-Mediengeräte zugreifen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Real-Time Streaming Systems (WebRTC + Live Data)-Lektion Code schreiben und ausführen?

Ja. Jede Real-Time Streaming Systems (WebRTC + Live Data)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Real-Time Streaming Systems (WebRTC + Live Data)