HTMLInputElement.capture — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.capture

Beschreibung

Die Eigenschaft capture spiegelt das gleichnamige HTML-Attribut eines <input>-Elements wider. Sie wirkt nur bei type="file". Damit gibt man dem Browser einen Hinweis, dass die Datei direkt über ein Aufnahmegerät erfasst werden soll, also mit Kamera oder Mikrofon, statt sie aus dem Dateisystem oder der Galerie auszuwählen.

Gültige Werte sind "user" (Frontkamera bzw. nutzerseitiges Gerät, z. B. für Selfies) und "environment" (Rückkamera, z. B. für Dokumente oder Barcodes). Ob Foto, Video oder Audio aufgenommen wird, legt das accept-Attribut fest, etwa image/*, video/* oder audio/*.

Die Eigenschaft liefert immer einen String. Fehlt das Attribut, ist der Wert "". Beim Setzen wird das Attribut im DOM aktualisiert. Der Wert ist nur ein Hinweis: Der Browser bzw. das Betriebssystem entscheidet, ob er beachtet wird. Nützlich ist die Eigenschaft vor allem in mobilen Web-Apps, etwa für Beleg-Scans, Profilfotos oder Schadensmeldungen.

Rückgabewert

Typ

string

Beschreibung

Der Wert des capture-Attributs: "user", "environment" oder "", wenn das Attribut fehlt. Nicht erkannte Werte werden je nach Browser unverändert zurückgegeben oder als ungültig behandelt.

Beispiele

Rückkamera für Dokumenten-Scan anfordern

// <input type="file" id="beleg" accept="image/*">
const input = document.querySelector('#beleg');
input.capture = 'environment';

console.log(input.capture);
console.log(input.getAttribute('capture'));

environment environment

Selfie-Upload mit Vorschau

const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.capture = 'user'; // Frontkamera
document.body.append(input);

const preview = document.createElement('img');
preview.alt = 'Vorschau';
document.body.append(preview);

input.addEventListener('change', () => {
  const [file] = input.files;
  if (!file) return;
  preview.src = URL.createObjectURL(file);
  preview.onload = () => URL.revokeObjectURL(preview.src);
});

Unterstützung prüfen und Aufnahme umschalten

const input = document.querySelector('input[type="file"]');
const supportsCapture = 'capture' in HTMLInputElement.prototype;
console.log('capture unterstützt:', supportsCapture);

// Umschalter zwischen Kamera und Galerie
const useCamera = (enabled) => {
  if (enabled) {
    input.capture = 'environment';
  } else {
    input.removeAttribute('capture'); // Galerie/Dateiauswahl erlauben
  }
  console.log(`capture = "${input.capture}"`);
};

useCamera(true);
useCamera(false);

capture unterstützt: true capture = "environment" capture = ""

// Wichtig · Fallstricke

Nur ein Hinweis: Desktop-Browser ignorieren capture meistens und zeigen den normalen Dateidialog. Auch mobile Systeme können eine andere Kamera wählen oder die Galerie zusätzlich anbieten.
Die Galerie wird gesperrt: Ist capture gesetzt, können Nutzer auf vielen Mobilgeräten keine vorhandenen Dateien mehr auswählen. Wenn beides möglich sein soll, das Attribut entfernen (removeAttribute('capture')). input.capture = '' reicht dafür nicht, denn ein leeres Attribut bleibt vorhanden.
Die Eigenschaft wirkt nur bei type="file". Bei anderen Typen wird sie ignoriert.
Mit accept kombinieren (image/*, video/*, audio/*). Sonst ist nicht klar, welches Aufnahmegerät gemeint ist.
Ältere Spezifikationen kannten einen booleschen Wert (capture ohne Wert). Diesen interpretieren Browser heute meist als Standardkamera.
Für Live-Kamerabilder mit voller Kontrolle (Stream, Auflösung, Kamerawahl) stattdessen navigator.mediaDevices.getUserMedia() verwenden. Das erfordert HTTPS und eine Berechtigung.
Hochgeladene Dateien immer auf dem Server prüfen (Typ, Größe). accept und capture sind keine Sicherheitsmechanismen.

Siehe auch

HTMLIFrameElement.privateToken HTMLInputElement.colorSpace HTMLInputElement.pattern HTMLInputElement.value HTMLInputElement.alt