Change Localvideo primary

[MBlanpe]

Hello. There is some way to make the LocalVideo primary? I do not need to see in remote participant, I need to see my camera while I broadcast. I have increased the dimensions of the thumbnail but the quality is terrible. Thanks

[slycoder]

Is this on Android, iOS, or both?

[MBlanpe]

Thanks. I have tested it on Android, but I need to improve better quality for Android and iOS

[slycoder]

Does it look worse in the local preview than it does for the remote party? Do you have a code snippet showing how you're scaling up the view?

[MBlanpe]

I see poor quality in local what I am broadcasting, the remote sees with good quality what I broadcast. Simply in the local view I have resized it to full screen and the remote participant I have removed it.

[slycoder]

Can you share how you are resizing the view? I don't see anything obvious in the way we're implementing local previews that would cause low quality in the underlying view.

[MBlanpe]

`

<View style={styles.callContainer}>

  {status == "dialing" ?
    (<View style={styles.loading}>
      <TouchableOpacity onPress={() => { Linking.openURL(`tel:${telephone}`); }} style={styles.appButtonContainer}>
        <Text style={styles.appButtonText}>Llamada telefónica</Text>
      </TouchableOpacity>
    </View>) : null}
  {status == "connecting" ?
    (<View style={styles.loading}>
      <Image
        style={styles.stretch}
        source={require('./logo1.png')}
      />
      <ActivityIndicator color='#EE9500' size={100} />
      <Text style={styles.text}>A la espera de ser atendido</Text>
    </View>) : null}
  {status == "error" ?
    (<View style={styles.loading}>
      <View style={styles.imgContainer}>
        <Image
          style={styles.stretch}
          source={require('./logo1.png')}
        />
      </View>
      <TouchableOpacity onPress={() => { disconnectTwilio() }} style={styles.appButtonContainer}>
        <Text style={styles.appButtonText}>Salir de la app</Text>
      </TouchableOpacity>
    </View>
    ) : null}
  {status == "connected" ?
    (<TwilioVideoLocalView enabled={status === 'connected'} style={styles.localVideo} />) : null}
  <TwilioVideo ref={twilioVideo} onRoomDidConnect={(response) => {
    twilioVideo.current.flipCamera()
    let roomSid = response.roomSid;
    axios.post(`${API_URL}/api/v1/conference/add-connection`, {}, {
      headers: {
        expedientNumber: conference.expedientNumber,
        region: region,
        token: conference.jwt,
        identity: props.identity,
        type: "CLIENT",
      }
    })
      .then((response) => {
        axios.post(`${API_URL}/conference/update-sid`, {
          expedientNumber: conference.expedientNumber,
          region: region,
          token: conference.jwt,
          sid: roomSid
        })
          .then((response) => {
            console.log(props)
            props.socket.emit('start_conference', {
              flag: true,
              token: conference.jwt
            });
            setStatus("connected");
          })
          .catch(function (error) {
            console.log(error);
            Alert.alert('Error:', "Fallo al iniciar videollamada");
          });
      })
      .catch(function (error) {
        console.log(error);
        Alert.alert('Error:', "Fallo al iniciar videollamada");
      });
  }} onRoomDidDisconnect={() => {
  }} onRoomDidFailToConnect={(error) => {
  }} onParticipantAddedVideoTrack={({ participant, track }) => {
    if (track.enabled) {
      setProps({
        ...props,
        videoTracks: new Map([
          ...props.videoTracks,
          [
            track.trackSid,
            {
              participantSid: participant.sid,
              videoTrackSid: track.trackSid,
            },
          ],
        ]),
      });
    }
  }} onParticipantRemovedVideoTrack={({ track }) => {
    const videoTracks = props.videoTracks;
    videoTracks.delete(track.trackSid);
    setProps({ ...props, videoTracks });
  }} />
</View>

; ---------------------- Styles localVideo: { flex: 1, }, container: { flex: 1, backgroundColor: 'white', flexDirection: 'row', justifyContent: "center", alignItems: "center", }, callContainer: { backgroundColor: 'white', flex: 1, },

`

[blindgaenger]

Hi there. I also have problems with a blurry fullscreen video on Android, while on iOS the same video is sharp.

I've checked the video constraints and Android has a max dimension of CIF_VIDEO_DIMENSIONS, which is a resolution of 352 x 288 according to the API specs.

https://github.com/blackuy/react-native-twilio-video-webrtc/blob/a902525ae6964dba2b1e5ae2df3271571762b956/android/src/main/java/com/twiliorn/library/CustomTwilioVideoView.java#L224

On iOS the dimensions seem to be hard-coded to {900, 720}. In one of the previous commits it was set to TVIVideoConstraintsSize960x540.

https://github.com/blackuy/react-native-twilio-video-webrtc/blob/f9e75c950e731c666928ec44c070b475385d05b8/ios/RCTTWVideoModule.m#L37

So imo the dimensions on Android are quite small and don't work with larger/fullscreen previews. Could that be the reason?

[slycoder]

Thank you @blindgaenger for that investigation. I think the dimensions are just defaults meant to be appropriate for a common use case. @MBlanpe, if you were to change those constraints, do you think it would solve the issue?