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

javascript html html5-video webrtc getusermedia
Shih-En Chou picture Shih-En Chou · Jul 25, 2012 · Viewed 134.9k times · Source

I opened a webcam by using the following JavaScript code:

const stream = await navigator.mediaDevices.getUserMedia({ /* ... */ });

Is there any JavaScript code to stop or close the webcam? Thanks everyone.

Answer

andrei picture andrei · Sep 15, 2012

EDIT

Since this answer has been originally posted the browser API has changed. .stop() is no longer available on the stream that gets passed to the callback. The developer will have to access the tracks that make up the stream (audio or video) and stop each of them individually.

More info here: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

Example (from the link above):

stream.getTracks().forEach(function(track) {
  track.stop();
});

Browser support may differ.

Original answer

navigator.getUserMedia provides you with a stream in the success callback, you can call .stop() on that stream to stop the recording (at least in Chrome, seems FF doesn't like it)

Related questions

how to make getUserMedia() work on all browsers

I learn about web-rtc, it says that you can capture video-cam , i used demo , well this worked on chrome only.. when i open it on firefox i get message "getUserMedia() not supported in your browser." on another hand when i …

Read More
Is it possible to check if the user has a camera and microphone and if the permissions have been granted with Javascript?

I would like to find out if the user's device has an attached camera and microphone, and if so, has permissions been granted to get the audio and video stream using Javascript. I want to make this check to be …

Read More
Detecting that the peer's browser was closed in a webrtc videochat

I've been implementing a webrtc videochat. Everything is working smoothly except for the case when the peer closes the browser. I've been trying to handle this event by implementing an onended callback on the remote mediastream. Though, this callback does …

Read More