Search code examples
circuit-sdk

Switch front/back camera on Android while on WebRTC call using Circuit SDK


I am able to make a direct call between a Circuit WebClient and the example SDK app at https://output.jsbin.com/posoko.

When running the SDK example on a PC with a second camera (USB), the switching between the built-in camera and the USB camera works fine. But trying the same on my Android device (Samsung Galaxy S6) the switching does not work.

My code uses navigator.mediaDevices.enumerateDevices() to get the cameras and then uses the Circuit SDK function setMediaDevices to switch to the other camera.

async function switchCam() {
  let availDevices = await navigator.mediaDevices.enumerateDevices();
  availDevices = availDevices.filter(si => si.kind === 'videoinput');
  let newDevice = availDevices[1]; // secondary camera
  await client.setMediaDevices({video: newDevice.deviceId})
}

Can somebody explain why this doesn’t work on an Android device?


Solution

  • We have seen Android devices that don't allow calling navigator.getUserMedia while a video track (and therefore a stream) is still active. I tried your example above with a Pixel 2 without any issues though.

    If you remove the video track from the stream and stop the track before calling client.setMediaDevices, the switch should work.

    async function switchCam() {
      const stream = await client.getLocalAudioVideoStream();
      const currTrack = stream.getVideoTracks()[0];
      console.log(`Remove and stop current track: ${currTrack.label}`);
    
      stream.removeTrack(currTrack);
      currTrack.stop();
    
      let availDevices = await navigator.mediaDevices.enumerateDevices();
      availDevices = availDevices.filter(si => si.kind === 'videoinput');
      let newDevice = availDevices[1]; // secondary camera
      await client.setMediaDevices({video: newDevice.deviceId}) 
    }
    

    There is a complete switch camera example on JSBin at https://output.jsbin.com/wuniwec/