Twilio-video.js: [Question] Is any way I can toggle the camera (front / rear)

[vincecao]

Hi, I am using twilio-video library with React project. It seems the default sample twilio-video-react repo will make Surface pro x rear camera as main one. Is any way I can toggle camera as connectionOptions or MediaTrackConstraints ? Thank you.

[lazevedo]

@vincecao I did this recently, adapting code from this tutorial:

https://www.twilio.com/blog/2018/06/switching-cameras-twilio-video-chat.html

...
  const checkDevices = (devices) => {
      setCameras(devices.filter((d) => d.kind == 'videoinput'));
    };

  const toggleCamera = () => {
    if(isLocal && cameras && cameras.length > 1) {
      const newCamera = isUsingFrontCamera ? cameras[1] : cameras[0];

      setUsingFrontCamera(!isUsingFrontCamera);

      Video.createLocalVideoTrack({
        deviceId: { exact: newCamera.deviceId }
      }).then((newVideoTrack) => {
        const currentVideoTracks = Array.from(
          participant.videoTracks.values()
        ).map((trackPublication) => (
          trackPublication.track
        ));
        const newVideoTracks = [newVideoTrack].concat(
          videoTracks.filter((v, idx) => (idx == 0))
        );

        participant.unpublishTracks(currentVideoTracks);
        participant.tracks.forEach((trackPublication) => {
          if (trackPublication.track.kind === 'videoinput') {
            trackPublication.track.stop();
          }
        });
        participant.publishTrack(newVideoTrack);

        setVideoTracks(newVideoTracks);
        setReloadDevices(true);
      });
    }
  }

  useEffect(() => {
    if(!cameras) {
      navigator.mediaDevices.enumerateDevices().then(checkDevices);
      setReloadDevices(false);
    }
  }, [reloadDevices]);
...

[makarandp0]

Thanks @lazevedo for your answer!

@vincecao - I am closing this issue now.