Kostenlose Webcam-Fotokabine

So funktioniert es

1. Klicken Sie auf „Kamera starten", um den Webcam-Zugriff zu erlauben (Ihr Browser fragt nach einer Berechtigung).
2. Wählen Sie einen Filter und einen Timer (optional) und klicken Sie auf „Foto aufnehmen", um zu erfassen.
3. Sehen Sie sich Ihre Fotos an und laden Sie sie herunter: einzeln als JPG oder gesammelt als ZIP-Datei.

Häufige Fragen

Sind meine Daten privat?

Ja, vollständig. Ihr Webcam-Feed und Ihre Fotos verlassen Ihr Gerät nie. Alles wird lokal in Ihrem Browser verarbeitet. Wir speichern, laden oder greifen auf keines Ihrer Fotos zu.

Welche Browser werden unterstützt?

Chrome, Firefox, Edge und Safari auf Desktop und Mobil (iOS 14.5+) unterstützen den Webcam-Zugriff. Manche älteren Browser unterstützen getUserMedia möglicherweise nicht.

Kann ich mehrere Kameras nutzen?

Ja. Wenn Ihr Gerät mehrere Kameras hat (etwa Laptop und externe USB-Webcam), können Sie im Kamera-Dropdown zwischen ihnen wählen.

Wie Browser-Webcams tatsächlich funktionieren

Der Kamerazugriff im Browser wird durch die W3C-Spezifikation Media Capture and Streams geregelt. Der Einstiegspunkt ist navigator.mediaDevices.getUserMedia(): eine Funktion, die die Seite mit einem constraints-Objekt aufruft, das die Art des gewünschten Streams beschreibt. Der Browser zeigt die Berechtigungsabfrage; wenn Sie zustimmen, löst die Funktion mit einem MediaStream-Objekt auf, das einen oder mehrere Videotracks enthält. Die Seite bindet diesen Stream über video.srcObject = stream an ein <video>-Element, der Live-Feed erscheint auf dem Bildschirm, und ein Bild aufzunehmen ist dann eine Frage des Zeichnens des Videos auf ein HTML5-<canvas> in dem Moment, in dem der Nutzer auf „Foto aufnehmen“ klickt. Das Canvas wird über canvas.toBlob('image/jpeg') exportiert, woraus das herunterladbare JPG wird. Kein Einzelbild verlässt jemals Ihr Gerät, die gesamte Pipeline liegt im Prozess Ihres Browsers.

Das promise-basierte getUserMedia erschien ohne Präfix in Chrome 53 (September 2016) und Firefox 36 (Februar 2015). Safari war der Nachzügler: Webcam-Zugriff von Webseiten erreichte iOS erst mit iOS 11 (September 2017), und das moderne stabile Ziel ist iOS 14.5 oder später. Bis 2026 ist die API im Wesentlichen universell, caniuse beziffert die globale Unterstützung auf über 97 %.

Warum HTTPS Pflicht ist

getUserMedia ist auf „sichere Kontexte“ beschränkt, HTTPS, localhost auf dem Desktop oder file:// in Firefox. Über HTTP ausgelieferte Seiten können überhaupt nicht auf die Kamera zugreifen; der Aufruf wird mit einem NotAllowedError abgelehnt. Das ist der mit Abstand häufigste Fehler zur Bereitstellungszeit bei selbst gehosteten Varianten dieser Art von Werkzeug, und er wird von jedem modernen Browser einheitlich durchgesetzt. Mobil ist es noch strenger: Auf einem Smartphone gibt es keine localhost-Ausnahme, daher erfordert das Testen von Kamera-Werkzeugen auf einem lokalen Entwicklungsserver ein Tunneling-Werkzeug wie ngrok oder einen Reverse Proxy mit TLS.

Constraints: wie man die richtige Kamera anfordert

Das constraints-Objekt ist der komplexeste Teil der API. Die gängigen Stellschrauben:

• width / height: akzeptiert eine reine Zahl oder ein Objekt mit min, ideal, max, exact. ideal ist die praktische Voreinstellung; der Browser kommt so nah wie möglich heran, ohne Kameras abzulehnen, die nicht exakt passen. exact lehnt ab, wenn die Hardware es nicht liefern kann.
• facingMode: 'user' für die nach vorne gerichtete (Selfie-)Kamera oder 'environment' für die rückseitige. Auf Laptops mit nur einer Kamera wird die Vorgabe stillschweigend ignoriert; auf Smartphones ist es der sauberste Weg, das richtige Objektiv zu wählen, ohne die Geräte aufzuzählen.
• frameRate: Die meisten Webcams sind bei 30 fps begrenzt; einige externe USB-Kameras erreichen 60.
• deviceId: zum Auswählen eines bestimmten Geräts nach dem Aufzählen mit navigator.mediaDevices.enumerateDevices(). Entscheidende Feinheit: label ist ein leerer String, bis der Nutzer in dieser Sitzung mindestens eine Kameraberechtigung erteilt hat, sodass ein „Kamera auswählen“-Dropdown, das vor einer Berechtigungserteilung läuft, unbeschriftete IDs anzeigt. Das obige Kamera-Dropdown umgeht das, indem es sich erst befüllt, nachdem „Kamera starten“ erfolgreich war.

Die Kameraleuchte ist Ihr Vertrauenssignal

Auf einem Mac mit einer Webcam von 2008 oder später ist die grüne LED neben der Kamera an dieselbe Stromschiene wie der Sensor angeschlossen. macOS und die Firmware erzwingen, dass die LED leuchtet, sobald der Sensor mit Strom versorgt wird, Apple hat dies so gestaltet, dass selbst Schadsoftware auf Kernel-Ebene die LED nicht ausschalten kann, während die Kamera aufnimmt. iOS implementiert seit iOS 14 (veröffentlicht im September 2020) den orangefarbenen Punkt-Indikator am oberen Bildschirmrand, gezeichnet von einem Systemprozess, den die App nicht unterdrücken kann. Windows-Webcams nutzen auf den meisten modernen Geräten einen ähnlichen Ansatz, wobei die Durchsetzung weniger universell ist, einige alte USB-Webcams von 2010 hatten softwaregesteuerte LEDs. Bei Linux variiert es je nach Hardware.

Die Erkenntnis: Vertrauen Sie der LED, nicht der Website. Ein reines Browser-Werkzeug wie dieses kann aufrichtig versprechen, dass nichts Ihr Gerät verlässt, und die Kameraleuchte gibt Ihnen eine unabhängige Bestätigung, dass die Kamera tatsächlich aus ist, wenn die Seite es sagt. Der häufigste Fehler in Webcam-Werkzeugen ist, beim Schließen den Aufruf von stream.getTracks().forEach(t => t.stop()) zu vergessen, Symptom: Die Kameraleuchte bleibt an, nachdem der Nutzer glaubt, sie ausgeschaltet zu haben. Die Schaltfläche „Kamera stoppen“ auf dieser Seite ruft das explizit auf.

Wann Sie zu einem Browser-Webcam-Werkzeug greifen würden

• Schnelle Profilbilder für Slack, Discord, GitHub, soziale Medien, ohne eine separate Webcam-App zu installieren.
• Pass- / Ausweisfotos, zu Hause für Online-Formulare aufgenommen (Führerscheinverlängerung, Visumanträge). Der browserbasierte Datenschutz ist hier gerade deshalb wichtig, weil das Hochladen eines Gesichtsfotos zu einem Drittanbieterdienst unangenehm ist.
• Vorschauen für Videokonferenzen: Beleuchtung, Bildausschnitt und das Aussehen eines virtuellen Hintergrunds prüfen, bevor Sie einem Zoom- oder Teams-Anruf beitreten.
• Anwesenheit in Schule und Homeoffice: wenn eine Lehrkraft oder ein Arbeitgeber ein schnelles Selfie zur Bestätigung der Anwesenheit verlangt.
• Referenzaufnahmen für Kunst und Design: eine Handpose, ein Objektfoto für ein 3D-Modell, eine Selbstporträt-Skizze.
• Leichtgewichtiger Fotoautomat bei Veranstaltungen: einen Laptop mit einer fest eingestellten Seite betreiben, damit Gäste Selfies ohne App-Installation aufnehmen können.
• Mockups und Prototyping: Designer, die Abläufe mit einem Schritt „Selfie aufnehmen“ bauen, möchten eine schnelle Testseite.
• Lehr-Demos: Lehrkräfte, die Schülern zeigen, wie die moderne Web-Kamera-API funktioniert.

Das Unterscheidungsmerkmal gegenüber Photo Booth auf macOS oder der Kamera-App auf Windows ist, dass nichts installiert und nichts hochgeladen wird, nützlich auf gesperrten Arbeitsrechnern und gemeinsam genutzten Kiosken, auf denen Sie keine Software installieren können.

Filter: was die CSS-filter-Eigenschaft bietet

Das HTML5-Canvas kann CSS-Filtersyntax über die Eigenschaft ctx.filter anwenden. Die oben verfügbaren Filter verwenden dieselben Primitive, die jede CSS-Regel anwenden kann: grayscale(1) (vollständige Entsättigung, entspricht einer Luminanzprojektion), sepia(1) (warmer Braunton, der gealterte Fotos nachahmt), invert(1) (Farbnegativ), blur(5px) (Gauß-Unschärfe), brightness(1.4) (multipliziert die Pixelintensität) und contrast(1.4) (dreht sich um das mittlere Grau). Sie sind in jedem Browser seit Chrome 53 / Firefox 35 / Safari 9.1 hardwarebeschleunigt.

Ein subtiles, aber wichtiges Detail: CSS-Filter, die auf das <video>-Element angewendet werden, übertragen sich nicht auf das Canvas. Um den Filter in das gespeicherte JPG einzubacken, muss derselbe Filter vor drawImage auf ctx.filter gesetzt werden. Diese Seite tut das, sodass die Vorschau auf dem Bildschirm Pixel für Pixel mit der gespeicherten Datei übereinstimmt.

Häufige Fehler und was sie bedeuten

Wenn „Kamera starten“ fehlschlägt, kommt die Ablehnung als DOMException mit einem dieser Namen zurück:

• NotAllowedError: Sie (oder eine frühere Sitzung) haben die Berechtigung verweigert, oder die Seite läuft nicht über HTTPS. Sehen Sie im Menü für Website-Berechtigungen in der Adressleiste nach und stellen Sie sicher, dass die Kamera auf „Zulassen“ oder „Fragen“ eingestellt ist.
• NotFoundError: kein passendes Gerät. Tritt am häufigsten auf, wenn facingMode: 'environment' mit exact auf einem Desktop ohne rückseitige Kamera angefordert wird.
• NotReadableError: Die Hardware wird von einer anderen App verwendet. Zoom, Teams, OBS oder ein anderer Browser-Tab hat die Kamera geöffnet. Schließen Sie sie und versuchen Sie es erneut.
• OverconstrainedError: Die Constraints konnten nicht erfüllt werden. Lassen Sie exact-Anforderungen weg oder lockern Sie die Auflösung.
• TypeError: Das constraints-Objekt war leer. Der Aufruf muss mindestens audio oder video anfordern.

Weitere Fragen

Warum ist mein Bild auf dem Kopf oder seitlich?

Manche Android-Kameras geben in ihren EXIF-Metadaten eine irreführende Drehung an. Der Browser wendet die Drehung meist automatisch an, bevor das Videobild das Canvas erreicht, aber ältere Versionen von Samsung Internet und einige eingebettete WebViews überspringen den Schritt. Wenn Aufnahmen seitlich herauskommen, versuchen Sie, Ihr Gerät vor der Aufnahme um 90° zu drehen, oder verwenden Sie anschließend das Werkzeug „Bild drehen“.

Warum zeigt das Dropdown „Kamera 1, Kamera 2“ statt Namen?

Weil dem Browser noch keine Kameraberechtigung erteilt wurde. enumerateDevices() gibt Bezeichnungen (z. B. „FaceTime HD Camera“) erst zurück, nachdem der Nutzer den Kamerazugriff mindestens einmal in der aktuellen Sitzung genehmigt hat, bis dahin werden nur undurchsichtige IDs zurückgegeben. Klicken Sie einmal auf „Kamera starten“, erlauben Sie den Zugriff, und das Dropdown aktualisiert sich mit echten Namen.

Bleibt die Kameraleuchte an, nachdem ich die Seite geschlossen habe?

Nein. Die Schaltfläche „Kamera stoppen“ stoppt explizit jeden Track im Stream, und moderne Browser stoppen Tracks auch, wenn der Tab ausgeblendet wird oder die Seite entladen wird. Sollten Sie jemals sehen, dass die Kamera-LED nach dem Schließen eines Tabs an bleibt, ist das ein meldenswerter Fehler, meist bedeutet es, dass die Seite die Aufräumfunktion nicht aufgerufen hat. Bei diesem Werkzeug gibt ein Klick auf „Kamera stoppen“ oder das Schließen des Tabs die Hardware sofort frei.

Kann ich Video aufnehmen, nicht nur Standbilder?

Nicht mit diesem Werkzeug, es nimmt nur Standbilder auf. Die Aufnahme von Video erfordert die MediaRecorder-API und erzeugt je nach Browser Dateien in WebM, MP4 oder MKV. Die Aufnahme hat zudem eigene Datenschutzauswirkungen (Sie speichern größere Mengen identifizierbaren Filmmaterials), daher ist es ein separater Anwendungsfall, der ein eigenes spezielles Werkzeug verdient.

Werden Daten an einen Server gesendet?

Nein. Der Videostream wird direkt vom Betriebssystem an den Browser geliefert; die Canvas-Aufnahme und der JPG-Export erfolgen lokal per JavaScript; die Galerie liegt im Browser-Speicher und wird direkt auf Ihr Gerät heruntergeladen. Nichts über Ihre Kamera, Ihr Gesicht oder Ihre Fotos verlässt die Seite.

Verwandte Tools