Stop/close webcam stream which is opened by navigator.mediaDevices.getUserMedia

javascript

media-streaming

webcam-stream

navigator-media-devices

byAlex Kataev·Oct 29, 2024

Terminate a webcam stream by calling stop() on each track:

stream.getTracks().forEach(track => track.stop());

This releases the webcam, successfully ending the media stream.

Learning to navigate through a media stream and handling it tactfully is a significant point when working with webcams in browser settings. The method navigator.mediaDevices.getUserMedia provides you with a MediaStream. This MediaStream contains MediaStreamTracks, which encompass both video and audio tracks. It's essential that these tracks are stopped properly to ensure that the user's privacy is protected, and the browser stops accessing the camera or microphone.

Detailed track management

Inside a MediaStream object, you will find multiple MediaStreamTracks. These can be a mix of video and audio tracks. Here's how you can control and manage these tracks individually:

Selective stopping:

// When the party is too loud and you need to stop the music
stream.getAudioTracks().forEach(track => track.stop());

// When you're in a meeting but you're still wearing pyjamas
stream.getVideoTracks().forEach(track => track.stop());

Fun with track properties:

track.readyState: If this reports 'live', it's showtime!
track.kind: Tells you if it's a 'video' or an 'audio' track.

Running a check on properties of each track is a smart move before calling stop(), particularly when you are aiming for fine control over the streaming elements.

Coping with errors and handling browser compatibility

Error management is a significant pillar when setting up media streaming. Using .catch() allows you to handle these errors gracefully:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    // The camera likes you today
  })
  .catch(error => {
    // Oops! Camera shy, are we?
    console.error('Access denial or unsupported browser', error);
  });

Browser compatibility can be a tricky issue. Older browsers might not get along with getTracks(). Ensure to add fallbacks or invest in feature detection for those stubborn browsers:

if('getTracks' in stream) {
  stream.getTracks().forEach(track => track.stop());
} else {
  // Plan B for the old timers. They've earned it!
  if(stream.stop) {
    stream.stop();
  }
}

stream.stop() is an obsolete method. And like all things ancient, it's retired and is no longer recommended. Please refer to the MediaStreamTrack.stop() method documentation to stay informed on current best practices.

Safely removing video from an HTML element

In certain instances, you may need to detach the stream from an HTML element, perhaps a video tag. Here's how you do that and give your srcObject a well-earned rest:

const videoElement = document.querySelector('video');
videoElement.srcObject = null;

Detaching the stream ensures all resources are liberated, and the webcam light is extinguished, thus assuring users about their privacy.

Managing Stream Lifetimes

Keep in mind that a MediaStream's lifespan is interwoven with the status of the tracks within it. Once all the tracks have stopped, the stream has met its end. Restarting the same stream is not an option; you need to invoke getUserMedia again to start a new stream:

// After all the tracks have had enough
stream = null; // Clearing reference to retire the MediaStream object

Being proactive in releasing streams is a sign of good resource management. It's particularly useful in applications where media capture is stopped and started frequently.