unexpected blackening out video meeting screen.

[rnqayush]

I am testing some feature on react native demo app but facing issues with video screen.

1- I have used two RNVideoRenderView component. first one is used for speaker whose UI is covering more portion on screen and other one is used for presenting attendees video tiles below which is smaller. 2- I have set a logic so that by Clicking on small video tiles (where attendees are being presented), the attendees goes on full screen and vice versa. 3- But on clicking below to a video tile the screen is getting blacked out. I am not able to find out the issue because all the console logs are same as expected but screen is blackening out. 4- I have shared my code and some screen shots kindly help me in resolving this.

[rnqayush]

/*** Here is the code for UI . I have done console log for video data which is used for attendees tile and for first which is used for speaker **/

render() {

let videoData1 = Object.assign([], this.state.videoTiles)
let videoData = [];
videoData1.forEach((c) => {
  if (!videoData.includes(c)) {
    videoData.push(c);
  }
})
let first = this.state.tileTOShow != null ? this.state.tileTOShow : videoData.shift()
videoData = videoData.filter(it => it != first)

console.log(videoData);                                      /***     console log for videoData      ******/
console.log(first)                                                /***     console log for  first      ******/

const currentMuted = this.state.mutedAttendee.includes(this.props.selfAttendeeId);
return (
  <>

    <View style={[styles.container, { justifyContent: 'flex-start' }]}>

      <Text style={styles.title}>{this.props.meetingTitle}</Text>

      {this.state.visible ? (null) : (
        <View style={styles.buttonContainer}>
          <MuteButton muted={currentMuted} onPress={() => NativeFunction.setMute(!currentMuted)} />
          <CameraButton disabled={this.state.selfVideoEnabled} onPress={() => NativeFunction.setCameraOn(!this.state.selfVideoEnabled)} />
          <HangOffButton onPress={() => NativeFunction.stopMeeting()} />
          <Button
            title='focus'
            onPress={() => { NativeFunction.realtimeSetVoiceFocusEnabled(true) }}
          />
          <Button
            title='check'
            onPress={() => { NativeFunction.realtimeIsVoiceFocusEnabled() }}
          />
          <Button
            title='active'
            onPress={() => { NativeFunction.activeSpeaker() }}
          />

        </View>)}
      {
        this.state.visible ? (null) : (<RecButton meetingTitle={this.props.meetingTitle} />)
      }

      <Text style={styles.title}>Video</Text>
      <View style={styles.videoContainer}>

        {
          this.state.videoTiles.length > 0 ?
            <TouchableWithoutFeedback
              onPress={() => { this.setState({ visible: !this.state.visible }) }}
            >
              <RNVideoRenderView style={{ width: width, height: height }} key={first} tileId={first} mirror={true} />

            </TouchableWithoutFeedback>
            : null
        }
      </View>

    </View>

    <View style={{ position: 'absolute', top: height - 250 }}>

      {this.state.videoTiles.length > 1 ? <View style={{ width: width, height: 200, }}>

        <FlatList
          style={{ width: '100%' }}
          contentContainerStyle={{ width: '90%' }}
          data={videoData}
          horizontal={true}

          renderItem={({ item }) => (
            <TouchableWithoutFeedback
              onPress={() => { this.setState({ tileTOShow: item }) }}
            >
              <RNVideoRenderView style={{ width: 80, height: 80, borderRadious: 10 }} key={item} tileId={item} />
            </TouchableWithoutFeedback>
          )}
        />

      </View> : <Text>ayush mishra</Text>}
    </View>

  </>
);

}

[rnqayush]

here is the console log for videoData and first.

[rnqayush]

Also can i use attendeeId to display video instead of tileId ? If yes, then what changes i will have to make to achieve this.

[alnlau]

We'll try to reproduce the issue and get back to you. Is the posted code the only modifications made to the sample app?

You can use attendeeId on the React Native side (ex: sorting) as long as that info is present. You'll need to modify MeetingObservers to also send the attendee Id over. See VideoTileState for other info included in the VideoTileState.

For binding the video tile, you'll have to use the tileId. See VideoTileControllerFacade for the params needed for bindVideoView and NativeMobileSDKBridge for how it is currently being called.

[rnqayush]

thank you for your response, I did some more changes to sample app which are in 1-https://github.com/rnqayush/freeze-and-active-speaker/blob/main/android/app/src/main/java/com/amazonaws/services/chime/rndemo/NativeMobileSDKBridge.kt 2- https://github.com/rnqayush/freeze-and-active-speaker/blob/main/android/app/src/main/java/com/amazonaws/services/chime/rndemo/RNEventEmitter.kt
3-https://github.com/rnqayush/freeze-and-active-speaker/blob/main/src/utils/Bridge.js 4-https://github.com/rnqayush/freeze-and-active-speaker/blob/main/src/containers/Meeting.js 5-github link to changed sample app is : https://github.com/rnqayush/freeze-and-active-speaker

Kindly suggest me the some solution to it, I have checked it by changing several logic tileId is being passed to RNVideoRenderView component accurately but same issue occurs .

[rnqayush]

@alnlau , I have tried several times but not able to resolve this Kindly suggest some solution to it.

[hokyungh]

@rnqayush Thank you for providing the codebase for reproduction. However, when I tried, it only shows only one video instead of two. I also clicked on pin, but it crashes. Any special step I need to take to reproduce this issue?

One theory I have is due to nature on bind/unbind. It might be that you unbind the video, but didn't bind it again?

[rnqayush]

@hokyungh thanks for response, the code is working fine . I have checked it on android. Kindly join with two devices it will definitely show two videos I have updated and checked the code. Actually rendering of videos is having issues. In code I am only swapping tileId (which is integer value) on re-render to bring the smaller tile video to bigger tile and vice versa. Kindly suggest some ideas that could help to present both the videos after re-render.

github link to app is : https://github.com/rnqayush/freeze-and-active-speaker

[subhendukundu]

I have seeing the same issue. The one has

<FlatList
  style={{
    backgroundColor: 'white'
  }}
  data={attendees}
  renderItem={({item}) => (
    <View
      style={{
        backgroundColor: '#fff',
        width: size,
        height: size,
        justifyContent: 'center',
        alignItems: 'center'
      }}
    >
      <AttendeeVideo
        item={item}
        selfAttendeeId={selfAttendeeId}
        videoTiles={videoTiles}
        meetingTitle={meetingTitle}
        hideOwn
        key={item}
        selfVideoEnabled={selfVideoEnabled}
        mutedAttendee={mutedAttendee}
      />
    </View>
  )}
  keyExtractor={item => item}
  numColumns={2}
/>

then AttendeeVideo the one doesnt have video on is always black.

//AttendeeVideo.js
return (
    isVideoTile ? (
      <RNVideoRenderView style={styles.video} tileId={isVideoTile.tileId} />
    ) : (
      <View
        style={{
          backgroundColor: 'white',
          flex: 1
        }}
      >
        <Text style={{
          color: 'white',
          fontSize: 22
        }}>Okay</Text>
      </View>
    )
  );

Edit: For the record I am using the example app, with changed a ui bit.

[subhendukundu]

But maybe this will help to fix it? https://github.com/aws-samples/amazon-chime-react-native-demo/blob/027c02bd57ada82daa0027099c440d3c909929ee/src/Style.js#L37

[vats05]

@hokyungh - please suggest. This is blocking our implementation.

[rnqayush]

@subhendukundu thanks for your response i tried all possible ways for setting overflow:'hidden' still same issue. any suggestion for further changes i should look.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ashirkhan94]

same issue for me

[rnqayush]

same issue for me

@ashirkhan94 1- use only one list containing host and attendees and display it on screen. 2- then create logic accordingly to change the ui of host and attendee from small to big and vice-versa

[ashirkhan94]

Hi @rnqayush thanks for your replay

[ashirkhan94]

@rnqayush how to implement below function in react native demo for reducing remote video Quality func remoteVideoSourcesDidBecomeAvailable(sources: [RemoteVideoSource]) { sources.forEach { source in videoModel.remoteVideoSourceConfigurations[source] = VideoSubscriptionConfiguration() } audioVideoFacade.updateVideoSourceSubscriptions(addedOrUpdated: remoteVideoSourceConfigurations, removed: []) }

I am new in Objective C

thanks in advance