Browser keeps on accessing the camera with red dot even after stopping the stream aafter establishing the peer connection using webRTC

user_11264424 0
Viewed 1235
let localStream;
let peerConnection;
navigator.mediaDevices.getUserMedia({
   audio: true,
   video: true
}).then(function(stream) {
   createPeerConnection();
   localStream = stream;
   peerConnection.addStream(localStream);
});

so when stopping the stream it stops the video

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

But the browser tab says that it is accessing the camera or microphone with a red dot besides it. I just do not want to reload the page in order to stop that.

Note: this happens when after establishing a peer connection using webRTC and after disconnecting the peers the camera light stays on.

Is there any way to do that. Thanks for your help in advance.

enter image description here

getusermedia webrtc navigator webcam
3 Answers

you can use boolean value or condition in which tab access camera after track.stop() you can set the value to false then the camera will not be acessed anymore. (p.s you can try that if its works)

<!DOCTYPE html>
<html>
    <head>
        <title>Web Client</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
   <div id="callerIDContainer">
          <button onclick="call_user();">Call User</button>
     </div>
      <div class="video-container">
      <video autoplay muted class="local-video" id="local-video"></video>    
    </div>
    <div>
        <button onclick="hangup();">Hangup</button>
    </div>
    
 </body>
    <script >
      var localStream;
      var accessRequired=true
      function call_user()  //your function
      {    
         
     if(accessRequired)
      {
          navigator.mediaDevices.getUserMedia({
           audio: true,
           video: true
          }).then(function(stream) {
           localStream = stream;

           const localVideo = document.getElementById("local-video");
            
           if (localVideo) {
                localVideo.srcObject = localStream;
                } 
          });

      }

      }

      function hangup(){
        localStream.getTracks().forEach(track => track.stop()).then(()=>{accessRequired=false});

      }

    </script>
</html>

try this call user then hangup it is working

user_108753600

The sample code in your question looks like it uses gUM() to create an audio-only stream ({video: false, audio:true}).

It would be strange if using .stop() on all the tracks on your audio-only stream also stopped the video track on some other stream. If you want to turn off your camera's on-the-air light you'll need to stop the video track you used in peerConnection.addTrack(videoTrack). You probably also need to tear down the call using peerConnection.close().

user_2056080

I had same issue with webRTC and React. I have stopped tracks of remote stream but I forgot to stop local stream :

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