0

I am using the Twilio Video JS SDK (https://www.twilio.com/docs/video) in a React app. I want to allow users to switch video cameras on mobile devices using the following function: 

  switchCamera = (isRear = false) => {
    const { videoToken } = this.props;
    const { videoCameras } = this.state;

    if (videoToken) {
      let videoInput;

      if (isRear) {
        videoInput = videoCameras.filter(camera => camera.label.toLowerCase().includes('back'));
      } else {
        videoInput = videoCameras.filter(camera =>camera.label.toLowerCase().includes('front'));
      }
      createLocalVideoTrack({
        facingMode: isRear ? 'environment' : 'user',
        deviceId: { exact: videoInput[0].deviceId },
      }).then(async localVideoTrack => {
        if (this.state.room) {
          const { localParticipant } = this.state.room;
          const tracks = Array.from(localParticipant.videoTracks.values())
            .map(trackPublication => trackPublication.track);
          localParticipant.unpublishTracks(tracks);
          tracks.forEach(track => track.detach().forEach(element => element.remove()));
          await localParticipant.publishTrack(localVideoTrack);
          localVideoTrack.attach();
        }
      });
    }
  };

However, when the localParticipant switches cameras, his own video feed disappears, but all other participants can see the switched camera feed.

How do I keep the localParticipant's video feed from disappearing?

Neil Devas
  • 21
  • 8
  • I think you need to pass the video element to attach function. Are you following this https://www.twilio.com/blog/2018/06/switching-cameras-twilio-video-chat.html? – Niyas Nazar Mar 24 '20 at 07:10
  • @NiyasNazar the issue was actually that the localParticipant wasn't correctly subscribed to the event – Neil Devas Mar 25 '20 at 13:56

0 Answers0