Elijah Tai
Elijah Tai

Reputation: 11

Agora React-Native No Video Feed (Audio Only) on deployed app on Newer Android Devices (i.s. S10, Pixel 3)

We've been using react-native-agora https://github.com/syanbo/react-native-agora to provide video chat in our react native mobile app. It works perfectly on iPhones and older Android devices (i.e. Galaxy S8), but when a user with a newer Android device (i.e. Galaxy S10 or Pixel 3) joins a channel, only their audio comes through (i.e. their video feed just shows a black screen to them and their channel partner).

The video feed works on simulated versions, but not on the APKs submitted to the PlayStore. When we build the final APK file on a newer Android device (i.e. Galaxy S10) for testing, the call works. But then when we install it after it gets approved by and downloaded from the Google Play Store onto the same S10 that did the successful APK test release build on, we get the same audio-only (i.e. no video feed / black screen) bug.

We don't think this is a code issue because it builds and works on all older phones. But here are some details about our code

componentDidMount () {
    RtcEngine.getSdkVersion((version) => {
      console.log('[RtcEngine] getSdkVersion', version);
    })

    console.log('[joinChannel] ' + this.props.channelName);
    RtcEngine.joinChannel(this.props.channelName, this.props.uid);
    RtcEngine.enableAudioVolumeIndication(500, 3);
  }

And:

export default function AgoraRTCViewContainer(props) {

  const { navigation } = props;
  const channelProfile = navigation.getParam('channelProfile', 1);
  const clientRole = navigation.getParam('clientRole', Host);
  const channelName = navigation.getParam('channelName', 'agoratest');
  const uid = navigation.getParam('uid', Math.floor(Math.random() * 100));
  const onCancel = navigation.getParam('onCancel');

  return (<AgoraRTCView
    channelProfile={channelProfile}
    channelName={channelName}
    clientRole={clientRole}
    uid={uid}
    onCancel={onCancel}
    {...props}
  ></AgoraRTCView>);
}

And:

RtcEngine.on('userJoined', (data) => {
        console.log('[RtcEngine] onUserJoined', data);
        const {peerIds} = this.state;
        if (peerIds.indexOf(data.uid) === -1) {
          this.setState({
            peerIds: [...peerIds, data.uid],

            // when peer joins chat, set selectedUid to their id and visible to true to make their video pop up as AudioProfileDefault
            selectedUid: data.uid,
            visible: true,
          })
        }
      });
    RtcEngine.on('userOffline', (data) => {
        console.log('[RtcEngine] onUserOffline', data);
        this.setState({
            peerIds: this.state.peerIds.filter(uid => uid !== data.uid)
        })
        console.log('peerIds', this.state.peerIds, 'data.uid ', data.uid)
      });
    RtcEngine.on('joinChannelSuccess', (data) => {
        console.log('[RtcEngine] onJoinChannelSuccess', data);
        RtcEngine.startPreview();
        this.setState({
          joinSucceed: true,
          animating: false
        })
    });

We originally thought it was some type of permissions error, but we are requesting them as such in AndroidManifest.XML:

    <uses-permission android:name="android.permission.READ_PHONE_STATE" />    
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- The Agora SDK requires Bluetooth permissions in case users are using Bluetooth devices.-->
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

And requesting them using PermissionsAndroid in the app.

What do you think might be a solve for this issue?

Upvotes: 1

Views: 912

Answers (0)

Related Questions