I am building a react app and need to access the webcam which get with the following code:
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function(stream) {
video.srcObject = stream;
window.localstream = stream;
video.play();
})
However, when I unmount the current component, my webcam stays on. In my componentWillUnmount block, I have tried the following code.
video.pause();
video.srcObject=null;
window.localstream.getTracks()[0].stop();
window.localstream.getVideoTracks()[0].stop();
My webcam light still stays on however. When I console.log the mediaStreamTrack afterwards, I get:
How do I stop my webcam?
If your webcam indicator light is on or it's acting abnormally (you see a blinking LED) even though you haven't turned the webcam on, it's a sign that something might not be right. But don't freak out just yet – it may only be another program or browser extension running in the background and using your webcam.
The Web SDK does not support enabling/disabling video capture independently. Calling muteVideo for a local stream essentially sets MediaStreamTrack. enabled to false , but black video frames are still being sent, and the video capture is not disabled. Therefore, the camera light remains on.
Use stream. getTracks(). forEach(track => track. stop()); .
Stopping a video stream This works by obtaining the video element's stream from its srcObject property. Then the stream's track list is obtained by calling its getTracks() method. From there, all that remains to do is to iterate over the track list using forEach() and calling each track's stop() method.
If you are using multiple cameras, then you need to make sure that your code is trying to "stop" the same camera as you turn on before.
You need to make sure your code only call getUserMedia once, then getVideoTracks()[0].stop() should work fine.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With