Stop/Close Webcam Stream Which Is Opened by Navigator.Mediadevices.Getusermedia

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

stop the webcam streaming of getUserMedia without page refreshing

You need to stop the LocalMediaStream object by executing its stop() method. I had similar problems. What you need to do is:

Keep a reference to the LocalMediaStream in the onSuccess callback function of the getUserMedia() execution:

var localStream;

onUserMediaSuccess = function(stream) {
   // attach to a video element
   ...
   // keep a reference
   localStream = stream;
};

Stop the LocalMediaStream where needed:

localStream.stop(); 

More info in my own question (and answer).

Stop video with getUserMedia

You need to use getTrack() to be able stop the stream.

var videoDiv = document.getElementById("video"),
    vendorUrl = window.URL || window.webkitURL;
    navigator.getMedia =    navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia ||
                            navigator.oGetUserMedia ||
                            navigator.msGetUserMedia;

var MediaStream;
function captureWebcam(video, audio){
    navigator.getMedia({
        video: video,
        audio: audio
    }, function(stream){
        videoDiv.src = vendorUrl.createObjectURL(stream);
        MediaStream = stream.getTracks()[0]; // create the stream tracker
    }, function(error){
        // An error occured
        // error.code
        console.log(error)
    }); 
}       
$("#stop").on("click", function(){
   // Stop the tracked stream
   MediaStream.stop()
}); 
$("#start").on("click", function(){
    captureWebcam(true, false)
});

Also fiddle it for you to check it out

Stop navigator.GetUserMedia camera access

Try using stream.getTracks() followed by track.stop(). For example:

var video = document.getElementById('video');
 // Get access to the camera
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
    video.srcObject = stream;
    video.play();
    setTimeout(() => {
      stream.getTracks().forEach(track => {
        if (track.readyState == 'live' && track.kind === 'video') {
          track.stop();
        }
      };
    }, 5000);
  });
}

After 5 seconds, we stop the camera.

See: Stop/Close webcam which is opened by navigator.getUserMedia

Turn off webcam/camera after using getUserMedia

The code above works - as shown by @jib here using the above code:

function vidOff() {
    vid.pause();
    vid.src = "";
    localstream.stop();
}

The problem is to do with it being a persistent background page. I'm swapping over to event pages for the Chrome extension as a work around.

Closing WebRTC track will not close camera device or tab camera indicator

useEffect(() => {
    return () => {
        videoStreamTrack?.stop()
        videoElement.current.srcObject.getVideoTracks().forEach((track) => {
            track.stop()
            videoElement.current.srcObject.removeTrack(track)
        })
        videoElement.current.srcObject = null
    }
}, [])

So here you are search and destroying video tracks. Seems right-ish; we'll see

async updateInputOutputMediaDevices(): Promise < MediaDeviceInfo[] > {
    await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    })
    const devices = await navigator.mediaDevices.enumerateDevices()
    await this.updateWebcams(devices)
    await this.updateAudioInputs(devices)
    await this.updateAudioOutputs(devices)
    return devices
}

Above I see there's a call for audio might be where the hiccups are? Can't overly examine but maybe you're opening both and closing just video? Try doing a loop through all tracks not just video and see what's there?

stop WebRTC media stream

Instanciate stream :

    navigator.mediaDevices.getUserMedia({ audio: true, video: false})
    .then(stream => {
        // attach this stream to window object so you can reuse it later
        window.localStream = stream;
        // Your code to use the stream
    })
    .catch((err) =>{
        console.log(err);
    });

Remove stream :

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

Stop/Close webcam using getUserMedia and RTCPeerConnection Chrome 25

Ended up being my fault (yes, shocking). Turns out I wasn't saving localStream correctly in the onUserMediaSuccess callback of getUserMedia... once that was set, Chrome is turning off the blinking recording icon. That didn't explain the other anomalies, but it closes the main point of the question.

---

Related Topics