Start · Sprachen · JavaScript · Referenz · MediaStreamTrack.kind

MediaStreamTrack.kind

Eigenschaft

Schreibgeschützte Eigenschaft, die angibt, ob ein <code>MediaStreamTrack</code> ein Audio-Track (<code>"audio"</code>) oder ein Video-Track (<code>"video"</code>) ist.

seit JavaScript Baseline: alle modernen Browser Kategorie: webapi

Signatur

MediaStreamTrack.kind

Beschreibung

Die Eigenschaft kind einer MediaStreamTrack-Instanz liefert einen String, der die Art des Medien-Tracks beschreibt: "audio" für Audio-Tracks (z. B. Mikrofon, Audio aus einem <audio>-Element) und "video" für Video-Tracks (z. B. Kamera, Bildschirmfreigabe, Canvas-Aufnahme).

Der Wert wird beim Erzeugen des Tracks festgelegt und bleibt während der ganzen Lebensdauer gleich, auch nachdem der Track mit stop() beendet wurde. Das macht kind zu einem sicheren Unterscheidungsmerkmal, wenn man Tracks aus einem gemischten MediaStream filtern, unterschiedlich weiterverarbeiten oder in WebRTC gezielt Sender und Empfänger zuordnen will.

Für einfache Fälle gibt es mit MediaStream.getAudioTracks() und MediaStream.getVideoTracks() bequemere Methoden. kind ist dagegen nützlich, wenn man einzelne Tracks in der Hand hat, etwa im track-Ereignis einer RTCPeerConnection, bei addtrack-Ereignissen eines Streams oder beim Durchlaufen von getTracks().

Rückgabewert

Typ
"audio" | "video"
Beschreibung
"audio", wenn es sich um einen Audio-Track handelt, sonst "video" für einen Video-Track.

Beispiele

Tracks eines Kamera-Streams nach Art auflisten

const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });

for (const track of stream.getTracks()) {
  console.log(`${track.kind}: ${track.label}`);
}
audio: Internes Mikrofon video: FaceTime HD Camera

Mikrofon stummschalten, Kamera weiterlaufen lassen

const toggleMute = (stream) => {
  stream.getTracks()
    .filter((track) => track.kind === 'audio')
    .forEach((track) => {
      track.enabled = !track.enabled;
      console.log(`Mikrofon ${track.enabled ? 'aktiv' : 'stumm'}`);
    });
};

const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
toggleMute(stream);
Mikrofon stumm

Eingehende WebRTC-Tracks passenden Elementen zuordnen

const pc = new RTCPeerConnection();
const videoEl = document.querySelector('#remote-video');
const audioEl = document.querySelector('#remote-audio');

pc.addEventListener('track', ({ track, streams }) => {
  if (track.kind === 'video') {
    videoEl.srcObject = streams[0];
  } else if (track.kind === 'audio') {
    audioEl.srcObject = streams[0];
  }
  console.log(`Remote-Track empfangen: ${track.kind}`);
});
Remote-Track empfangen: audio Remote-Track empfangen: video

kind ist schreibgeschützt

const [track] = (await navigator.mediaDevices.getUserMedia({ audio: true })).getTracks();
track.kind = 'video'; // wird still ignoriert (im Strict Mode: TypeError)
console.log(track.kind);
track.stop();
console.log(track.kind); // bleibt auch nach stop() erhalten
audio audio

// Wichtig · Fallstricke

  • Schreibgeschützt: Wenn man kind einen Wert zuweist, wird das im Sloppy Mode einfach ignoriert. Im Strict Mode (auch in ES-Modulen) wirft die Zuweisung einen TypeError.
  • Nur zwei Werte: Die Spezifikation kennt nur "audio" und "video". Untertitel oder Datenkanäle sind keine MediaStreamTracks. Für Daten in WebRTC gibt es RTCDataChannel.
  • Nicht verwechseln mit MediaDeviceInfo.kind, das Werte wie "audioinput", "videoinput" oder "audiooutput" liefert, und mit HTMLTrackElement.kind ("subtitles", "captions" …).
  • Bildschirmfreigabe: Bei getDisplayMedia() ist der Audio-Track optional und je nach Browser oder Betriebssystem oft nicht vorhanden. Deshalb vorher mit kind oder getAudioTracks().length prüfen.
  • Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). getUserMedia funktioniert nur in einem sicheren Kontext (HTTPS oder localhost).