Stop / close the webcam that opens navigator.getUserMedia

Question

I opened a webcam using the following JavaScript code: navigator.getUserMedia

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

Answer 1

EDIT

Since this answer was originally posted, the API browser has changed. .stop() no longer available in the stream that is 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 information here: https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

Example (at the link above):

 var track = stream.getTracks()[0]; // if only one media track // ... track.stop(); 

Browser support may vary.

Original answer

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

Answer 2

You can call " stop " on the MediaStream object , which will be deprecated; a new proposal is to release media tracks by calling a stop on each media track:

 mediaStream.stop(); // or mediaStream.getTracks()[0].stop(); mediaStream.getTracks()[1].stop(); 

---

Updated Nov 03, 2015 ---- 10:34:24

Here is the cross browser stream.stop hack:

 var MediaStream = window.MediaStream; if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') { MediaStream = webkitMediaStream; } /*global MediaStream:true */ if (typeof MediaStream !== 'undefined' && !('stop' in MediaStream.prototype)) { MediaStream.prototype.stop = function() { this.getTracks().forEach(function(track) { track.stop(); }); }; } 

Answer 3

Do not use stream.stop() , it is deprecated

Disadvantages of MediaStream

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

Answer 4

Running webcams with different browsers

For Opera 12

 window.navigator.getUserMedia(param, function(stream) { video.src =window.URL.createObjectURL(stream); }, videoError ); 

For Firefox Nightly 18.0

 window.navigator.mozGetUserMedia(param, function(stream) { video.mozSrcObject = stream; }, videoError ); 

For chrome 22

 window.navigator.webkitGetUserMedia(param, function(stream) { video.src =window.webkitURL.createObjectURL(stream); }, videoError ); 

Stopping videos in webcams with different browsers

For Opera 12

 video.pause(); video.src=null; 

For Firefox Nightly 18.0

 video.pause(); video.mozSrcObject=null; 

For chrome 22

 video.pause(); video.src=""; 

At the same time, the light in the webcam decreases every time ...

Answer 5

FF, Chrome and Opera started getUserMedia via navigator.mediaDevices as standard now (maybe a change :)

online demo

 navigator.mediaDevices.getUserMedia({audio:true,video:true}) .then(stream => { window.localStream = stream; }) .catch( (err) =>{ console.log(err); }); // later you can do below // stop both video and audio localStream.getTracks().forEach( (track) => { track.stop(); }); // stop only audio localStream.getAudioTracks()[0].stop(); //stop only audio localStream.getVideoTracks()[0].stop(); 

Answer 6

You can terminate the stream directly using the stream object returned by the success handler in getUserMedia. eg

 localMediaStream.stop() 

video.src="" or null will simply remove the source from the video tag. He will not release hardware.

Answer 7

Try using the method

 var mediaStream = null; navigator.getUserMedia( { audio: true, video: true }, function (stream) { mediaStream = stream; mediaStream.stop = function () { this.getAudioTracks().forEach(function (track) { track.stop(); }); this.getVideoTracks().forEach(function (track) { //in case... :) track.stop(); }); }; /* * Rest of your code..... * */ }); /* * somewhere insdie your code you call * */ mediaStream.stop(); 

Answer 8

If .stop() deprecated, then I don’t think we should add it again, like @MuazKhan. This is the reason why things become obsolete and should no longer be used. Instead, create a helper function ... Here's another version of es6

 function stopStream (stream) { for (let track of stream.getTracks()) { track.stop() } } 

Answer 9

Since you need tracks to close streaming, and you need a stream boject to go to tracks, the code I used with Muaz Khan's answer looks like this:

 if (navigator.getUserMedia) { navigator.getUserMedia(constraints, function (stream) { videoEl.src = stream; videoEl.play(); document.getElementById('close').addEventListener('click', function () { stopStream(stream); }); }, errBack); function stopStream(stream) { console.log('stop called'); stream.getVideoTracks().forEach(function (track) { track.stop(); }); 

Of course, this will close all active video tracks. If you have several, you should choose accordingly.

Answer 10

Suppose we have streaming in the video tag, and id is video - <video id="video"></video> then we should have the following code -

 var videoEl = document.getElementById('video'); // now get the steam stream = videoEl.srcObject; // now get all tracks tracks = stream.getTracks(); // now close each track by having forEach loop tracks.forEach(function(track) { // stopping every track track.stop(); }); 

// assign zero to srcObject video videoEl.srcObject = null;

Answer 11

You need to stop all the tracks (from webcam, microphone):

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

Answer 12

Using .stop () in a stream works on chrome when connecting via http. This does not work when using ssl (https).

Answer 13

Please check this: https://jsfiddle.net/wazb1jks/3/

 navigator.getUserMedia(mediaConstraints, function(stream) { window.streamReference = stream; }, onMediaError); 

Stop recording

 function stopStream() { if (!window.streamReference) return; window.streamReference.getAudioTracks().forEach(function(track) { track.stop(); }); window.streamReference.getVideoTracks().forEach(function(track) { track.stop(); }); window.streamReference = null; } 

Answer 14

The following code worked for me:

 public vidOff() { let stream = this.video.nativeElement.srcObject; let tracks = stream.getTracks(); tracks.forEach(function (track) { track.stop(); }); this.video.nativeElement.srcObject = null; this.video.nativeElement.stop(); } 

Answer 15

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

right ... but also right when using https something doesn't work.

Answer 16

blob: https://stackoverflow.com/cb1a629f-20d8-4702-9eb2-b6e57f20cf80

https://i.stack.imgur.com/ucW2h.jpg enter a description of the image here

Answer 17

You have a link to the successHandle stream form

 var streamRef; var handleVideo = function (stream) { streamRef = stream; } //this will stop video and audio both track streamRef.getTracks().map(function (val) { val.stop(); });