Stop Close webcam stream which is opened by navigator mediaDevices getUserMedia

Question

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

User · Answer

Start and Stop Web Camera  Update 2020  React es6    Start Web Camera  stopWebCamera      gt            Start Web Came       if  navigator mediaDevices  amp  amp  navigator mediaDevices getUserMedia              use WebCam         navigator mediaDevices getUserMedia   video  true    then stream   gt              this localStream   stream            this video srcObject   stream            this video play                             Stop Web Camera or Video playback in general  stopVideo      gt            this video pause            this video src               this video srcObject   null               As per new API stop all streams         if  this localStream            this localStream getTracks   forEach track   gt  track stop         Stop Web Camera function works even with video streams     this video src   this state videoToTest    this video play

User · Answer

Since you need the tracks to close the streaming  and you need the stream boject to get to the tracks  the code I have used with the help of the Muaz Khan s answer above is as follows   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 the active video tracks  If you have multiple  you should select accordingly

User · Answer

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

User · Answer

Using  stop   on the stream works on chrome when connected via http  It does not work when using ssl  https

User · Answer

Suppose we have streaming in video tag and id is video  -  lt video id  video  gt  lt  video gt  then we should have 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 null to srcObject of video videoEl srcObject   null

User · Answer

Please check this  https   jsfiddle net wazb1jks 3    x000D   x000D  navigator getUserMedia mediaConstraints  function stream    x000D      window streamReference   stream  x000D     onMediaError   x000D   x000D   x000D    Stop Recording   x000D   x000D  function stopStream     x000D      if   window streamReference  return  x000D   x000D      window streamReference getAudioTracks   forEach function track    x000D          track stop    x000D          x000D   x000D      window streamReference getVideoTracks   forEach function track    x000D          track stop    x000D          x000D   x000D      window streamReference   null  x000D    x000D   x000D   x000D

User · Answer

If the  stop   is deprecated then I don t think we should re-add it like  MuazKhan dose  It s a reason as to why things get deprecated and should not be used anymore  Just create a helper function instead    Here is a more es6 version   function stopStream  stream        for  let track of stream getTracks               track stop

User · Answer

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     x000D   x000D  stream getTracks   forEach function track    x000D    track stop    x000D      x000D   x000D   x000D    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

User · Answer

Try method below   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

User · Answer

Use any of these functions     stop both mic and camera function stopBothVideoAndAudio stream        stream getTracks   forEach function track            if  track readyState     live                 track stop                            stop only camera function stopVideoOnly stream        stream getTracks   forEach function track            if  track readyState     live   amp  amp  track kind      video                 track stop                            stop only mic function stopAudioOnly stream        stream getTracks   forEach function track            if  track readyState     live   amp  amp  track kind      audio                 track stop

User · Answer

Don t use stream stop    it s deprecated  MediaStream Deprecations  Use stream getTracks   forEach track   gt  track stop

User · Answer

FF  Chrome and Opera has started exposing getUserMedia via navigator mediaDevices as standard now  Might change     online demo   navigator mediaDevices getUserMedia  audio true video true        then stream   gt            window localStream   stream              catch   err    gt           console log err              later you can do below    stop both video and audio localStream getTracks   forEach   track    gt    track stop           stop only audio localStream getAudioTracks   0  stop       stop only video localStream getVideoTracks   0  stop

User · Answer

You need to stop all tracks  from webcam  microphone    localStream getTracks   forEach track   gt  track stop

User · Answer

You can end the stream directly using the stream object returned in the success handler to getUserMedia  e g    localMediaStream stop     video src    or null would just remove the source from video tag  It wont release the hardware

User · Answer

Starting Webcam Video 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 Webcam Video 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       With this the Webcam light go down everytime

User · Answer

Have a reference of stream form successHandle   var streamRef   var handleVideo   function  stream        streamRef   stream       this will stop video and audio both track streamRef getTracks   map function  val        val stop

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

Start and Stop Web Camera,(Update 2020 React es6 )

Examples related to javascript

Examples related to html

Examples related to html5-video

Examples related to webrtc

Examples related to getusermedia