
Add Video Calling in cross platform mobile apps using the Agora.io React Native SDK
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
- Create a developer account at agora.io.
- In the Agora.io Dashboard that appears, click Projects > Project List in the left navigation.
- 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
- Open the
App.js
file. In therender()
method, updateYOUR APP ID
with your App ID.
render() {
AgoraRtcEngine.createEngine('YOUR APP ID');
}
Android
- Download the Agora Video SDK.
- Un-compress the downloaded SDK package and copy the
libs/agora-rtc-sdk.jar
file into theandroid/app/libs
folder. - Then copy the
libs/arm64-v8a/x86/armeabi-v7a
folder into theandroid/app/src/main/jniLibs
folder. - In Android Studio, open the
android
project folder and connect the Android device. - Sync and run the project.
iOS
- Download the Agora Video SDK.
- Un-compress the downloaded SDK package and copy the
libs/AograRtcEngineKit.framework
file into theios/RNapi
folder. - Open
RNapi.xcodeproj
and connect your iPhone/iPad device. - 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 return
statement. 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
tonull
. After the channel has been joined, the Agora Engine setstoken
to a new value.channel
name tornchannel01
.info
about the channel toReact Native for Agora RTC SDK
.uid
to0
, 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 therender()
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
- Clone the SDK + Sample App
- Agora React Native API Reference.
- Complete API documentation is available at the Document Center.
- You can file bugs about this sample here.
- Learn how to contribute code to the sample project.