Twilio-video.js: Cannot switch cameras in any Android browsers

[altescape]

• [x] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
• [x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [x] I verified that the Quickstart application works in my environment.
• [x] I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

I am building an app but is on private repo so can't show that but have managed to recreate the problem from an example from your blog.

When running the video-chat application that has camera switching functionality cloned from this repo: https://github.com/philnash/mediadevices-camera-selection
By adding a catch onto the createLocalVideoTrack promise (on https://github.com/philnash/mediadevices-camera-selection/blob/a0411035848386a07a2f1167921d47fdbbf49df0/video-chat/quickstart/src/index.js#L101) it will give the same error that I'm also getting in my application.

Video.createLocalVideoTrack({
      facingMode: 'user',
      deviceId: { exact: device.id }
    }).then(function(localVideoTrack) {
      const tracks = Array.from(localParticipant.videoTracks.values());
      localParticipant.unpublishTracks(tracks);
      detachTracks(tracks);
      localParticipant.publishTrack(localVideoTrack);
      const previewContainer = document.getElementById('local-media');
      attachTracks([localVideoTrack], previewContainer);
    }).catch(function(error) {
       console.error(error)
    });

the detachTracks and attachTracks methods (imported from a helper method):

export const attachTracks = (tracks, container) => {
  tracks.forEach(function (track) {
    container.appendChild(track.attach())
  })
}

export const detachTracks = (tracks) => {
  tracks.forEach((track) => {
    track.stop()
    track.detach().forEach((detachedElement) => {
      detachedElement.remove()
    })
  })
}

Expected behavior:

It should switch the camera on Android Chrome, Samsung Browser, Firefox

Actual behavior:

It throws errors such as in Chrome and Samsung browser and doesn't switch camera:

NotReadableError: 
Could not start video source

and in Firefox:

Starting video failed

I have tried to stop the video as suggested here https://github.com/twilio/twilio-video.js/issues/284
But had no joy and I've also added the facingMode constraint (suggested here https://github.com/twilio/twilio-video.js/issues/218) but not working either.

Software versions:

• [x] Browser(s): Android Chrome, Firefox, Samsung Browser
• [x] Operating System: 6.0.1; SM-G901F Build MMB29M, plus several others up to Android 8
• [x] twilio-video.js: 1.15.1
• [x] Third-party libraries (e.g., Angular, React, etc.): Vue, Vue Router, Vuex

[webzvornikgit]

We are having similar issue, in both Android and iOS devices, but without errors ( or we were unable to track them deeply enough as you did ), just getting black video when switching between cameras, after which old/default one doesn't work either, even after Twilio connection is restarted.

[manjeshbhargav]

Hi @altescape ,

Thank you for writing in with your question. Since I can't see your exact source, it would be a bit difficult for me to pinpoint the reason you are seeing this issue.

You said you tried stopping the existing video track but it did not seem to help. Did you stop the track before calling createLocalVideoTrack()? I ask because, in the snippet you have pasted, you call track.stop() in detachTracks(), which is called after createLocalVideoTrack(). Try stopping the video track before calling createLocalVideoTrack() and let me know if that works for you.

Alternatively, I looked at the android related bugs in the Chromium bug tracker, and this bug might be of relevance to your situation.

Thanks,

Manjesh Malavalli
JSDK Team

[altescape]

@manjeshbhargav That has worked - thank you for your assistance