Skip to content
← Back to Blog

Add Video Calling in cross platform mobile apps using the Agora.io React Native SDK

By Author: Team Agora In Developer Topics: , , , ,

For both mobile and web app developers, React Native is a game-changer. Using JavaScript, you can build apps for mobile phones that run natively. You can combine React Native code with native code, like Objective C, Java, and Swift for a native experience.

The Agora.io React Native SDK is available now to help you quickly add voice, video, and live broadcasting to your mobile applications on iOS and Android. You can get the Agora.io React Native SDK here on Github, and like our Xamarin binding, it’s open-sourced too. Follow the steps below to build the sample app or integrate the video calling within your existing React Native app:

Prerequisites

Requirements

  • Agora.io Developer Account
  • Node.js 6.9.1+

For Android development:

  • Android Studio 2.0+
  • A code editor such as Sublime Text
  • Physical Android device (Android Simulator is not supported)

For iOS development:

  • Xcode 8.0+
  • A physical iPhone or iPad device (iOS Simulator is not supported)

Quick Start

This section shows you how to prepare and build the Agora React Native wrapper for the sample app.

Create an Account and Obtain an App ID

  1. Create a developer account at agora.io.
  2. In the Agora.io Dashboard that appears, click Projects > Project List in the left navigation.
  3. Copy the App ID from the Dashboard to a text file. You will use this ID later when you launch the app.

Update and Run the Sample Application

  1. Open the App.js file. In the render() method, update YOUR APP ID with your App ID.
render() {
    AgoraRtcEngine.createEngine('YOUR APP ID');
}

Android

  1. Download the Agora Video SDK.
  2. Un-compress the downloaded SDK package and copy the libs/agora-rtc-sdk.jar file into the android/app/libsfolder.
  3. Then copy the libs/arm64-v8a/x86/armeabi-v7a folder into the android/app/src/main/jniLibs folder.
  4. In Android Studio, open the android project folder and connect the Android device.
  5. Sync and run the project.

iOS

  1. Download the Agora Video SDK.
  2. Un-compress the downloaded SDK package and copy the libs/AograRtcEngineKit.framework file into the ios/RNapi folder.
  3. Open RNapi.xcodeproj and connect your iPhone/iPad device.
  4. Apply a valid provisioning profile and run the project.

Add Video Calling in your existing React Native application

The App class extension in the App.js file, contains the relevant Agora SDK code for the React Native Android/iOS sample app.

export default class App extends Component {
    ...
}

Render the View

The render() method generates the UI elements within its returnstatement. Define any required Agora engine settings in the code that precedes return.

render() {
  ...
  return (
    ...
  );
}

Create the RTC Engine

Before rendering the view, create the Agora RTC engine, as shown here.

AgoraRtcEngine.createEngine('YOUR APP ID');

The YOUR APP ID is the same app ID used in the Quick Start.

Enable Audio and Video

After creating the RTC Engine, enable the video and audio, as shown here.

AgoraRtcEngine.enableVideo();
AgoraRtcEngine.enableAudio();

Set Video and Channel Profiles

Set the video and channel profile, as shown here.

AgoraRtcEngine.setVideoProfileDetail(360, 640, 15, 300);
    AgoraRtcEngine.setChannelProfile(AgoraRtcEngine.AgoraChannelProfileCommunication);

The sample app sets the following values for the video profile:

  • Width: 360
  • Height: 640
  • Frame rate: 15
  • Bitrate: 300

To learn more, see the React Native API doc.

Create the View

The return() method displays the view for the sample app. The AgoraRendererView elements are the UI elements Agora uses to display the audio/video. The sample app creates two AgoraRendererView elements, the _localView and _remoteView.

return (
    <View style = {styles.container} >
    <AgoraRendererView
        ref={component => this._localView = component}
        style = {{width: 360, height: 240}}
    />

    <AgoraRendererView
        ref={component => this._remoteView = component}
        style = {{width: 360, height: 240}}
    />

    ...

    </View>
);

The remaining portion of return() adds UI button elements, which enable the user to join the channel, leave the channel, switch their camera, and switch the audio route.

return (
     <View style = {styles.container} >
     ...
     <View style={{flexDirection: 'row'}}>
     <Button style = {{flex: 1}}
        onPress={this._joinChannel.bind(this)}
        title="Join Channel"
        style={{width:180, float:"left", backgroundColor:"rgb(0,0,0)"}}
        color="#841584"
     />
     <Button style = {{flex: 1}}
         onPress={this._leaveChannel.bind(this)}
         title="Leave Channel"
         color="#841584"
         style={{width:180, float:"left"}}
     />
     </View>

     <View style={{flexDirection: 'row'}}>
     <Button
         onPress={this._switchCamera.bind(this)}
         title="Switch Camera"
         color="#841584"
     />
     <Button
         onPress={this._switchAudio.bind(this)}
         title="Switch Audio Route"
         color="#841584"
     />
     </View>
     </View>
);

Join a Channel

The sample app uses the _joinChannel() method to join the user to a specific channel.

_joinChannel() {
    ...
}

Within the _joinChannel() method, the following methods perform additional tasks:

AgoraRtcEngine.setLocalVideoView() sets the local video view.

The sample app applies the local video view to the _localView UI element created in the render() method, and requests that the video mode fit within the _localView.

AgoraRtcEngine.setLocalVideoView(this._localView, AgoraRtcEngine.AgoraVideoRenderModeFit);

AgoraRtcEngine.setVideoProfile() sets the video profile to the default Agora profile without changing its orientation. To learn more about setVideoProfile(), see the React Native API doc .

AgoraRtcEngine.setVideoProfile(AgoraRtcEngine.AgoraVideoProfileDEFAULT, false);

AgoraRtcEngine.startPreview() starts the Agora SDK preview and AgoraRtcEngine.joinChannel() joins the channel.

AgoraRtcEngine.startPreview();
AgoraRtcEngine.joinChannel(null, "rnchannel01", "React Native for Agora RTC SDK", 0);

The joinChannel parameters set:

  • token to null. After the channel has been joined, the Agora Engine sets token to a new value.
  • channel name to rnchannel01.
  • info about the channel to React Native for Agora RTC SDK.
  • uid to 0, a generic user ID value.

Leave a Channel

The sample app applies the _leaveChannel() method, which invokes AgoraRtcEngine.stopPreview() method and AgoraRtcEngine.leaveChannel()method.

Note: _leaveChannel() does not automatically stop the preview. Therefore, stopPreview() must be called first.

_leaveChannel() {
    AgoraRtcEngine.stopPreview();
    AgoraRtcEngine.leaveChannel();
}

Switch the Camera

The sample app applies the _switchCamera() method, which invokes AgoraRtcEngine.switchCamera() to switch the camera.

switchCamera() {
    AgoraRtcEngine.switchCamera();
}

Switch Audio Route

The sample app uses the _switchAudio() method, which invokes AgoraRtcEngine.setEnableSpeakerphone() to turn the speakerphone on or off.

Note: isSpeakerPhone must be changed after calling setEnableSpeakerphone, since it is used globally to detect if the user is in speakerphone mode.

_switchAudio() {
    AgoraRtcEngine.setEnableSpeakerphone(isSpeakerPhone);
    isSpeakerPhone = !isSpeakerPhone;
}

Add Event Listener

The sample app uses agoraKitEmitter.addListener() to add a remoteDidJoineChannelNoti event listener to detect when a remote user joins the channel.

The name of the event listener is RemoteDidJoinedChannel. When this listener is triggered, it does the following:

  • Adds the remote video view to the _remoteView UI element created by the render() method.
  • Applies the remote video view for the user, notify.uid.
  • Requests that the video mode fit within the _remoteView.
remoteDidJoineChannelNoti = agoraKitEmitter.addListener(
    'RemoteDidJoinedChannel',
    (notify) => {
        AgoraRtcEngine.setRemoteVideoView(this._remoteView, notify.uid, AgoraRtcEngine.AgoraVideoRenderModeFit);
    }
  );

After the React Native view is destroyed, remove the remoteDidJoineChannelNoti event listener by calling remoteDidJoineChannelNoti.remove().

To learn more about Agora event listeners for React Native, see the React Native API doc.

Please shoot me an email or DM if you have any questions!

Resources