multiple tileId of single attendee after switching off and switching on my camera.

[rnqayush]

hi team, 1-I have created a app for video meeting in which speaker gets to fullscreen if actively speaking else it will appear with small video tiles on bottom of screen. 2-firstly when two users enter in meeting the list of tileId to show is [1,0] and [0,2] respectively on their devices and due to active speaker tileId which is on fullscreen is "0" on device1 and "2" on device2. 3-now if device2 turns off its camera and then turns on again the tileId to show is getting [0,0,1] on device1 while [2,2,0] on device2. 4-and now if device1 turns off its camera and then turns on again the tileId to show is getting [1,1,0] on device1 and [0,0,2] on device2.

i also used chrome debug tools for it and noticed that if device1 is switching of its camera then firstly "MobileSDKEvent.OnRemoveVideoTile" callback is triggered then automatically "MobileSDKEvent.OnAddVideoTile" is getting triggered .

i am sharing my code below kindly suggest some idea to resolve to.

[rnqayush]

NativeFunction.activeSpeaker() NativeFunction.setCameraOn(!this.state.selfVideoEnabled) this.onAttendeesJoinSubscription = getSDKEventEmitter().addListener(MobileSDKEvent.OnAttendeesJoin, ({ attendeeId, externalUserId }) => { if (!(attendeeId in attendeeNameMap)) { // The externalUserId will be a format such as c19587e7#Alice attendeeNameMap[attendeeId] = externalUserId.split("#")[1]; } this.setState((oldState) => ({ ...oldState, attendees: oldState.attendees.concat([attendeeId]) })); });

this.onAttendeesLeaveSubscription = getSDKEventEmitter().addListener(MobileSDKEvent.OnAttendeesLeave, ({ attendeeId }) => {
  this.setState((oldState) => ({
    ...oldState,
    attendees: oldState.attendees.filter((attendeeToCompare => attendeeId != attendeeToCompare))
  }));
});

/**
 * Attendee Mute & Unmute handler
 */
this.onAttendeesMuteSubscription = getSDKEventEmitter().addListener(MobileSDKEvent.OnAttendeesMute, attendeeId => {
  this.setState((oldState) => ({
    ...oldState,
    mutedAttendee: oldState.mutedAttendee.concat([attendeeId])
  }));
});

this.onAttendeesUnmuteSubscription = getSDKEventEmitter().addListener(MobileSDKEvent.OnAttendeesUnmute, attendeeId => {
  this.setState((oldState) => ({
    ...oldState,
    mutedAttendee: oldState.mutedAttendee.filter((attendeeToCompare => attendeeId != attendeeToCompare))
  }));
});

/**
 * Video tile Add & Remove Handler
 */
this.onAddVideoTileSubscription = getSDKEventEmitter().addListener(MobileSDKEvent.OnAddVideoTile, (tileState) => {

  console.log(tileState);

  /** for activeSpeaker */

  // console.log(tileState)

  var slist = {
    attendeeId: tileState.Attendee,
    tileId: tileState.tileId
  }

  this.setState({ speakers: [...this.state.speakers, slist] })
  /*  console.log(this.state.speakers) */

  /** for activeSpeaker */

  if (tileState.isScreenShare) {
    this.setState(oldState => ({
      ...oldState,
      screenShareTile: tileState.tileId
    }));
    // alert(JSON.stringify(this.state.screenShareTile))
  } else {
    this.setState(oldState => ({
      ...oldState,
      videoTiles: [...oldState.videoTiles, tileState.tileId],
      selfVideoEnabled: tileState.isLocal ? true : oldState.selfVideoEnabled
    }));

  }

  // alert(JSON.stringify(this.state.videoTiles))
});

/***     trying acive speaker event emitter */

this.onActiveSpeaker = getSDKEventEmitter().addListener(MobileSDKEvent.OnActiveSpeaker, attendeeId => {

  this.setState({ active: attendeeId })

  this.state.speakers.forEach(item => {
    console.log(item);
    if (item.attendeeId == this.state.active) {
      this.setState({ tileTOShow: item.tileId })
    }
  })
  console.log('this is tile to show',this.state.tileTOShow)

});

this.onRemoveVideoTileSubscription = getSDKEventEmitter().addListener(MobileSDKEvent.OnRemoveVideoTile, (tileState) => {
  if (tileState.isScreenShare) {
    this.setState(oldState => ({
      ...oldState,
      screenShareTile: null
    }));
  } else {
    this.setState(oldState => ({
      ...oldState,
      videoTiles: oldState.videoTiles.filter(tileIdToCompare => tileIdToCompare != tileState.tileId),
      selfVideoEnabled: tileState.isLocal ? false : oldState.selfVideoEnabled
    }));
  }

});

[rnqayush]

1- i am updating the list of tileId before rendering to get unique tileId like this let videoData1 = Object.assign([], this.state.videoTiles) let videoData = []; videoData1.map((c) => { if (!videoData.includes(c)) { videoData.push(c); } })

2- and this is my component to render on screen

<View style={{flexDirection:'row'}}>

                {
              videoData.map((item) =>
                <TouchableWithoutFeedback
                  onPress={() => { this.setState({ visible: !this.state.visible }) }}
                >

                  <RNVideoRenderView style={item == this.state.tileTOShow ? { width: width, height: height,position:'absolute' } : { marginLeft: 10, width: 80, height: 80, borderRadious: 10,top: height - 180,}} isOnTop={item != this.state.tileTOShow} key={item} tileId={item} mirror={this.state.rotated ? false : true} />
                </TouchableWithoutFeedback>

              )
                }
              </View>

[YumTheDeathGod]

Hey @rnqayush , I have just started to implement active speaker video tile functionality into the react native application. But I am kind of stuck. Hope you can help me over here.

Basically my query is that whenever an active speaker's tile id changes then we have to unbind the video tile and again bind the other video tile. But I am not able to figure it out how to do that. cause whenever I tried to render that, active speaker's video gets render one time and whenever active speaker's tile id is toggled the video gets blacken out.

Note: I have implemented same kind of logic to get tile ids of users as yours. Thanks in an advance.