How to develop real-time audio and video applications with React Native

Welcome to visit
RTC developer communityTo exchange experience with more real-time audio and video developers.

React Native is a great cross-platform development tool for Web, iOS, and Android developers. You can create applications that run on mobile with JavaScript alone. You can also combine React Native code with Native code, whether you’re developing in Objective C, Java, or Swift.

Agora developer and React Native enthusiast (Github: Syanbo wrote a React Native package using the Agora SDK to implement live, multi-party voice or video conferencing. Of course, it also supports Android and iOS platforms.

His Github is here: github.com/syanbo/reac…

We were also slightly surprised when he appeared in Agora’s communication group. Thanks to the developers for supporting us. If you’ve done something new with the Agora SDK, feel free to let us know and we’ll be happy to share it with other developers.

On the other hand, the Agora SDK now supports React Native, which allows you to use React Native to add real-time audio and video capabilities to your app. We’ve also made an open source Demo that implements basic video calling functionality that is somewhat different from @syanbo’s. React Native is a real-time video call application that uses the React Native interface call logic. If you are developing React Native, you will find it useful.

The development environment

You’ll need to sign up for an Agora developer account and have the Node.js 6.9.1+ development environment ready.

Android developers also need to:

• Android Studio 2.0 +

• Editors such as Sublime Text

• Android devices (emulators not supported)

IOS developers need to:

• Xcode 8.0 +

• IPhone or iPad (no emulator support)

Quick start

Create Agora React Native Wrapper for your application

Register an account and get an App ID

1. Sign up for a developer account on Agora. IO, and each account gets 10,000 minutes of free phone calls per month for daily development and testing

2. Enter Dashboard and choose Project -> Project List in the left sidebar

3. Copy the App ID from the page

Update and run the Sample App

1. Open the app.js file. In Render (), update the App ID inside to the one you just copied.

render() {
    AgoraRtcEngine.createEngine('YOUR APP ID');
}
Copy the code

1. Using a terminal or Command Prompt, CD go to your project directory and type NPM install to generate the project file.

2. Add the appropriate SDK, connect the device, and then run the project as follows:

Android:

1. Download Agora Video SDK.

2. Unzip the downloaded SDK package and copy the libs/ agora-RtC-sdK. jar file to the Android /app/libs folder.

3. Then put the libs/arm64 – v8a/x86 / armeabi – v7a folder copy to the android/app/SRC/main/jniLibs folder.

4. In Android Studio, open the Android Project folder and connect to the Android device.

5. Synchronize and run projects.

IOS:

1. Download Agora Video SDK.

2. Unzip the download SDK packages and libs/AograRtcEngineKit. The framework file is copied to the ios/RNapi folder.

3. Open rnapi.xCODEProj and connect to your iPhone or iPad device.

4. Apply a valid configuration file and run the project.

Add video calls to the Existing React Native app

The following interfaces are mainly implemented:

• Render view

• Join channel

• Leave the channel

• Switching cameras

• Switch the Audio Route

• Add event listeners

The App class extension app.js in the file contains Agora SDK code related to the React Native Android/iOS sample application.

export default class App extends Component {
    ...
}
Copy the code

Render view

The Render () method generates UI elements in its return. In the code before return, configure the Agora Engine as needed.

Render () {...return(...). ; }Copy the code

Before rendering, we need to create the RTC Engine. Enter your App ID in the code below.

AgoraRtcEngine.createEngine('YOUR APP ID');
Copy the code

After creation, enable video and audio

AgoraRtcEngine.enableVideo();
AgoraRtcEngine.enableAudio();
Copy the code

Set up the video and channel profiles. As in the following code, the video is set to be 360 width, 640 height, 15 frame rate, and 300 bit rate:

AgoraRtcEngine. SetVideoProfileDetail,15,300 (360640); AgoraRtcEngine. SetChannelProfile (AgoraRtcEngine. AgoraChannelProfileCommunication);Copy the code

The return() method displays the view for Sample App. AgoraRendererView is the UI element used to display audio/video. The sample application creates two AgoraRendererView elements, _localView and _remoteView.

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

Then add a UI button element to return() that lets the user join the channel, leave the channel, switch the camera, and switch the audio line. See the link at the end of this article for detailed code.

Join channel

Use the _joinChannel() method to join the user to a specific channel.

_joinChannel () {... }Copy the code

In the _joinChannel() method, the following methods perform other tasks:

AgoraRtcEngine. SetLocalVideoView () sets the local video view.

Sample App applies the local video View to the _localViewUI element created in Render ().

AgoraRtcEngine. SetLocalVideoView (enclosing _localView, AgoraRtcEngine AgoraVideoRenderModeFit);Copy the code

AgoraRtcEngine. SetVideoProfile () sets the video configuration file to the default Agora configuration files, and do not change the orientation property.

AgoraRtcEngine. SetVideoProfile (AgoraRtcEngine AgoraVideoProfileDEFAULT,false);Copy the code

AgoraRtcEngine. StartPreview () to start the Agora SDK preview, and let the AgoraRtcEngine. JoinChannel channel (join).

AgoraRtcEngine. StartPreview (); AgoraRtcEngine. JoinChannel (null, "rnchannel01", "the React NativeforAgora RTC SDK ", 0);Copy the code

The joinChannel parameter is set like this:

• Token is null. After joining the channel, Agora Engine sets the token to the new value.

• Channel name: RNchannel01

• React Native for Agora RTC SDK

• Uid is 0, which is a generic user ID value

Leave the channel

The Sample App _leaveChannel (), invokes the AgoraRtcEngine. StopPreview () and AgoraRtcEngine leaveChannel (). Note that _leaveChannel() does not automatically stopPreview, so stopPreview() needs to be called first.

_leaveChannel () {AgoraRtcEngine. StopPreview (); AgoraRtcEngine. LeaveChannel (); }Copy the code

Switch camera

The Sample App, we through AgoraRtcEngine. SwitchCamera () to switch camera.

SwitchCamera () {AgoraRtcEngine. SwitchCamera (); }Copy the code

Switch the Audio Route

Call AgoraRtcEngine. SetEnableSpeakerphone () open or close the speaker. Note that isSpeakerPhone is used to detect whether the user is in speaker mode globally, so it must be changed after setEnableSpeakerphone.

_switchAudio () {AgoraRtcEngine. SetEnableSpeakerphone (isSpeakerPhone); IsSpeakerPhone =! isSpeakerPhone; }Copy the code

Add event listeners

Through agoraKitEmitter. AddListener () to add remoteDidJoineChannelNoti event listener to detect remote users to join channel.

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

• Add the remote video view to _remoteView

• Apply the remote video view, notify.uid, for the user

• Ensure that all video content is displayed

RemoteDidJoineChannelNoti = agoraKitEmitter. AddListener ('RemoteDidJoinedChannel', (notify) = > {AgoraRtcEngine. SetRemoteVideoView (enclosing _remoteView, notify the uid, AgoraRtcEngine. AgoraVideoRenderModeFit); });Copy the code

In the React Native view after removing, call remoteDidJoineChannelNoti. Remove () to remove the event listener.