RTC callbacks UserMuteVideo,RemoteVideoStateChanged and UserEnableVideo are not triggered.

[teefortayyab]

I have been trying to use agora's RTC Callbacks to detect remote user's video stream status using UserMuteVideo,RemoteVideoStateChanged and UserEnableVideo callbacks but I am unable to get any callback triggered when the remote user is pausing/resuming the video.

[EkaanshArora]

can you share a code snippet?

[teefortayyab]

@EkaanshArora I have been facing issues customizing design view with the default import of the package, So, I used separate components to customize the design accordingly to requirements. Everything is working fine except some callbacks.

Working callbacks are EndCall, UserJoined, UserOffline. But UserMuteVideo,RemoteVideoStateChanged and UserEnableVideo are not triggered when the remote user is pausing/resuming the video.

You can see the code snippet in other comment.

[teefortayyab]

@EkaanshArora

const props = {
    rtcProps: {
      appId: config.appId,
      layout: 1, //pinned layout
      channel: roomId ? roomId.toString() : null,
    },
    callbacks: {
      EndCall: () => handleEndCall(),
      Warning: (warning) => console.log('WARNING:::', warning),
      Error: (error) => console.log('ERROR:::', error),
      ConnectionStateChanged: (e) => console.log('CONNECTION STATE CHANGED:::', e),
      JoinChannelSuccess: (e) => console.log('JOIN CHANNEL SUCCESS:::', e),
      RtcStats: (e) => console.log('RTC STATS:::', e),
      ConnectionBanned: () => console.log('CONNECTION BANNED'),
      ConnectionInterrupted: () => console.log('CONNECTION INTERRUPTED'),
      RequestToken: () => console.log('REQUEST TOKEN'),
      TokenPrivilegeWillExpire: () => console.log('TOKEN PRIVILEGE WILL EXPIRE'),
      ConnectionLost: () => console.log('CONNECTION LOST'),
      ApiCallExecuted: () => console.log('API CALL EXECUTED'),
      UserJoined: () => handleStartCall(),
      UserOffline: () => callEnded(),
      UserMuteVideo: (uid, muted) => console.log({ uid, muted }),
      RemoteVideoStateChanged: (uid, state, reason, elapsed) => console.log({ uid, state, reason, elapsed }),
      UserEnableVideo: (uid, enabled) => console.log({ uid, enabled }),
    },
  };

  <PropsProvider value={props}>
      <View style={{ flex: 1 }}>
        {showEndCallAnimation && (
          <Image
            source={require('@assets/img/VideoToNoVideoTransition.gif')}
            style={styles.animatedAbsoluteContainerView}
          />
        )}
        <PermissionModal
          showPermissionsModal={showPermissionsModal}
          setShowPermissionsModal={setShowPermissionsModal}
        />
        <CallStatus callConnected={callConnected.current} />
        <View style={{ flex: 1 }}>
          <RtcConfigure>
            <QuestionnaireModal questions={questions} />
            {showQuestionPopup && <QuestionPopUp questions={questions} />}
            <MaxUidConsumer>
              {(maxUsers) => (maxUsers[0] ? <MaxVideoView user={maxUsers[0]} key={maxUsers[0].uid} /> : null)}
            </MaxUidConsumer>
            <View style={styles.videoContainer}>
              <MinUidConsumer>
                {(minUsers) =>
                  minUsers.map((user) =>
                    user.video ? (
                      <>
                        <MinVideoView user={user} key={user.uid} />
                        <LocalUserContextComponent>
                          <SwitchCamera />
                        </LocalUserContextComponent>
                      </>
                    ) : (
                      <View
                        style={{
                          width: 120,
                          height: 200,
                          justifyContent: 'center',
                          alignItems: 'center',
                          backgroundColor: '#161C24',
                        }}>
                        <Image
                          source={{
                            uri: authUser?.profile?.photos?.length
                              ? authUser?.profile?.photos[0]
                              : DEFAULT_PROFILE_IMAGE,
                          }}
                          resizeMode='cover'
                          style={{ height: 75, width: 75, borderRadius: 100 }}
                        />
                        <LocalUserContextComponent>
                          <SwitchCamera />
                        </LocalUserContextComponent>
                      </View>
                    )
                  )
                }
              </MinUidConsumer>
            </View>
            <LocalControls />
          </RtcConfigure>
        </View>
        <View style={styles.parent}>
          <View style={styles.innerChild1}>
            <Image
              source={{ uri: receiverImage }}
              resizeMode='cover'
              style={{ height: 30, width: 30, borderRadius: 15 }}
            />
            <Text style={styles.innerChild1Text}>{receiverName && age ? `${receiverName}, ${age}` : ''}</Text>
          </View>
          {callConnected.current && roomData && mixerId ? (
            <View style={styles.innerChild2}>
              <ProgressBar stopCallAutomatically={handleEndCall} roomData={roomData} />
            </View>
          ) : (
            <ActivityIndicator color={'#281E48'} size={30} />
          )}
        </View>
      </View>
    </PropsProvider>

[EkaanshArora]

This looks like a bug, I’m out of office so I can try and fix this next week. In the meantime you can access the engine from the RtcContext and attach the event listener manually.

[teefortayyab]

@EkaanshArora Can you share any example for How can I attach a listener manually from RtcContext?

[teefortayyab]

@EkaanshArora Can you share any update or steps so that I can use RTC event in my application?

[EkaanshArora]

You can look at this file for an example of how to access the rtcEngine. Here's a snippet to listen for an event:

function AddEvent() {
  const {RtcEngine} = useContext(RtcContext);
  useEffect(()=>{
    RtcEngine.addListener('RemoteVideoStateChanged', (uid, state, reason, elapsed) => {
      // do things
    })
  },[])
  return null
}

// render it in your tree
...
    <AddEvent />
  </MinUidConsumer>
</View>

I'll try and fix this in the coming week, so you can just use the callbacks object.