InputDeviceInfo — Schnittstelle · JavaScript-Referenz

Signatur

interface InputDeviceInfo extends MediaDeviceInfo

Beschreibung

InputDeviceInfo gehört zur Media Capture and Streams API und erweitert MediaDeviceInfo. Du erzeugst solche Objekte nicht selbst. Der Browser gibt sie zurück, wenn du navigator.mediaDevices.enumerateDevices() aufrufst. Alle Einträge mit kind gleich "audioinput" oder "videoinput" sind (in unterstützenden Browsern) Instanzen von InputDeviceInfo. Audioausgabegeräte ("audiooutput") sind dagegen reine MediaDeviceInfo-Objekte.

Von MediaDeviceInfo erbt die Schnittstelle die Eigenschaften deviceId, groupId, kind und label sowie die Methode toJSON(). Neu hinzu kommt die Methode getCapabilities(). Sie gibt ein MediaTrackCapabilities-Objekt zurück, das beschreibt, was das Gerät kann, zum Beispiel width, height, frameRate und facingMode bei Kameras oder sampleRate, channelCount und echoCancellation bei Mikrofonen.

Typische Einsatzfälle:

Gerätewahl in Videokonferenz- oder Aufnahme-Apps mit einer Liste der Geräte
Vorab prüfen, ob eine Kamera zum Beispiel Full HD oder 60 fps schafft, bevor du getUserMedia() mit passenden Vorgaben (Constraints) aufrufst
Gerät gezielt über deviceId auswählen

Welche Fähigkeiten du bekommst, hängt von der Nutzerfreigabe ab. Solange die Seite keine Kamera- oder Mikrofonberechtigung hat, liefern Browser aus Datenschutzgründen nur wenige Informationen: leere label-Werte, oft leere deviceIds und ein leeres Fähigkeiten-Objekt.

Rückgabewert

Typ

InputDeviceInfo

Beschreibung

Wird nicht direkt erzeugt, sondern ist Teil des Arrays, das navigator.mediaDevices.enumerateDevices() zurückgibt (Promise<MediaDeviceInfo[]>). Die wichtigste eigene Methode ist getCapabilities(), die ein MediaTrackCapabilities-Objekt zurückgibt.

Beispiele

Eingabegeräte auflisten und Instanztyp prüfen

const listInputDevices = async () => {
  // Erst Berechtigung holen, sonst sind label und Fähigkeiten leer
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
  stream.getTracks().forEach((t) => t.stop());

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

  for (const device of inputs) {
    const isInput = typeof InputDeviceInfo !== 'undefined' && device instanceof InputDeviceInfo;
    console.log(`${device.kind}: ${device.label} (InputDeviceInfo: ${isInput})`);
  }
};

listInputDevices().catch(console.error);

audioinput: Internes Mikrofon (InputDeviceInfo: true) videoinput: FaceTime HD-Kamera (InputDeviceInfo: true)

Kamera-Fähigkeiten mit getCapabilities() auslesen

const showCameraCapabilities = async () => {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const camera = devices.find((d) => d.kind === 'videoinput');

  if (!camera || typeof camera.getCapabilities !== 'function') {
    console.warn('getCapabilities() wird nicht unterstützt.');
    return;
  }

  const caps = camera.getCapabilities();
  console.log('Breite:', caps.width);
  console.log('Höhe:', caps.height);
  console.log('Bildrate:', caps.frameRate);
  console.log('Ausrichtung:', caps.facingMode);
};

showCameraCapabilities();

Breite: { max: 1920, min: 1 } Höhe: { max: 1080, min: 1 } Bildrate: { max: 30, min: 1 } Ausrichtung: ["user"]

Beste Kamera für Full HD wählen und starten

const startBestCamera = async () => {
  // Berechtigung sicherstellen
  (await navigator.mediaDevices.getUserMedia({ video: true }))
    .getTracks().forEach((t) => t.stop());

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

  const fullHd = cameras.find((cam) => {
    const caps = cam.getCapabilities?.() ?? {};
    return (caps.width?.max ?? 0) >= 1920 && (caps.height?.max ?? 0) >= 1080;
  }) ?? cameras[0];

  const stream = await navigator.mediaDevices.getUserMedia({
    video: {
      deviceId: { exact: fullHd.deviceId },
      width: { ideal: 1920 },
      height: { ideal: 1080 }
    }
  });

  document.querySelector('video').srcObject = stream;
  console.log('Gestartet:', fullHd.label);
};

startBestCamera().catch((err) => console.error(err.name, err.message));

Gestartet: Logitech BRIO

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-basierte Browser (Chrome, Edge, Opera) und Safari unterstützen InputDeviceInfo. Firefox kennt die Schnittstelle nicht und gibt nur MediaDeviceInfo-Objekte ohne getCapabilities() zurück. Prüfe die Unterstützung deshalb immer vorher, zum Beispiel mit typeof device.getCapabilities === 'function'.
Berechtigung nötig: Ohne vorherige Freigabe über getUserMedia() sind label und oft auch deviceId leer, und getCapabilities() gibt meist ein leeres Objekt {} zurück.
Sicherer Kontext: navigator.mediaDevices gibt es nur über HTTPS oder auf localhost. In iframes muss zusätzlich die Permissions Policy (allow="camera; microphone") gesetzt sein.
Fähigkeiten sind nicht gleich Einstellungen: getCapabilities() beschreibt, was das Gerät kann. Die tatsächlich aktiven Werte liefert MediaStreamTrack.getSettings() für einen laufenden Track. Genauer als die Werte der Gerätebeschreibung ist oft MediaStreamTrack.getCapabilities() auf dem aktiven Track.
Fingerprinting: Geräte-IDs sind pro Herkunft (Origin) und Sitzung verschieden und können sich nach dem Löschen der Cookies ändern. Speichere sie also nicht als dauerhafte Kennung.
Reagiere mit dem Ereignis devicechange auf navigator.mediaDevices, wenn Geräte angeschlossen oder entfernt werden, und rufe dann enumerateDevices() erneut auf.

Siehe auch

MediaDeviceInfo InputEvent GPUDevice GPUDeviceLostInfo GPUAdapterInfo