Webcam-Zugriff im Browser mit HTML & JS

Die Integration der Kamera eines Benutzers direkt in eine Webanwendung war lange Zeit eine komplexe Aufgabe, die spezielle Plugins oder Technologien erforderte. Mit modernen Webstandards hat sich dies jedoch drastisch geändert. Heute ist es relativ einfach, über HTML und JavaScript auf die Kamera eines Geräts zuzugreifen, sei es die Frontkamera eines Smartphones oder die eingebaute Webcam eines Laptops. Diese Möglichkeit eröffnet eine Vielzahl von Anwendungsfällen, von einfachen Profilbild-Uploadern bis hin zu komplexen Videokonferenzsystemen.

Grundsätzlich gibt es zwei Hauptansätze, um auf die Kamera zuzugreifen, die sich hinsichtlich ihrer Komplexität und Funktionalität unterscheiden: die Verwendung des capture-Attributs bei Dateieingaben und die Nutzung der getUserMedia API.

Einfacher Zugriff auf Mobilgeräten: Das 'capture'-Attribut

Für den einfachen Fall, dass Sie dem Benutzer ermöglichen möchten, schnell ein Foto oder Video mit der Kamera seines Mobilgeräts aufzunehmen und dies als Datei hochzuladen, bietet sich das capture-Attribut für <input type="file">-Elemente an. Dieses Attribut ist besonders nützlich auf Mobilgeräten, da es das standardmäßige Dateiauswahlfenster durch die Kamera-App ersetzt.

Das capture-Attribut kann zwei Werte annehmen:

• user: Fordert die vordere (zum Benutzer gerichtete) Kamera an.
• environment: Fordert die hintere (von Benutzer abgewandte) Kamera an.

Ein Beispiel dafür sieht wie folgt aus:

<input type="file" accept="image/*" capture="user">

Dieses Eingabefeld öffnet auf einem Mobilgerät direkt die Frontkamera, sobald der Benutzer darauf klickt, und erlaubt die Aufnahme eines Fotos. Nach der Aufnahme wird das Bild wie eine hochgeladene Datei behandelt.

Dieser Ansatz ist sehr einfach zu implementieren, bietet aber keine Kontrolle über den Kamerastream in Echtzeit. Für fortgeschrittenere Anwendungen, wie das Anzeigen des Kamerabildes auf der Webseite vor der Aufnahme oder die Verarbeitung des Streams, benötigen Sie die getUserMedia API.

Fortgeschrittener Zugriff: Die getUserMedia API

Die getUserMedia() API ist Teil der WebRTC (Web Real-Time Communications) Spezifikation und ermöglicht den Zugriff auf Medien-Hardware wie Kameras und Mikrofone direkt über den Browser. Sie ist das Herzstück vieler moderner Webanwendungen, die Echtzeit-Audio- und Video-Streams verarbeiten.

Wenn getUserMedia() aufgerufen wird, fordert der Browser die Erlaubnis des Benutzers an, auf die angeforderten Medienquellen (Kamera, Mikrofon oder beides) zuzugreifen. Dies ist ein wichtiger Sicherheitsmechanismus, der sicherstellt, dass Webseiten nicht ohne Zustimmung auf Ihre Geräte zugreifen können.

Die API wird über das navigator.mediaDevices-Objekt aufgerufen, das eine Promise zurückgibt. Diese Promise wird mit einem MediaStream-Objekt aufgelöst, wenn der Benutzer die Berechtigung erteilt, oder mit einem Fehler abgelehnt, wenn dies nicht der Fall ist oder keine geeigneten Geräte gefunden wurden.

Die grundlegende Syntax sieht so aus:

navigator.mediaDevices.getUserMedia(constraints)
 .then(function(stream) {
 // Mach etwas mit dem MediaStream
 })
 .catch(function(err) {
 // Fehlerbehandlung
 });

Das constraints-Objekt ist entscheidend, da es definiert, welche Art von Medien (Audio, Video) angefordert wird und mit welchen Eigenschaften. Es ist ein Objekt mit optionalen audio- und video-Eigenschaften, die boolesche Werte (true/false) oder detailliertere Constraint-Objekte sein können.

Das MediaStream-Objekt

Ein MediaStream ist im Wesentlichen ein Datenstrom von Audio- oder Videoinhalten. Dieser Stream wird nicht im Gerätespeicher gespeichert, sondern kann direkt an Medienelemente wie <video> oder <audio> über deren srcObject-Eigenschaft übergeben werden. Dies ermöglicht die Anzeige des Kamerabildes in Echtzeit auf der Webseite.

const videoElement = document.getElementById('meinVideoElement');
videoElement.srcObject = stream;
videoElement.play(); // Optional, um sicherzustellen, dass die Wiedergabe startet

MediaStreamConstraints: Steuerung des Zugriffs

Das constraints-Objekt ermöglicht eine feine Steuerung des angeforderten Medienstreams. Die einfachste Form ist:

const constraints = { audio: false, video: true }; // Nur Video anfordern

Wenn audio oder video auf true gesetzt sind, bedeutet dies, dass das entsprechende Medium erforderlich ist. Wenn das Gerät des Benutzers keine Kamera hat, schlägt getUserMedia mit einem NotFoundError fehl.

Sie können detailliertere Anforderungen festlegen, indem Sie ein Objekt für video (oder audio) verwenden. Zum Beispiel, um eine bevorzugte Auflösung anzufordern:

const constraints = {
 video: {
 width: 1280,
 height: 720
 }
};

Diese Werte sind Präferenzen. Der Browser versucht, ein Gerät zu finden, das diese Kriterien erfüllt, verwendet aber notfalls das am besten passende verfügbare Gerät. Um Anforderungen zwingend zu machen, können Sie Schlüsselwörter wie min, max oder exact verwenden:

const constraints = {
 video: {
 width: { min: 640, ideal: 1280, max: 1920 },
 height: { min: 480, ideal: 720, max: 1080 },
 exact: { frameRate: 30 } // Exakt 30 FPS erforderlich
 }
};

Mit min und max legen Sie einen Bereich fest, innerhalb dessen die Fähigkeiten des Geräts liegen müssen. Mit exact machen Sie eine Anforderung zwingend; wenn kein Gerät die exakte Fähigkeit besitzt, schlägt der Aufruf fehl. ideal gibt eine bevorzugte Fähigkeit an, die der Browser, wenn möglich, verwenden soll, aber nicht zwingend erforderlich ist.

Ein weiteres wichtiges Constraint, besonders auf Mobilgeräten, ist facingMode:

const constraints = {
 video: {
 facingMode: "user" // Frontkamera anfordern
 // facingMode: "environment" // Rückkamera anfordern
 }
};

Schließlich können Sie auch ein bestimmtes Gerät anhand seiner ID auswählen, falls mehrere Kameras verfügbar sind. Geräte-IDs können mit navigator.mediaDevices.enumerateDevices() abgerufen werden.

const constraints = {
 video: {
 deviceId: { exact: 'hier-ist-die-geraete-id' }
 }
};

Berechtigungen und Fehlerbehandlung

Wie bereits erwähnt, ist die Zustimmung des Benutzers für den Zugriff auf die Kamera erforderlich. Wenn der Benutzer die Berechtigung verweigert, wird die Promise von getUserMedia() mit einem NotAllowedError abgelehnt. Es ist wichtig, diesen Fall in Ihrem Code zu behandeln und dem Benutzer Feedback zu geben, warum der Kamerazugriff nicht funktioniert.

Weitere mögliche Fehler sind:

• NotFoundError: Keine Geräte, die den Constraints entsprechen, gefunden.
• NotReadableError: Hardwarefehler oder OS-Level-Fehler verhindern den Zugriff.
• OverconstrainedError: Die angegebenen Constraints können nicht erfüllt werden.
• TypeError: Ungültige Constraints angegeben.

Die Fehlerbehandlung erfolgt im .catch()-Block der Promise.

Den Kamerastream stoppen

Wenn der Kamerastream nicht mehr benötigt wird (z.B. beim Verlassen einer Seite oder durch Klicken auf einen "Stop"-Button), sollten Sie ihn manuell beenden, um Ressourcen freizugeben und die Privatsphäre des Benutzers zu schützen. Dies geschieht, indem Sie alle Tracks im MediaStream beenden.

const stream = videoElement.srcObject;
if (stream) {
 const tracks = stream.getTracks();
 tracks.forEach(track => track.stop());
 videoElement.srcObject = null; // Optional: Videoelement leeren
}

Vergleich: capture-Attribut vs. getUserMedia API

Ein einfaches Beispiel mit getUserMedia

Das folgende Beispiel zeigt die grundlegende Struktur, um einen Kamerastream in einem <video>-Element anzuzeigen und zu stoppen. (Struktur basierend auf dem bereitgestellten Code, vereinfacht)

<!-- HTML Struktur -->
<div>
 <video id="videoElement" width="640" height="480" autoplay playsinline>Ihr Browser unterstützt das video-Tag nicht.</video>
 <div>
 <button onclick="startCam()">Kamera starten</button>
 <button onclick="stopCam()">Kamera stoppen</button>
 </div>
 <div id="errorMsg" style="color: red;"></div>
</div>

<script>
 const videoElement = document.getElementById('videoElement');
 const errorElement = document.getElementById('errorMsg');
 let currentStream; // Variable, um den Stream zu speichern

 const constraints = {
 audio: false, // Kein Audio anfordern
 video: { facingMode: "user" } // Frontkamera bevorzugen
 };

 function startCam() {
 if (currentStream) { // Stream läuft bereits
 errorElement.textContent = "Kamera läuft bereits!"; errorElement.style.display = "block"; return; } errorElement.textContent = ''; // Fehlermeldung zurücksetzen errorElement.style.display = 'none'; navigator.mediaDevices.getUserMedia(constraints) .then(function(stream) { currentStream = stream; // Stream speichern videoElement.srcObject = stream; videoElement.play(); }) .catch(function(err) { console.error("Fehler beim Zugriff auf die Kamera: ", err); let msg = "Kamera konnte nicht gestartet werden."; if (err.name === "NotAllowedError") { msg = "Zugriff auf Kamera verweigert. Bitte erlauben Sie den Zugriff in den Browser-Einstellungen."; } else if (err.name === "NotFoundError") { msg = "Keine passende Kamera gefunden."; } errorElement.textContent = msg; errorElement.style.display = "block"; }); } function stopCam() { if (currentStream) { currentStream.getTracks().forEach(track => track.stop()); videoElement.srcObject = null; currentStream = null; // Stream zurücksetzen errorElement.textContent = "Kamera gestoppt."; errorElement.style.display = "block"; } else { errorElement.textContent = "Kamera ist bereits gestoppt!"; errorElement.style.display = "block"; } } </script>

Dieses Beispiel demonstriert die grundlegenden Schritte: Anfordern des Streams mit getUserMedia, Zuweisen des Streams zum srcObject eines <video>-Elements und Stoppen des Streams durch Beenden der Tracks.

Häufig gestellte Fragen (FAQs)

F: Benötige ich spezielle Software oder Plugins, um auf die Kamera im Browser zuzugreifen?
A: Nein, mit modernen Browsern und der getUserMedia API, die Teil von WebRTC ist, benötigen Sie keine Plugins. Es handelt sich um eine native Browser-Funktion.

F: Ist der Kamerazugriff sicher?
A: Ja, der Zugriff ist sicher, da er immer die explizite Zustimmung des Benutzers erfordert. Der Browser zeigt eine deutliche Aufforderung an, die der Benutzer annehmen oder ablehnen muss. Außerdem ist getUserMedia nur in sicheren Kontexten (HTTPS) erlaubt, um Man-in-the-Middle-Angriffe zu verhindern.

F: Kann ich gleichzeitig auf Front- und Rückkamera zugreifen?
A: Normalerweise können Sie nur auf eine Kamera gleichzeitig zugreifen. Sie können jedoch über die facingMode-Constraint oder durch Auswahl einer spezifischen deviceId zwischen den verfügbaren Kameras wechseln.

F: Was passiert, wenn der Benutzer den Kamerazugriff verweigert?
A: Wenn der Benutzer die Berechtigung verweigert, wird die Promise von getUserMedia() mit einem NotAllowedError abgelehnt. Ihr Code sollte diesen Fehler abfangen und den Benutzer informieren, dass der Zugriff nicht möglich ist.

F: Wie kann ich ein Bild vom Kamerastream aufnehmen?
A: Um ein Bild von einem laufenden MediaStream aufzunehmen, können Sie das aktuelle Bild des <video>-Elements auf ein <canvas>-Element zeichnen und dann das Bild vom Canvas extrahieren (z.B. als Data URL oder Blob).

F: Funktioniert getUserMedia auf allen Geräten?
A: getUserMedia wird von den meisten modernen Desktop- und Mobilbrowsern gut unterstützt. Es gibt jedoch Unterschiede bei der Unterstützung spezifischer Constraints (wie z.B. sehr detaillierte Auflösungsanforderungen oder bestimmte facingMode-Werte) zwischen verschiedenen Browsern und Betriebssystemen.

Der Zugriff auf die Kamera im Webbrowser ist eine leistungsstarke Funktion, die die Möglichkeiten von Webanwendungen erweitert. Ob für einfache Uploads mit dem capture-Attribut oder für interaktive Echtzeit-Erlebnisse mit der getUserMedia API, die Webplattform bietet die notwendigen Werkzeuge, um die Geräte-Kamera zu nutzen und beeindruckende Anwendungen zu erstellen.

Hat dich der Artikel Webcam-Zugriff im Browser mit HTML & JS interessiert? Schau auch in die Kategorie Ogólny rein – dort findest du mehr ähnliche Inhalte!