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

Question

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.

Does this answer your question? [Stop/Close webcam which is opened by navigator.getUserMedia](https://stackoverflow.com/questions/11642926/stop-close-webcam-which-is-opened-by-navigator-getusermedia) — Karthik, Jun 26 '20 at 10:33
Thanks for your response. I have taken the reference from that as well. Does not help. I got a new point that is the camera not stopping when after establishing the a webRTC call with other peer. Seems some stram clone is still lying in that page. Is there any option to destroy all the streams. — Pradipta Dey, Jun 26 '20 at 11:24
What does `createPeerConnection()` looks like? Do you clone the media stream there? — Kaiido, Jun 30 '20 at 01:19
inside createPeerConnection() I only create the peerconnection and initialize pc as well as add the stream using `pc.addStream(localStream)` — Pradipta Dey, Jun 30 '20 at 07:36
@PradiptaDey can you show how you do that? Trying to repro but can't here. — Kaiido, Jun 30 '20 at 13:00

shikha Gupta · Answer 1 · 2020-06-26T12:41:10.693

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

Thanks for response, but it wont help I suppose as I already have a function inside which I am accessing the camera after stopping I need to invoke that function in order to access the camera again. The problem is the camera light stays on even after stopping and I am not invoking the function again as well. — Pradipta Dey, Jun 26 '20 at 12:08

score 0 · Answer 2 · answered Jun 26 '20 at 15:43

0

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().

answered Jun 26 '20 at 15:43

O. Jones

103,626
17
118
172

Thanks for your response. I think you got my point. Absolutely sorry about the configuration video should be true there. I have edited the question now. I have used on the success call back of getting userMedia is like below `peerConnection.addStream(localStream)` So while disconnecting I am also doing `peerConnection.close()` and stopping all the tracks. Still sometimes camera light stays on and browser says it is still accessing my camera – Pradipta Dey Jun 26 '20 at 17:09

score 0 · Answer 3 · answered Nov 19 '20 at 11:04

0

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();
});

answered Nov 19 '20 at 11:04

gaelle

1
1

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

3 Answers3