Webcam light stay on when during video call but my video is turn off in tokbox

Question

I am using Tokbox API for making video call application. But I have one problem show. During video call i show my laptop's webcam light stay ON but in call my video is turnoff. It seems like Tokbox API accessing my webcam behind the scene. How can I stop my laptop's webcam light when I turn off my video from call ?

Answer 1

I struggled with this problem for several hours before finally solving it.

TL:DR; The webcam access browser api returns a MediaStream clone every time the UserMedia is accessed, and it's important to stop it after each use. In other words, if you access the user's webcam in two places, you'll have to stop each of these two occurrences!

For example, this code snippet I used to retrieve available devices:

const getUserMedia = (mode) =>
  new Promise((resolve) => {
    const options = {
      audioSource: true,
      videoSource: mode === "video",
    };

    window.OT.getUserMedia(options)
      .catch((error) => {
        console.log("[Vonage] Permission error while trying to access user media", error);
        resolve({ error: error.message });
      })
      .then((stream) => {
        resolve({ success: stream });

          // this is very important to avoid getting the camera indicator always on
          // this code is needed to trigger browser permission popup and detect if user has accepted or not
          // once done, we have to immediatly stop the stream otherwise the camera indicator will stay on, like forever...
          try {
            stream.getTracks().forEach((track) => {
              track.stop();
            });
          } catch (e) {}
      });
  });

Did not contained initially the try{}catch{} part that ensures that the stream I retrieved in not used anymore (it was just used during my user onboarding).

And yes, of course, do not forget when your real call is made to destroy the user publisher and stop its tracks before:

const endCall = (videoPublisher) => {
  const videoSource = videoPublisher.getVideoSource();
  const audioSource = videoPublisher.getAudioSource();

  try {
    videoSource.track.stop();
  } catch (error) {
    console.log("[Visio] Unable to stop video source", error)
  }

  try {
    audioSource.stop();
  } catch (error) {
    console.log("[Visio] Unable to stop audio source", error)
  }

  videoPublisher.destroy();
}

I know the question is a bit old, but my misunderstanding of how videoTracks works made me lost countless hours, hope this answer could help better others ;)

Answer 2

Are you disabling video with OT.initPublisher({ publishVideo: false }) or publisher.publishVideo(false)? If so, then this is expected because we need to capture the camera in case you enable video later on in the call.

If you want to always have video disabled to have an audio only call, then please use OT.initPublisher({ videoSource: null }), this will not capture the camera at all.

See documentation for videoSource at https://tokbox.com/developer/sdks/js/reference/OT.html#initPublisher

If you set this property to null or false, the browser does not request access to the camera, and no video is published. In a voice-only call, set this property to null or false for each Publisher.