agoraio / react-native-sdk

React Native Beta wrapper around the Agora RTC SDKs for Android and iOS

Agora RTC SDK for React Native (Deprecated)

Read this in other languages: 中文

Please refer to here for a new QuickStart. This repo is about to be deprecated. The new one has NPM support and is more suited to latest React Native development. The new SDK repo is a community one maintained here

This tutorial shows you how to quickly start developing requests with the Agora RTC SDK for React Native wrapper for Android/iOS.

This tutorial demonstrates these basic Agora SDK features:

• Render the View
• Join a Channel
• Leave a Channel
• Switch Camera
• Switch Audio Route
• Add Event Listener

Prerequisites

• 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');
   
       ...
   }

2. Using Terminal or Command Prompt, cd to your project directory and enter npm install. This command generates the project files for the Android or iOS sample apps.

3. Add the appropriate SDK, connect the device, and run the project as described here:

   Android

   Download the Agora Video SDK.

   Un-compress the downloaded SDK package and copy the libs/agora-rtc-sdk.jar file into the android/app/libs folder.

   Then copy the libs/arm64-v8a/x86/armeabi-v7a folder into the android/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 the ios/RNapi folder.

   Open RNapi.xcodeproj and connect your iPhone/iPad device.

   Apply a valid provisioning profile and run the project.

Resources

• A detailed code walkthrough for this sample is available in Steps to Create this Sample.

• 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.

License

This software is under the MIT License (MIT). View the license.

react-native-sdk's Issues

Remote View is not being rendered

I can't seem to get remote videoview to render properly to my UI View. I can hear the audio and clientRole, joinchannel callback also success but can't seem to render the remoteview.

iOS UI methods called on the main thread

Using the latest version:

=================================================================
Main Thread Checker: UI API called on a background thread: -[UIApplication statusBarOrientation]
PID: 7025, TID: 2275657, Thread name: (none), Queue name: com.facebook.react.AgoraRtcEngineModuleQueue, QoS: 0
Backtrace:
4   RumbleSeatLive Devo                 0x00000001053b92a8 -[AgoraRtcEngineKit initializeVideoSpecificPart] + 332
5   RumbleSeatLive Devo                 0x00000001053b954c -[AgoraRtcEngineKit joinChannelByToken:channelId:info:uid:joinSuccess:] + 220
6   RumbleSeatLive Devo                 0x0000000104c3251c -[AgoraRtcEngineModule joinChannel:channel:info:uid:] + 200
7   CoreFoundation                      0x00000001d14f7660 <redacted> + 144
8   CoreFoundation                      0x00000001d13d3980 <redacted> + 292
9   CoreFoundation                      0x00000001d13d4564 <redacted> + 60
10  RumbleSeatLive Devo                 0x0000000104d0ee00 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2064
11  RumbleSeatLive Devo                 0x0000000104db9a40 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 664
12  RumbleSeatLive Devo                 0x0000000104db95d0 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 132
13  RumbleSeatLive Devo                 0x0000000104db9540 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 28
14  libdispatch.dylib                   0x0000000106b57840 _dispatch_call_block_and_release + 24
15  libdispatch.dylib                   0x0000000106b58de4 _dispatch_client_callout + 16
16  libdispatch.dylib                   0x0000000106b60e88 _dispatch_lane_serial_drain + 720
17  libdispatch.dylib                   0x0000000106b61b7c _dispatch_lane_invoke + 460
18  libdispatch.dylib                   0x0000000106b6bc18 _dispatch_workloop_worker_thread + 1220
19  libsystem_pthread.dylib             0x00000001d110a0f0 _pthread_wqthread + 312
20  libsystem_pthread.dylib             0x00000001d110cd00 start_wqthread + 4

The status bar orientation should only be set on the main thread.

peer-leave event not triggering.

On peer left channel i'm expected onUserOffline event to be triggered.
RtcEngine.on("userOffline", data => { console.log("[RtcEngine] onUserOffline", data); });
But event not been triggering , onUserJoined event works fine.

RtcEngine.on("userJoined", data => { console.log("[RtcEngine] onUserJoined", data); });

My package JSON

`{

"name": "IonAssist",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"lodash": "^4.17.11",
"react": "16.8.3",
"react-native": "0.59.3",
"react-native-agora": "^2.4.0-alpha-1",
"react-native-config": "^0.11.7",
"react-native-elements": "^1.1.0",
"react-native-gesture-handler": "^1.1.0",
"react-native-orientation": "^3.1.3",
"react-native-paper": "^2.15.2",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.7.1",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-saga": "^1.0.2"
},
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/runtime": "^7.4.3",
"babel-jest": "^24.7.1",
"jest": "^24.7.1",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}`

java.lang.UnsatisfiedLinkError

2019-09-05 10:49:55.163 26484-26518/com.rnapi D/ReactNative: ReactInstanceManager.attachRootViewToInstance()
2019-09-05 10:49:55.447 26484-26517/com.rnapi I/ReactNativeJS: Running application "RNapi" with appParams: {"rootTag":1}. DEV === false, development-level warning are OFF, performance optimizations are ON
2019-09-05 10:49:55.513 26484-26484/com.rnapi E/art: No implementation found for int io.agora.rtc.internal.RtcEngineImpl.nativeLog(int, java.lang.String) (tried Java_io_agora_rtc_internal_RtcEngineImpl_nativeLog and Java_io_agora_rtc_internal_RtcEngineImpl_nativeLog__ILjava_lang_String_2)
2019-09-05 10:49:55.514 26484-26484/com.rnapi D/AndroidRuntime: Shutting down VM
2019-09-05 10:49:55.515 26484-26484/com.rnapi E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.rnapi, PID: 26484
java.lang.UnsatisfiedLinkError: No implementation found for int io.agora.rtc.internal.RtcEngineImpl.nativeLog(int, java.lang.String) (tried Java_io_agora_rtc_internal_RtcEngineImpl_nativeLog and Java_io_agora_rtc_internal_RtcEngineImpl_nativeLog__ILjava_lang_String_2)
at io.agora.rtc.internal.RtcEngineImpl.nativeLog(Native Method)
at io.agora.rtc.internal.Logging.log(Logging.java:25)
at io.agora.rtc.internal.Logging.i(Logging.java:49)
at io.agora.rtc.internal.RtcEngineImpl.checkIfInUIThread(RtcEngineImpl.java:149)
at io.agora.rtc.RtcEngine.CreateRendererView(RtcEngine.java:875)
at com.rnapi.SurfaceViewManager.createViewInstance(SurfaceViewManager.java:37)
at com.rnapi.SurfaceViewManager.createViewInstance(SurfaceViewManager.java:18)
at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:44)
at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:224)
at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:153)
at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1013)
at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:984)
at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:31)
at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:136)
at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:107)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:871)
at android.view.Choreographer.doCallbacks(Choreographer.java:685)
at android.view.Choreographer.doFrame(Choreographer.java:618)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:859)
at android.os.Handler.handleCallback(Handler.java:754)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:165)
at android.app.ActivityThread.main(ActivityThread.java:6375)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:912)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:802)
2019-09-05 10:49:55.529 26484-26484/com.rnapi I/Process: Sending signal. PID: 26484 SIG: 9

Attempt to invoke interface method

Which npm package to install?

So the README mentions to run npm install but doesn't specify which npm library to install. I understand that this can be because those steps are only meant to set this particular project up. Can't this be integrated as a library via npm & react-native link? (which is a standard practice)

Errors on android build

Hello,
I’m getting these errors when I try to build/run the demo app on an android device.

AgoraRtcEngineModule.setClientRole got 1 aruguments, expected 2

android build报错

错误: 方法不会覆盖或实现超类型的方法

错误: 找不到符号
符号: 方法 setSpeakerphoneVolume(int)
位置: 类型为RtcEngine的变量 mRtcEngine

错误: 找不到符号
符号: 方法 monitorConnectionEvent(boolean)
位置: 类型为RtcEngine的变量 mRtcEngine

Landscape mode back camera will autmatically zoom in

android build issue

AgoraModule.java:620: error: method does not override or implement a method from a supertype
@OverRide
AgoraModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

Please help me with this issue,

Can't make this work in iOS

Can we have a detailed documentation to explain how to setup AgoraIO-RNSDK?
I tried to install the iOS SDK at my project following the instructions and it did not work.
Also I tried to clone the repository and compile with the AgoraRtcEngineKit.framework but got some errors.
.../React-Native-SDK/node_modules/react-native/third-party/glog-0.3.4/src/base/mutex.h:105:10: 'config.h' file not found.

I would appreciate if someone can help.

Thanks!

React-Native SDK是否有滤镜与美颜功能

Flutter SDK有支持的路标 https://github.com/AgoraIO/Flutter-SDK/issues/2，
请问React-Native目前的状态是什么，路标是什么？

另外，如果用react开发web app，agora有相关的npm package做sdk吗？

Local View hides after Remote view is rendered

After call connection, local view hides when remote view renders. this happens only with Android version greater than 7.0

Object prototype may only be an Object or null

I keep getting this issue when running the demo app:
'Object prototype may only be an Object or null'. It's in the AgoraRtcEngineModule.js file on line 3.

I get the same error on a new react-native project. Any idea what it might be?

Stable sdk timeline?

I'm looking to integrate agora in my React Native app. Any plans on when a stable react native sdk will come around?

Android setupLocalVideo SurfaceView导致黑屏 本地Video无效

"react": "16.6.3"
"react-native": "0.57.8"
agora SDK 2.3.1
安卓8.1
安卓7.0
测试

Can't install in react-native-0.57 (Android)

Environment

System:
OS: macOS 10.14.1
CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 45.25 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
Yarn: 1.5.1 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3
API Levels: 23, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4697961
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Description

I created a new project with "create-react-native-app" and I follow the instruction as well, but I got an error when I open your example page

希望能提供一个flutter版本的插件吗

error: cannot find symbol method setSpeakerphoneVolume(int)

Java compiler errors
error: cannot find symbol method setSpeakerphoneVolume(int)

error: cannot find symbol method monitorConnectionEvent(boolean)

/Projetos/Agora/android/app/src/main/java/com/rnapi/AgoraModule.java:
uses or overrides a deprecated API.
Recompile with -Xlint:deprecation for details.

Can anybody help me?

AgoraRtcEngineModule undefined

Hi Guys. I am trying to access to NativeModules.AgoraRtcEngineModule but I got undefined. How I can link that AgoraRtcEngineModule to NativeModules. Thanks.

import {NativeModules, findNodeHandle, Platform, UIManager} from 'react-native';
import AgoraRendererView from './AgoraRendererView'
let AgoraRtcEngine = Object.create(NativeModules.AgoraRtcEngineModule);

Android build Issue

AgoraModule.java:620: error: method does not override or implement a method from a supertype
@OverRide
^
Note:
AgoraModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
1 error

Please help me.