JavaScript MediaStream getVideoTracks() Method

What You’ll Learn

The getVideoTracks() method of MediaStream returns an array of video MediaStreamTrack objects in the stream. Learn the MDN ImageCapture camera-track pattern, empty arrays for audio-only streams, filtering with track.kind, stopping the camera while keeping the mic, and comparison with getTracks()—with five examples and try-it labs.

Introduction

A MediaStream can hold both audio and video tracks. When you call getUserMedia({ video: true }), the browser adds at least one camera track. getVideoTracks() gives you only the video ones—handy for stopping the camera, passing a track to ImageCapture, or inspecting screen-share output without touching audio.

MDN: the return value is an array where each entry is a MediaStreamTrack with kind === "video". If there are no video tracks, you get an empty array []. The order of tracks is not guaranteed and may change between calls.

Understanding MediaStream.getVideoTracks()

An instance method that filters the stream’s track set to video tracks only.

• Parameters — none.
• Return value — array of MediaStreamTrack with kind "video".
• Empty array — when the stream has no video tracks (e.g. microphone only).
• Order — not defined by the spec; may vary between calls (MDN).
• Pair with — getAudioTracks() for microphone tracks.
• Baseline Widely available on MDN (since September 2017).

📝 Syntax

getVideoTracks()

Parameters

None.

Return value

An array of MediaStreamTrack objects for video tracks. Empty if none exist.

Typical pattern (MDN idea)

let imageCapture;

navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  document.querySelector("video").srcObject = mediaStream;

  const track = mediaStream.getVideoTracks()[0];
  imageCapture = new ImageCapture(track);

  return imageCapture.getPhotoCapabilities();
});

⚖️ getVideoTracks() vs Related Ideas

Examples Gallery

Examples follow MDN MediaStream: getVideoTracks(). Camera examples use getUserMedia (secure context + permission); audio-only demos use microphone-only capture.

let imageCapture;

navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  document.querySelector("video").srcObject = mediaStream;

  const track = mediaStream.getVideoTracks()[0];
  imageCapture = new ImageCapture(track);

  return imageCapture.getPhotoCapabilities();
});

track kind: video
ImageCapture ready

navigator.mediaDevices
  .getUserMedia({ audio: false, video: true })
  .then((stream) => {
    const videoTracks = stream.getVideoTracks();
    console.log(videoTracks.length, videoTracks[0].kind);
  });

1 video

navigator.mediaDevices
  .getUserMedia({ audio: true, video: false })
  .then((stream) => {
    const video = stream.getVideoTracks();
    const audio = stream.getAudioTracks();
    console.log(video.length, audio.length);
  });

0 1

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    const direct = stream.getVideoTracks();
    const filtered = stream.getTracks().filter((t) => t.kind === "video");
    console.log(direct.length, filtered.length);
  });

1 1

function stopCamera(stream) {
  stream.getVideoTracks().forEach((track) => {
    track.stop();
  });
}

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    stopCamera(stream);
    console.log(
      stream.getVideoTracks().length,
      stream.getAudioTracks().length
    );
  });

1 1
(camera stopped, mic still live)

🚀 Common Use Cases

• Pass a camera track to ImageCapture for still photos (MDN pattern).
• Stop the camera while keeping the microphone in a video call.
• Build a camera-off toggle with track.enabled = false.
• Count how many video inputs are in a composed stream.
• Verify a stream has video before attaching to a <video> element.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since September 2017) — no Deprecated / Experimental / Non-standard banner.
• Order not defined — do not rely on [0] being the same track every call without checking id or label.
• Secure context — getUserMedia examples need HTTPS or localhost.
• Empty array — normal for audio-only streams.
• ImageCapture — MDN example; check browser support before using in production.
• Related learning: getAudioTracks(), getTracks(), addTrack(), getUserMedia().

💡 Best Practices