Twilio-video.js: Switching Camera is not working with version 2.3.0

[Awais-cb]

I am using twilio-video.js version 2.3.0 i am using below code to swtich the camera on mobile Chrome :

function updateVideoDevice(deviceId) {
  const localParticipant = activeRoom.localParticipant;
  if(deviceId){
    Twilio.Video.createLocalVideoTrack({
      deviceId: deviceId
    }).then(function(localVideoTrack) {
      const tracks = Array.from(localParticipant.videoTracks.values()).map(publication => publication.track);
      localParticipant.unpublishTracks(tracks);
      detachTracks(tracks);

      localParticipant.publishTrack(localVideoTrack);
      attachTracks([localVideoTrack], document.getElementById('local-media'));
    });
  }
}

In console i can see camera info is changed camera has switched from front to back but i get a black screen on back camera view on local-media and and on participant's side i see nothing also i am getting no error in console though which is really confusing

any help regarding this issue would be really helpful Thanks.

Here is the screenshot for current video object

[makarandp0]

Hey @Awais-cb, Thank you for writing about this issue.

From the console log, it looks like the video track is in ended state which explains why you do not see it rendered.

Can you try stopping current track before switching over to new tab as this example does:
https://github.com/twilio/video-quickstart-js/blob/master/examples/mediadevices/src/helpers.js#L28

Thanks,
Makarand

[makarandp0]

also checkout this guide which has a section on switching cameras
https://www.twilio.com/docs/video/build-js-video-application-recommendations-and-best-practices

[manjeshbhargav]

Hi @Awais-cb ,

Did you get a chance to try out @makarandp0 's suggestions? Did it help with your issue?

Thanks,

Manjesh Malavalli
JSDk Team

[Awais-cb]

yes @manjeshbhargav and thanks @makarandp0 it helped me a lot currently i am using this piece of code for switching camera and it works pretty fine on the android devices with chrome but now i am facing another issue camera stream does not work if a user is using iPhone safari i have 13+ version for safari and IOS version 13+ but still i cannot see the participant's stream(who is using iphone) although participant himself sees his view

[manjeshbhargav]

Hi @Awais-cb ,

Are you sure you're stopping the old LocalVideoTrack by calling stop() before creating the new LocalVideoTrack? If you're not doing that, it might explain why the remote party is not seeing the iOS Safari client's video.

Thanks,

Manjesh Malavalli
JSDK Team

[Awais-cb]

yes @manjeshbhargav Thanks for responding apologies i forgot to add the code spinet here is the code responsible for camera switching and i am stopping previous track before starting new but the issue i am currently having is on safari stream does not work even before switching only audio can be heard from the other side

async function updateVideoDevice(deviceId) {
  const localParticipant = await activeRoom.localParticipant;
  if(deviceId){
    // Detaching existing tracks
    var tracks = Array.from(localParticipant.videoTracks.values()).map(publication => publication.track);
    tracks.forEach(function(track) {
      track.mediaStreamTrack.stop();
    });
    localParticipant.unpublishTracks(tracks);
    detachTracks(tracks);

    await Twilio.Video.createLocalVideoTrack({
      deviceId: deviceId,
    }).then(function(localVideoTrack) {
      // Attaching new tracks
      console.log(localVideoTrack.mediaStreamTrack.readyState)
      if(localVideoTrack.mediaStreamTrack.readyState == 'live'){
        localParticipant.publishTrack(localVideoTrack);
        attachTracks([localVideoTrack], document.getElementById('local-media'));
      }
      $('#switchCamera').prop('disabled', false);
    });
  }
}

[manjeshbhargav]

Hi @Awais-cb ,

Can you share a screenshot of your app when this happens? Also, is it possible to share the console logs?

Thanks,

Manjesh Malavalli
JSDK Team