Signatur
Beschreibung
Die schreibgeschützte Eigenschaft label der Schnittstelle MediaStreamTrack liefert einen String, den der User-Agent vergibt, um die Quelle des Tracks zu beschreiben. Das ist zum Beispiel "Internal microphone", "FaceTime HD Camera" oder bei Bildschirmfreigaben der Name des geteilten Fensters oder Bildschirms.
Gedacht ist label vor allem für die Anzeige in der Oberfläche, etwa um Nutzern zu zeigen, welches Mikrofon oder welche Kamera gerade aktiv ist. Zum eindeutigen Erkennen eines Geräts sollte man dagegen deviceId aus track.getSettings() verwenden, weil Labels nicht eindeutig sind und sich je nach Browser, Sprache oder Treiber unterscheiden können.
Wenn ein Track keine Quelle hat, etwa weil er künstlich erzeugt wurde, oder wenn der Browser das Label nicht preisgibt, ist der Wert ein leerer String "". Der Wert bleibt während der gesamten Lebensdauer des Tracks gleich, auch nachdem der Track mit stop() beendet wurde.
Rückgabewert
"", wenn keiner bekannt ist.Beispiele
Aktive Kamera und aktives Mikrofon anzeigen
const zeigeGeraete = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
for (const track of stream.getTracks()) {
console.log(`${track.kind}: ${track.label || '(unbekannte Quelle)'}`);
}
};
zeigeGeraete().catch(err => console.error('Zugriff verweigert:', err.name));Label im UI neben der Videovorschau ausgeben
const video = document.querySelector('#vorschau');
const info = document.querySelector('#kamera-name');
const starteVorschau = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const [videoTrack] = stream.getVideoTracks();
video.srcObject = stream;
// textContent statt innerHTML: das Label ist fremder Text
info.textContent = `Kamera: ${videoTrack.label}`;
};
starteVorschau();Bildschirmfreigabe: Name der geteilten Quelle
const teileBildschirm = async () => {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const [track] = stream.getVideoTracks();
console.log('Geteilt wird:', track.label);
console.log('Oberflächentyp:', track.getSettings().displaySurface);
track.addEventListener('ended', () => console.log(`Freigabe "${track.label}" beendet`));
};
document.querySelector('#teilen').addEventListener('click', teileBildschirm);Label mit deviceId abgleichen statt umgekehrt
const findeGeraet = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const [track] = stream.getAudioTracks();
const { deviceId } = track.getSettings();
const geraete = await navigator.mediaDevices.enumerateDevices();
const geraet = geraete.find(d => d.deviceId === deviceId);
console.log(track.label === geraet?.label); // meist true
};
findeGeraet();// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
track.label = "X"wird ohne Fehlermeldung ignoriert (im Strict Mode kommt einTypeError). - Nicht eindeutig: Mehrere Geräte können dasselbe Label haben, und das Label kann sich je nach Systemsprache oder Treiber ändern. Zum Speichern von Nutzerwünschen deshalb
deviceIdverwenden. - Datenschutz: Labels sind ein Merkmal für Fingerprinting. Browser geben Geräte-Labels (auch über
enumerateDevices()) erst frei, wenn die Seite eine Medienberechtigung hat. Bei Tracks, die nicht von Geräten stammen, z. B. auscanvas.captureStream()oder aus WebRTC-Remote-Tracks, ist das Label oft leer oder eine technische ID. - Sicherheit: Das Label ist Text, den man nicht selbst kontrolliert (bei Bildschirmfreigaben z. B. ein Fenstertitel). Deshalb mit
textContentausgeben, nie mitinnerHTML. - Browserunterschiede: Das Format ist nicht festgelegt. Chrome liefert z. B.
"screen:0:0"oder"window:1234:0"bei Bildschirmfreigaben, Firefox und Safari liefern andere Werte. Code sollte sich nicht auf ein bestimmtes Format verlassen. Die API funktioniert nur in sicheren Kontexten (HTTPS).