Remote Video Is not showing, Participant array is empty

[anwersolangi]

Steps to reproduce

1. `import React, {useEffect, useRef, useState} from 'react'; import {StyleSheet, View, Dimensions, Text} from 'react-native';

import { TwilioVideo, TwilioVideoLocalView, TwilioVideoParticipantView, } from 'react-native-twilio-video-webrtc';

const VideoCall = props => { const {window} = Dimensions;

const room = 'my_room'; const access_token = 'generated_access_token';

const twilioVideo = useRef(); const [videoTracks, setVideoTracks] = useState([]);

const connectHandler = async () => { await twilioVideo.current.connect({ roomName: room, accessToken: access_token, }); };

return ( <View style={styles.container}> <View style={StyleSheet.absoluteFill}> {videoTracks.map(({track, participant}) => ( <View key={track.trackSid} style={{flex: 1, width: window.width}}> <TwilioVideoParticipantView enabled={true} style={{ minWidth: window.width, minHeight: 30, flex: 1, backgroundColor: '#333', }} key={track.trackSid} trackIdentifier={{ participantSid: participant.sid, videoTrackSid: track.trackSid, }} /> </View> ))}

    <TwilioVideoLocalView enabled={true} style={styles.myVideo} />
  </View>

  <TwilioVideo
    ref={twilioVideo}
    onRoomDidConnect={events => {
      console.log(events);
    }}
    onRoomParticipantDidConnect={e => {
      console.log(e);
    }}
    onParticipantAddedVideoTrack={({participant, track}) => {
      console.log(participant);
      console.log('called');
      setVideoTracks(prevTracks => [...prevTracks, {participant, track}]);
    }}
    onParticipantRemovedVideoTrack={({participant, track}) => {
      setVideoTracks(prevTracks =>
        [...prevTracks].filter(t => t.track.trackSid !== track.trackSid),
      );
    }}
    set
  />
  <Text
    style={{
      width: 50,
      height: 30,
      borderRadius: 12,
      backgroundColor: '#000',
      color: '#fff',
    }}
    onPress={connectHandler}>
    Connect
  </Text>
</View>

); };

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', }, myVideo: { position: 'absolute', bottom: 120, right: 20, width: 120, height: (120 * 16) / 9, backgroundColor: '#e0e0e0', borderRadius: 12, overflow: 'hidden', }, });

export default VideoCall; ` 2. Run that codes, create a testing P2P room. 3. Run the component in two devices

Expected behaviour

Expected to get the remote stream

Actual behaviour

only the local stream is showing

Environment

• React Native version: 0.62
• React Native platform + platform version: Android Emulator API 29 and Motorola Macro One

Please help me out, as i can't find proper documentation. also please help me to which sdk should i run from the twilio docs to understand and code in this library. Thanks any help would be appreciated.

[slycoder]

Do you get a successful onRoomDidConnect? Does the order in which participants connect seem to affect the outcome?

[anwersolangi]

Do you get a successful onRoomDidConnect? Does the order in which participants connect seem to affect the outcome?

when on room connect i get the roomSid and name, but after getting the remote participant the onRoomDidDisconnect called immediately with an error undefined.

[slycoder]

Weird, could you add a log here: https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/android/src/main/java/com/twiliorn/library/CustomTwilioVideoView.java#L746 to see what exception is being thrown? It might also be in the logcat logs if you can dig them up.

[emaitee]

Is there a solution to this? I'm also experiencing this issue right now

[anwersolangi]

Is there a solution to this? I'm also experiencing this issue right now

No i could not find any solution, can you please share your logs here so @slycoder maybe can find out the issue. Thanks

[emaitee]

I just tried to run the example code and I observed the issue, I ran it the way it was in the example code, however the audioTrack works

[neildevas]

I'm experiencing similar issues with Android. The order in which participants connect affects outcome. If local participant connects first, and then remote participants connect, everything is fine.

If remote participants connect first, then local participant connects, the onRoomDidConnect event handler fires twice. The first time, it shows participants = []. The second time, it shows 2 of each of the remote participants. The onRoomParticipantDidConnect handler also gets fired multiple times for the same remote participant.

[slycoder]

Hi @neildevas, thanks for those details, that really helps.

Would you be comfortable setting a breakpoint at line 392 of CustomTwilioVideoView.java? Because events are firing twice, it seems like there could be multiple connections persisting into the room.

[JoeMartin2001]

Any update on this?