How Do I Release The Camera And Microphone After A Webrtc Call?

After I end a WebRTC call, nothing I seem to do removes the red icon on the browser tab that says the camera or microphone are in use. I iterate the tracks from videoElement.srcObj

Solution 1:

In my case, the problem was caused by a bug in my code due to my misunderstanding WebRTC and getUserMedia(). I was actually calling getUserMedia() twice, once for the local <video> element and a second time for adding to the RTCPeerConnection.

The fix was of course to only call getuserMedia() once and use the returned stream in both places.

Solution 2:

(BroadcastChannel could not be used with stack overflow snippet, so provide sample code with Code Pen) (I confirmed the operation on Chrome and Firefox) Open the link in multiple tabs, check the WebRTC connection by clicking the Cnnect button on either side, and switch to the Close button, so clicking the Close button releases the Cam

https://codepen.io/gtk2k/pen/NWxzgKo?editors=1111

// open 2 tabs this pageconst signalingChannel = newBroadcastChannel('signalingChannel');

let pc = null;
signalingChannel.onmessage = async evt => {
  const msg = JSON.parse(evt.data);
  if(msg.close) {
    releaseStream();
    return;
  }
  if(!pc)
    awaitsetupPC();
  if(msg.sdp) {
    console.log(`Receive ${msg.type}`);
    await pc.setRemoteDescription(msg);
    if(msg.type === 'offer') {
      const answer = await pc.createAnswer();
      await pc.setLocalDescription(answer);
      sendSignaling(answer);
    }
  } elseif(msg.candidate) {
    console.log(`Receive candidate`);
    await pc.addIceCandidate(msg);
  }
}

asyncfunctionsetupPC(isCaller) {
  pc = newRTCPeerConnection();
  pc.onconnectionstatechange = evt => {
    console.log(pc.connectionState);
    if(pc.connectionState === 'disconnected')
    {  
      releaseStream();
    }
  }
  pc.onicecandidate = evt => {
    if(evt.candidate)
      sendSignaling(evt.candidate);
  }
  pc.ontrack = evt => {
    vidRemote.srcObject = evt.streams[0];
  }
  const stream = await navigator.mediaDevices.getUserMedia({video:true});
  stream.getTracks().forEach(track => pc.addTrack(track, stream));
  vidLocal.srcObject = stream;
  if(isCaller) {
    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
    sendSignaling(offer);
  }
}

(async _ => {
  const stream = await navigator.mediaDevices.getUserMedia({video:true});  
  vidLocal.srcObject = stream;
});

btnConnect.onclick = evt => {
  if(btnConnect.textContent === 'Connect') {
    btnConnect.textContent = 'Close';
    setupPC(true);
  } else {
    btnConnect.textContent = 'Connect';
    pc.close();
    pc = null;
    releaseStream();
    sendSignaling({close: true});
  }
}

functionsendSignaling(data) {
  signalingChannel.postMessage(JSON.stringify(data));
}

functionreleaseStream() {
  [vidLocal, vidRemote].forEach(vid => {
    if(!vid.srcObject) return;
    let stream = vid.srcObject;
    vid.pause();
    vid.srcObject = null;
    stream.getTracks().forEach(track => track.stop());
    stream = null;
  });
}

video {
  width: 360px;
  height: 240px;
}

<buttonid="btnConnect">Connect</button><div><videoid="vidLocal"mutedautoplay></video><videoid="vidRemote"mutedautoplay></video></div>