MediaDeviceInfo.kind — Eigenschaft · JavaScript-Referenz

Signatur

MediaDeviceInfo.kind

Beschreibung

Die Eigenschaft kind eines MediaDeviceInfo-Objekts gibt an, um welche Art von Mediengerät es sich handelt. Solche Objekte liefert navigator.mediaDevices.enumerateDevices(). Mögliche Werte sind:

"videoinput": Videoeingang, z. B. Webcam oder virtuelle Kamera
"audioinput": Audioeingang, z. B. Mikrofon oder Headset-Mikrofon
"audiooutput": Audioausgang, z. B. Lautsprecher oder Kopfhörer

Am häufigsten braucht man kind, um die Geräteliste zu filtern. So lassen sich getrennte Auswahllisten für Kamera, Mikrofon und Lautsprecher bauen, etwa in einer Videokonferenz-App. Mit der deviceId des gewählten Geräts ruft man dann gezielt getUserMedia() auf oder legt über HTMLMediaElement.setSinkId() den Audioausgang fest.

Die Eigenschaft ist schreibgeschützt. Der Wert steht fest, sobald der Browser die Geräte aufzählt. Bei Eingabegeräten ist das Objekt eine Instanz von InputDeviceInfo, einer Unterklasse von MediaDeviceInfo.

Rückgabewert

Typ

"videoinput" | "audioinput" | "audiooutput"

Beschreibung

Ein String, der die Geräteart angibt.

Beispiele

Alle Geräte mit ihrer Art auflisten

const listDevices = async () => {
  const devices = await navigator.mediaDevices.enumerateDevices();
  devices.forEach(({ kind, label, deviceId }) => {
    console.log(`${kind}: ${label || '(kein Label)'} [${deviceId.slice(0, 8)}]`);
  });
};

listDevices();

audioinput: Standard - Mikrofon (Realtek) [default] videoinput: Integrated Webcam [3f9a2c1e] audiooutput: Lautsprecher (Realtek) [default]

Geräte nach Art gruppieren

const groupByKind = async () => {
  // Erst Berechtigung einholen, damit die Labels befüllt sind
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
  stream.getTracks().forEach((t) => t.stop());

  const devices = await navigator.mediaDevices.enumerateDevices();
  const grouped = Object.groupBy(devices, (d) => d.kind);

  console.log('Kameras:', grouped.videoinput?.length ?? 0);
  console.log('Mikrofone:', grouped.audioinput?.length ?? 0);
  console.log('Lautsprecher:', grouped.audiooutput?.length ?? 0);
  return grouped;
};

groupByKind();

Kameras: 1 Mikrofone: 2 Lautsprecher: 2

Auswahlliste für Kameras befüllen und Stream starten

const select = document.querySelector('#camera-select');
const video = document.querySelector('video');

const fillCameras = async () => {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const cameras = devices.filter((d) => d.kind === 'videoinput');
  select.replaceChildren(
    ...cameras.map((cam, i) => new Option(cam.label || `Kamera ${i + 1}`, cam.deviceId))
  );
};

select.addEventListener('change', async () => {
  video.srcObject?.getTracks().forEach((t) => t.stop());
  video.srcObject = await navigator.mediaDevices.getUserMedia({
    video: { deviceId: { exact: select.value } }
  });
});

fillCameras();
navigator.mediaDevices.addEventListener('devicechange', fillCameras);

// Wichtig · Fallstricke

Datenschutz: Ohne erteilte Medienberechtigung liefern Browser oft nur ein Gerät pro kind, und zwar mit leerem label und leerer deviceId. Die Werte von kind selbst sind aber auch dann verfügbar.
audiooutput: Firefox zeigt Ausgabegeräte nur an, wenn media.setsinkid.enabled aktiv ist oder vorher selectAudioOutput() aufgerufen wurde. Safari listet in der Regel keine audiooutput-Geräte auf. Eine Oberfläche für die Lautsprecherwahl sollte deshalb mit einer leeren Liste umgehen können.
Sicherer Kontext: navigator.mediaDevices gibt es nur über HTTPS oder auf localhost.
Vergleiche immer mit dem exakten, klein geschriebenen String, zum Beispiel d.kind === 'videoinput'. Andere Werte sind nicht festgelegt.
Object.groupBy aus Beispiel 2 gibt es erst ab ES2024. In älteren Umgebungen nimmst du stattdessen reduce().

Siehe auch

MediaDeviceInfo.label MediaDeviceInfo.deviceId MediaDeviceInfo.groupId HIDDevice.opened HIDDevice.vendorId