⚡Web APIs

Kamera im Browser nutzen

Fotos und Videos direkt in deiner Web-App aufnehmen

Die MediaDevices API gibt dir Zugriff auf Kamera und Mikrofon direkt im Browser. Kein Plugin, keine App. Perfekt fuer QR-Scanner, Foto-Uploads oder Video-Chat Funktionen.

Pro-Tip — Der schnelle Weg

Nutze facingMode 'environment' fuer die Rueckkamera auf dem Handy. Das ist der Standard den Nutzer bei Scanner-Apps erwarten.

Seite 1

Kamera-Zugriff anfordern

Mit navigator.mediaDevices.getUserMedia fragst du den Browser um Kamera-Zugriff. Der Nutzer muss explizit zustimmen. Behandle den Fall dass er ablehnt.

const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment' },
audio: false
});

// Stream in Video-Element anzeigen
const video = document.querySelector('video');
video.srcObject = stream;
video.play();

Foto aufnehmen

Zeichne ein einzelnes Frame aus dem Video-Stream auf ein Canvas. Von dort kannst du es als Bild exportieren und hochladen.

function takePhoto(video: HTMLVideoElement) {
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d')?.drawImage(video, 0, 0);
return canvas.toDataURL('image/jpeg', 0.8);
}

Kamera wechseln

Auf Handys mit mehreren Kameras kannst du zwischen Front und Rueckkamera wechseln. Enumeriere die verfuegbaren Geraete und wechsle den Stream.

const devices = await navigator.mediaDevices.enumerateDevices();
const cameras = devices.filter(d => d.kind === 'videoinput');

// Zur naechsten Kamera wechseln
const newStream = await navigator.mediaDevices.getUserMedia({
video: { deviceId: cameras[1].deviceId }
});

Stream aufraumen

Wenn der Nutzer die Seite verlaesst oder die Kamera nicht mehr braucht, stoppe alle Tracks. Sonst leuchtet die Kamera-LED weiter und der Nutzer verliert Vertrauen.

function stopCamera(stream: MediaStream) {
stream.getTracks().forEach(track => track.stop());
}

React Hook bauen

Kapsle die gesamte Kamera-Logik in einen Custom Hook. Start, Stop, Foto aufnehmen und Kamera wechseln als einfache Funktionen.

Seite 2

Warum das funktioniert

Native Browser-API ohne externe Abhaengigkeiten
Funktioniert auf allen modernen Browsern und Geraeten
Kein App-Download noetig fuer Kamera-Funktionen
Kombination mit Canvas erlaubt Echtzeit-Bildverarbeitung

Tipps

HTTPS ist Pflicht fuer Kamera-Zugriff, localhost ist die Ausnahme
Behandle den NotAllowedError wenn der Nutzer ablehnt
Setze Constraints fuer Aufloesung um Bandbreite zu sparen
Teste auf echten Geraeten, Emulatoren haben keine echte Kamera

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen