Signatur
Beschreibung
Die schreibgeschützte Eigenschaft groupId eines MediaDeviceInfo-Objekts liefert eine Gruppenkennung als String. Zwei Geräte haben dieselbe groupId, wenn sie zum selben physischen Gerät gehören. Ein typisches Beispiel ist ein USB-Headset: Es erscheint als Eingang (audioinput) und als Ausgang (audiooutput), beide mit derselben Gruppenkennung. Auch eine Webcam mit eingebautem Mikrofon kann so eine Gruppe bilden.
Nützlich ist das vor allem in Videokonferenz- und Aufnahme-Anwendungen. Wählt der Nutzer ein Mikrofon aus, kann die Anwendung automatisch den passenden Lautsprecher desselben Headsets vorschlagen oder einstellen, etwa über HTMLMediaElement.setSinkId(). In der Geräteauswahl lassen sich die Einträge außerdem nach physischem Gerät gruppieren.
Ähnlich wie bei deviceId ist der Wert pro Ursprung (Origin) eindeutig, damit sich Nutzer nicht über mehrere Websites hinweg verfolgen lassen. Die Kennung ist innerhalb eines Ursprungs stabil, bis der Nutzer Cookies und Website-Daten löscht. Bei privaten Browserfenstern kann sie pro Sitzung neu erzeugt werden.
Rückgabewert
Beispiele
Alle Geräte mit ihrer groupId auflisten
const listDevices = async () => {
// Berechtigung einholen, damit Kennungen und Bezeichnungen befüllt sind
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const devices = await navigator.mediaDevices.enumerateDevices();
devices.forEach(({ kind, label, groupId }) => {
console.log(`${kind}: ${label} [Gruppe ${groupId.slice(0, 8)}…]`);
});
// Stream wieder freigeben
stream.getTracks().forEach((track) => track.stop());
};
listDevices();Passenden Lautsprecher zum gewählten Mikrofon finden
const findMatchingOutput = async (micDeviceId) => {
const devices = await navigator.mediaDevices.enumerateDevices();
const mic = devices.find(
(d) => d.kind === 'audioinput' && d.deviceId === micDeviceId
);
if (!mic || !mic.groupId) return null;
return devices.find(
(d) => d.kind === 'audiooutput' && d.groupId === mic.groupId
) ?? null;
};
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const micId = stream.getAudioTracks()[0].getSettings().deviceId;
const output = await findMatchingOutput(micId);
const audio = document.querySelector('audio');
if (output && typeof audio.setSinkId === 'function') {
await audio.setSinkId(output.deviceId);
console.log('Ausgabe gesetzt auf:', output.label);
}Geräte für die Auswahlliste nach physischem Gerät gruppieren
const groupDevices = async () => {
const devices = await navigator.mediaDevices.enumerateDevices();
const groups = Map.groupBy
? Map.groupBy(devices, (d) => d.groupId)
: devices.reduce((map, d) => {
map.set(d.groupId, [...(map.get(d.groupId) ?? []), d]);
return map;
}, new Map());
for (const [id, members] of groups) {
console.log(id.slice(0, 8), members.map((m) => m.kind).join(', '));
}
};
groupDevices();// Wichtig · Fallstricke
- Berechtigung nötig: Solange die Seite keinen Zugriff über
getUserMedia()erhalten hat, liefern Browser fürgroupId,deviceIdundlabeloft leere Strings oder nur einen Platzhalter-Eintrag pro Gerätetyp. - Nicht zuverlässig: Wie Geräte gruppiert werden, hängt vom Betriebssystem und vom Treiber ab. Unterschiedliche Geräte können dieselbe
groupIdhaben (z. B. integrierte Laptop-Audiogeräte), und manche Browser gruppieren gar nicht. Die Kennung ist also nur ein Hinweis und keine Garantie. - Datenschutz: Der Wert ist pro Ursprung eindeutig und wird zurückgesetzt, wenn der Nutzer die Website-Daten löscht. Speichere ihn daher nicht als dauerhafte Geräte-ID ab.
- Sicherer Kontext:
navigator.mediaDevicesgibt es nur unter HTTPS oder auflocalhost. - Kompatibilität:
audiooutput-Geräte undsetSinkId()wurden in Safari und Firefox erst spät oder nur teilweise unterstützt. Prüfe die Funktionen vorher per Feature-Detection.