MediaDeviceInfo.toJSON() — Methode · JavaScript-Referenz

Signatur

MediaDeviceInfo.prototype.toJSON()

Beschreibung

Die Methode toJSON() der Schnittstelle MediaDeviceInfo ist ein Serializer. Sie gibt ein gewöhnliches JavaScript-Objekt zurück, das die Eigenschaften deviceId, groupId, kind und label des Mediengeräts als eigene Eigenschaften enthält. Das zurückgegebene Objekt ist kein JSON-String, sondern kann mit JSON.stringify() in einen String umgewandelt werden.

Normalerweise muss man toJSON() nicht selbst aufrufen: JSON.stringify() ruft die Methode automatisch auf. Das ist wichtig, weil die Eigenschaften von MediaDeviceInfo als Getter auf dem Prototyp liegen und nicht als eigene Eigenschaften der Instanz. Ohne toJSON() würde JSON.stringify() nur {} liefern, und auch Spread-Syntax ({...device}) oder Object.keys() finden keine Eigenschaften.

Typische Einsatzfälle sind das Protokollieren der verfügbaren Kameras und Mikrofone, das Übertragen der Geräteliste an einen Server (z. B. für Diagnosezwecke) oder das Speichern einer bevorzugten Gerätewahl in localStorage. Bei Instanzen von InputDeviceInfo (einer Unterklasse) wird dieselbe Methode geerbt; getCapabilities()-Werte sind nicht Teil der Serialisierung.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt mit den Eigenschaften deviceId, groupId, kind ("audioinput", "audiooutput" oder "videoinput") und label, jeweils als string.

Beispiele

Geräteliste als JSON protokollieren

const listDevices = async () => {
  const devices = await navigator.mediaDevices.enumerateDevices();
  // JSON.stringify ruft toJSON() automatisch für jedes Gerät auf
  console.log(JSON.stringify(devices, null, 2));
};

listDevices();

[ { "deviceId": "default", "kind": "audioinput", "label": "Standard – Internes Mikrofon", "groupId": "3f0c1a..." }, ... ]

Unterschied: toJSON() vs. Spread-Syntax

const [device] = await navigator.mediaDevices.enumerateDevices();

console.log({ ...device });          // Getter liegen auf dem Prototyp
console.log(Object.keys(device));
console.log(device.toJSON());        // einfaches Objekt mit allen Feldern

{} [] { deviceId: "...", kind: "audioinput", label: "...", groupId: "..." }

Bevorzugte Kamera in localStorage speichern

const saveCamera = async () => {
  // Berechtigung anfragen, damit label und deviceId gefüllt sind
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  stream.getTracks().forEach((t) => t.stop());

  const devices = await navigator.mediaDevices.enumerateDevices();
  const camera = devices.find((d) => d.kind === 'videoinput');
  if (!camera) return;

  localStorage.setItem('preferredCamera', JSON.stringify(camera.toJSON()));

  const saved = JSON.parse(localStorage.getItem('preferredCamera'));
  console.log(`Gespeichert: ${saved.label} (${saved.kind})`);
};

saveCamera();

Gespeichert: FaceTime HD Camera (videoinput)

// Wichtig · Fallstricke

Kein String: toJSON() gibt ein Objekt zurück, keinen JSON-Text. Für einen String JSON.stringify() verwenden.
Leere Werte ohne Berechtigung: Solange der Nutzer keinen Zugriff per getUserMedia() erteilt hat, sind label und oft auch deviceId/groupId leere Strings. Die Serialisierung spiegelt das wider.
Datenschutz: deviceId ist pro Ursprung eindeutig und kann über Sitzungen hinweg bestehen bleiben; beim Übertragen an Server als potenzielles Fingerprinting-Merkmal behandeln. Browser setzen die IDs zurück, wenn Cookies/Websitedaten gelöscht werden.
Kein Wiederherstellen: Aus dem JSON lässt sich kein MediaDeviceInfo-Objekt rekonstruieren; zum erneuten Verwenden die gespeicherte deviceId in Constraints angeben, z. B. { video: { deviceId: { exact: id } } }.
Sicherer Kontext: navigator.mediaDevices ist nur unter HTTPS bzw. localhost verfügbar.

Siehe auch

JSON.stringify() CSSNumericValue.toSum() MediaKeySession.load() HIDDevice.open() LayoutShift.toJSON()