Signatur
Beschreibung
Die schreibgeschützte Eigenschaft groupId gehört zum Wörterbuch MediaTrackSupportedConstraints. Dieses Objekt bekommt man von navigator.mediaDevices.getSupportedConstraints(). Unterstützt der Browser die Einschränkung groupId, enthält das Objekt die Eigenschaft mit dem Wert true. Fehlt die Unterstützung, fehlt auch die Eigenschaft. Den Wert false liefert die API an dieser Stelle normalerweise nicht.
Die Einschränkung groupId steht für eine Gerätegruppe. Geräte mit derselben groupId gehören zum selben physischen Gerät, zum Beispiel Mikrofon und Kamera einer Webcam oder Mikrofon und Lautsprecher eines Headsets. Mit groupId in den Einschränkungen von getUserMedia() kann man also passende Geräte zusammen auswählen.
Prüfen Sie diese Eigenschaft, bevor Sie groupId in einem Einschränkungsobjekt verwenden. Ohne Unterstützung ignoriert der Browser die Einschränkung einfach, und das Ergebnis ist ein anderes Gerät als gewünscht.
Rückgabewert
true, wenn der Browser die Einschränkung groupId unterstützt. Ohne Unterstützung fehlt die Eigenschaft, das Auslesen ergibt dann undefined.Beispiele
Unterstützung prüfen
const supported = navigator.mediaDevices.getSupportedConstraints();
if (supported.groupId) {
console.log('groupId wird unterstützt');
} else {
console.log('groupId wird nicht unterstützt');
}Mikrofon passend zur gewählten Kamera anfordern
const startMatchingStream = async () => {
const supported = navigator.mediaDevices.getSupportedConstraints();
// Zuerst die Kamera öffnen
const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
const [videoTrack] = videoStream.getVideoTracks();
const { groupId } = videoTrack.getSettings();
if (!supported.groupId || !groupId) {
console.warn('groupId nicht verfügbar – normales Mikrofon wird verwendet');
return navigator.mediaDevices.getUserMedia({ audio: true, video: true });
}
// Mikrofon aus derselben Gerätegruppe (z. B. dieselbe Webcam)
const audioStream = await navigator.mediaDevices.getUserMedia({
audio: { groupId: { exact: groupId } }
});
return new MediaStream([videoTrack, ...audioStream.getAudioTracks()]);
};
startMatchingStream()
.then((stream) => console.log('Spuren:', stream.getTracks().map((t) => t.kind)))
.catch((err) => console.error(err.name, err.message));Geräte nach Gruppe ordnen
const listGroups = async () => {
if (!navigator.mediaDevices.getSupportedConstraints().groupId) return;
const devices = await navigator.mediaDevices.enumerateDevices();
const groups = Object.groupBy(devices, (d) => d.groupId || 'unbekannt');
for (const [id, list] of Object.entries(groups)) {
console.log(id.slice(0, 8), list.map((d) => `${d.kind}: ${d.label || '(ohne Label)'}`));
}
};
listGroups();// Wichtig · Fallstricke
- Fehlen statt
false: Nicht unterstützte Einschränkungen tauchen im Objekt gar nicht auf. Prüfen Sie deshalb auf Wahrheitswert, alsoif (supported.groupId), und nicht mit=== false. - Nur Unterstützung, kein Gerätewert: Die Eigenschaft enthält nie die eigentliche Gruppen-ID. Die bekommen Sie über
MediaDeviceInfo.groupIdoderMediaStreamTrack.getSettings().groupId. - Datenschutz: Gruppen-IDs gelten nur für den jeweiligen Ursprung (Origin) und können sich ändern, zum Beispiel nach dem Löschen von Cookies. Bevor der Nutzer
getUserMedia()erlaubt hat, liefertenumerateDevices()oft leere IDs und Labels. - Sicherer Kontext:
navigator.mediaDevicesgibt es nur über HTTPS oderlocalhost. - Browserunterschiede: Welche Geräte zu einer Gruppe gehören, legt der Browser bzw. das Betriebssystem fest. Das kann sich je nach Plattform unterscheiden. Verwenden Sie
exact, wenn die Gruppe unbedingt passen muss. Dann kann aber einOverconstrainedErrorauftreten.