Not always success load video, only loading

[rusliabdulgani]

Hi All,

Newbie here, i already implement react native jitsi meet, but somehow, the conference not always success especially when try to 2,3 next attempt. at first load, its working properly, but when i end call and go back navigation, and start call again, it will be loading always and only show bottom button bar, in opponent (i use web base) its show the video and audio, pls help.

import {StyleSheet, Text, View, Activi} from 'react-native';
import {Spinner} from 'native-base';
import JitsiMeet, {JitsiMeetView} from 'react-native-jitsi-meet';
import {WebView} from 'react-native-webview';

const VideoCall = ({route, navigation}) => {
  const {username, jwtToken, roomname} = route.params;
  const [joined, setJoined] = useState(false);
  console.log('route.....', route.params);

  const onConferenceTerminated = (nativeEvent) => {
    /* Conference terminated event */
    console.log('conference terminated...', nativeEvent);
    JitsiMeet.endCall();
    setTimeout(() => {
      navigation.goBack();
    }, 1000);
  };

  const onConferenceJoined = (nativeEvent) => {
    /* Conference joined event */
    console.log('conference joined...', nativeEvent);
  };

  const onConferenceWillJoin = (nativeEvent) => {
    /* Conference will join event */
    console.log('conference will join event', nativeEvent);
  };

  useEffect(() => {
    tryConnectJitsi();
  }, []);

  const tryConnectJitsi = useCallback(async () => {
    try {
      const url = `https://<my onpremise jitsi server domain>/${roomname}?jwt=${jwtToken}`; // can also be only room name and will connect to jitsi meet servers
      console.log('url...', url);
      const userInfo = {displayName: username};
      JitsiMeet.call(url, userInfo);
    } catch (e) {
      console.log('error...', e);
    }
  }, []);

  return (
    <View style={styles.container}>
      <JitsiMeetView
        onConferenceTerminated={onConferenceTerminated}
        onConferenceJoined={onConferenceJoined}
        onConferenceWillJoin={onConferenceWillJoin}
        style={styles.jitsiViewStyle}
      />
      {/* <WebView
        source={{
          uri: `https://meet.fhnid.com/${roomname}?jwt=${jwtToken}`,
        }}
        onMessage={onMessage}
      /> */}
    </View>
  );
};```

[saheemhussain]

Same issue. Did you find any solution? I want to add to it:

• The "onConferenceJoined" function doesn't get called the second time we join the meeting. It works alternatively.

[dgreasi]

Same here. Any updates on a solution?

In my case all events are triggering correctly (onConferenceWillJoin, onConferenceJoined, onConferenceTerminated).

If it is the first time i will make the call everything works correctly, but after that the loader remains in the screen, over the actual videocall.

If i kill the app and try again everything works correctly only the first time as previously.

[dgreasi]

Found a not so nice workaround for now from another issue.

You will need the following logic.

const [showJitsi,setShowJitsi] = useState(true)

useEffect(()=>{
 ... call jitsi
},[])

const onConferenceWillJoin = () =>{}
const onConferenceTerminated= () =>{}

const onConferenceJoined = () => {
    if (Platform.OS === 'android') {
          setShowJitsi(false);
          setTimeout(() => {
            setShowJitsi(true);
          }, 10);
        }
};

return (
        {showJitsi && <JitsiMeetView
        onConferenceWillJoin={onConferenceWillJoin}
        onConferenceTerminated={onConferenceTerminated}
        onConferenceJoined={onConferenceJoined}
        style={{flex: 1, height: '100%', width: '100%', backgroundColor:'black'}} 
         />}
)

Actually you will hide and show the JitsiMeetView for an instance. This will dismiss the persistent loading screen that is over the call.

This works on android only. This is why i added the if statement. If you try this is iOS, you will get a blank screen. Not so consistent someone could say.

Fortunately, in my case the loading screen bug appears only in Android, thus i didn't need to find a different workaround for iOS.

The lib i believe is causing the issue is the react-navigation:

"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/elements": "^1.3.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.0",

[asfopoo]

Was having the same issue on ios, was able to use your method, but I placed the logic inside a useEffect

useEffect(() => {
    setShowJitsi(false);
    setTimeout(() => {
      setShowJitsi(true);
    }, 10);
  }, []);