'Can not change camera in mobile Chrome or Safari during WebRTC call

I use navigator.mediaDevices.enumerateDevices to retrieve list of all video devices (element.kind === 'videoinput') and then call navigator.mediaDevices.getUserMedia(constraints) call to rotate video devices (using deviceId as constraint). Everything works fine on Windows Chrome / Firefox, but on android phone (tried Samsung, Asus, Huawei with Android 8/9) this call fails for back camera with NotReadableError / Could not start video source (for Chrome) or AbortError / Starting video failed (for Firefox). Strangely same code works ok in iOS / Safari. Also this only happens when WebRTC call is present in browser. If there is no call I can select any video device. Also if I select back camera first and try to establish the call, it does not work, I get similar error. I know it's far-fetched but maybe someone had same/similar issue? All browser versions are up-to-date.

[UPDATE - code snippet and log]

switchCamera() {
try {
  if (this.localStream) {
    const tracks = this.localStream.getTracks();
    console.log('switchCamera stopping this.localStream tracks', tracks);
    tracks.forEach((track: MediaStreamTrack) => {
      console.log('switchCamera stopping track', track);
      track.stop();
    });
    console.log('switchCamera stop stream');
  }

  const constraints = {
    audio: true,
    video: { facingMode: this.faceCamera ? 'environment' : 'face' }
  };
  this.faceCamera = !this.faceCamera;
  console.log('switchCamera constraints: ', constraints);
  navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
      console.log('getUserMedia:', stream);
      this.logText('got stream');

      this.localVideo.srcObject = stream;

      const videoTracks = stream.getVideoTracks();
      const audioTracks = stream.getAudioTracks();
      console.log('videoTracks', videoTracks);
      if (videoTracks.length > 0) {
        console.log(`Using video device: ${videoTracks[0].label}`);
      }

      const videoTrack = videoTracks[0];
      const audioTrack = audioTracks[0];

      console.log('Replacing track for pc', videoTrack, audioTrack);

      const pc = this.session.sessionDescriptionHandler.peerConnection;

      const videoSender = pc.getSenders().find(s => {
        return s.track && s.track.kind === videoTrack.kind;
      });
      const audioSender = pc.getSenders().find(s => {
        return s.track && s.track.kind === audioTrack.kind;
      });

      if (videoSender) {
        console.log('videoSender.replaceTrack', videoTrack);
        videoSender.replaceTrack(videoTrack);
      }
      if (audioSender) {
        console.log('audioSender.replaceTrack', audioTrack);
        audioSender.replaceTrack(audioTrack);
      }
    })
    .catch(e => {
      console.log('getUserMedia error:', e.name, e.code, e.message);
    });
} catch (e) {
  window.alert(e);
}
}

this is the log from chrome remote device debug:

The error is "NotReadableError", "Could not start video source" which means that the underlying device handle could not be obtained by chrome. Again, safari/ios works ok.

android webrtc

Solution 1:^[1]

For mobile devices, there is a dedicated way of how to select between front & back camera.

VideoFacingMode - https://www.w3.org/TR/mediacapture-streams/#dom-videofacingmodeenum

TL;DR

window.navigator.mediaDevices.enumerateDevices().then(devices => {
    if (devices.filter(device => device.kind === 'videoinput').length > 1) {
        navigator.mediaDevices.getUserMedia({video: {facingMode: 'user' /*'environment'*/}}).then(console.log.bind(this))
    }   
})

It works for mobile Safari, Chrome and FF.

NOTE

Remember, to stop the previous video track before calling the getUserMedia with video again, otherwise, you will get an exception.

Solution 2:^[2]

Ok, so I narrowed it down to calling navigator.mediaDevices.getUserMedia() in ngInit() (this is Angular app). Even if I remove all code in .then() handler function, the effect is the same. Only removing this call solves the issue. Not sure at this time why such behavior, will investigate it more thoroughly and update.

Solution 3:^[3]

To switch between front and back cameras on mobile, you need to stop the previous stream before opening a new stream.

if (videoIn.srcObject) {
  videoIn.srcObject.getTracks().forEach((track) => {
  track.stop();
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mariusz Beltowski
Solution 2	?ukasz Zwierko
Solution 3	Felix Turner

'Can not change camera in mobile Chrome or Safari during WebRTC call

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]