Code Monkey home page Code Monkey logo

agora-rn-quickstart's Introduction

Agora React Native Demo

其他语言版本:中文

Quickstart for group video calls on React Native SDK using Agora.io SDK. Use this guide to quickly start a multiple user group call.

The source code of Agora React Native SDK can be found Here, API doc.

Prerequisites

  • = react native 0.59.10

  • iOS SDK 8.0+
  • Android 5.0+
  • A valid Agora account Sign up for free.

Open the specified ports in Firewall Requirements if your network has a firewall.

Running this example project

Structure

.
├── android
├── components
│ └── Permission.ts
│ └── Style.ts
├── ios
├── App.tsx
├── index.js
.

Generate an App ID

In the next step, you need to use the App ID of your project. Follow these steps to Create an Agora project in Console and get an App ID.

  1. Go to Console and click the Project Management icon on the left navigation panel.
  2. Click Create and follow the on-screen instructions to set the project name, choose an authentication mechanism (for this project select App ID without a certificate), and Click Submit.
  3. On the Project Management page, find the App ID of your project.

Check the end of document if you want to use App ID with the certificate.

Steps to run our example

  • Download and extract the zip file.
  • Run npm install to install the app dependencies in the unzipped directory.
  • Navigate to ./App.tsx and enter your App ID and token that we generated as appId: 'YourAppId', token: 'YourChannelToken'
  • Open a terminal and execute cd ios && pod install.
  • Connect your device and run npx react-native run-android or npx react-native run-ios to start the app.

The app uses channel-x as the channel name.

Sources

License

MIT

agora-rn-quickstart's People

Contributors

ekaansharora avatar lemon-chen avatar lichking-2234 avatar matrixbirds avatar plutoless avatar thenishchalraj avatar williamdxz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

agora-rn-quickstart's Issues

Build fails - cannot find React/RCTLog.h

Hi,

I've followed the instructions in your README carefully and tried twice, but building in Xcode fails immediately with:

/Users/joel/src/getaction/bidvid/Agora-RN-Quickstart/node_modules/react-native/Libraries/Network/RCTNetworkTask.m:8:9: fatal error: 'React/RCTLog.h' file not found
#import <React/RCTLog.h>
        ^~~~~~~~~~~~~~~~

Looking at your ios/Podfile it looks like you're not including react native or react in your Podfile.

Can somebody help? I can't get your quickstart to work at all ...

Join as a listener

Hi. i am start to using this service for my project but i have an issue. i want to join channel as a listener, not broadcaster. i don't want to send my voice or video. is that possible?
i fount that piece of code but i don't know what should be change

RtcEngine.joinChannel(this.props.channelName, this.props.uid) .then(result => { /** * ADD the code snippet after join channel success. */ });

@Matrixbirds

Problem building on iOS - RN 0.60.5

Hey guys!

I have the following problem when trying to build my project:
image
I already deleted the node_modules, Podfile.lock, already ran pod install, update. It worked, but stopped out of the blue, without making any changes to the code.
Can someone help me?

Xcode version: 10.2.1(10E1001)

package.json:
{
"name": "estudante",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"apisauce": "^1.1.1",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-agora": "^2.9.0-alpha.1",
"react-native-camera": "^3.4.0",
"react-native-elements": "^1.2.0",
"react-native-gesture-handler": "^1.4.1",
"react-native-image-crop-picker": "^0.25.2",
"react-native-image-picker": "^1.1.0",
"react-native-masked-text": "^1.13.0",
"react-native-material-textfield": "^0.12.0",
"react-native-modal": "^11.3.1",
"react-native-paper": "^2.16.0",
"react-native-reanimated": "^1.2.0",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.5",
"react-navigation-drawer": "^2.2.1",
"react-navigation-stack": "^1.8.0",
"react-navigation-tabs": "^2.5.3",
"react-redux": "^7.1.1",
"redux": "^4.0.4"
},
"devDependencies": {
"@babel/core": "7.6.0",
"@babel/runtime": "7.6.0",
"@react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.9.0",
"eslint": "6.4.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6",
"redux-devtools": "^3.5.0"
},
"jest": {
"preset": "react-native"
}
}

Podfile:
platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'estudante' do
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/React'
pod 'React-DevSupport', :path => '../node_modules/react-native/React'
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

pod 'react-native-agora', :path => '../node_modules/react-native-agora'

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'

target 'estudanteTests' do
inherit! :search_paths
end

use_native_modules!
end

target 'estudante-tvOS' do

target 'estudante-tvOSTests' do
inherit! :search_paths
end

end

post_install do |installer|
installer.pods_project.targets.each do |target|
targets_to_ignore = %w(React yoga)

if targets_to_ignore.include? target.name
  target.remove_from_project
end

end
end

Playing Error

I'd like to run this sample app, but I always got the below error.
Could you help me to get any idea to fix it?

KakaoTalk_Photo_2021-03-10-01-59-51

Expo support.

Hi Guys.

I am trying to use expo (v32.0.0). Any help.

Thanks

Supported background?

Hello! Can I checking calls from background? For example as in Telegram, when the app is not active device can show calls from another user.

Start button doesn't do anything

Hi, I'm running the example on Android.
I added the appid and updated the channel name to a channel where I have another client connected.
Pressing the 'Start call' button doesn't do anything.
A console log here:

RtcEngine.on('joinChannelSuccess', (data) => {                   //If Local user joins RTC channel
     console.log('here')
      RtcEngine.startPreview();                                      //Start RTC preview
      this.setState({
        joinSucceed: true,                                           //Set state variable to true
      });
    });

Never gets printed so I'm guessing its not connecting to the channel. Is there something else I should be changing from the initial codebase to make it work?
Thanks.

Video call or Video brodcasting

I have integrated your sample. It is working great. But, not sure. If it is video call or video brodcasting. Price and limit of views seems difference for both.

I'm looking for live brodcasting.

incoming call

Hi all, how to add incoming notification to react native agora ? is agora provide this feature? or we need another 3rd party library? if yes, what it is?

WebSDK NG is not receiving joining events from React Native App

I'm trying to test live interactive video streaming.

I joined a channel in my webapp and I want to receive video and audio from my React Native app. When I join a room in my RN app, I can see the video stream from my webapp, but my webapp cannot see video from my RN app. I also cannot receive the user-published event in the webapp, however, UserJoined event from the RN app appears just fine.

From my webapp, I can see other users from other instances uses web SDK, so I know it's not the webapp issue. Maybe the web SDK is not set up to receive events from the RN app?

Am I doing something wrong? Heres code from my RN App.

int = async () => {
...
await this._engine.setChannelProfile(1)
await this._engine.setClientRole(1)
await this._engine.enableVideo(true)
...

在安卓上运行报错

项目跑起来后,点击join channel后,一直在转圈圈,同时还有警告。麻烦各位解惑。谢谢啦!
image
image

Video not rendering first time on screen sharing

In the given example, onPressVideo creates a Modal instance in fullscreen mode to display a screen.
However, on first time when we open it, it does not render the video, but renders it second time.
Need help for some possible solution.

xcode build失败

我在xcode build的时候,直接失败 ,报错'React/RCTBridgeModule.h' file not found。请问一下这个怎么解决呢?

Clicking on Start Call returns an error

Hi,

I followed the instructions and was able to see two buttons: Start Call and End Call. However, when I clicked on Start Call, it doesn't do anything and the console logged Error 110. Clicking on End Call also doesn't do anything and the cosole logged Error 18.

image

RtcEngine Listeners not triggered

Hi guys,
When a user joins a channel, The RtcEngine listeners (UserJoined, JoinChannelSuccess) are not triggered on android. Do somebody have a solution for this issue ?

Black Screen

Hi guys How to fixed the black screen when join first time

Don't include code in readme, link files directly.

I wasted almost 3-4 hours debugging whats going on, opened an issue with react-native-agora as well, and had to test on a couple of bare bone new apps. Because Video was not showing any streams on mobile, while my video was being sent to other person.

Issue was that styles.js was not updated as per actual video.js file in the project(which i copied) and actual styles.js file contained different styles.

I think this is a confusion from readme, please mention clearly in readme somewhere that this is an explanation of whats going on and you can use actual files from the project.
Or keep the readme synced.

I might be over-reacting at this time, but this at-least be in your attention.

Thanks.

How to stop entire channel broadcasting

Hi first i started broadcasting, then some people are added to my channel as co-hosts. i want to stop my broadcasting and also my co-hosts broadcasting. this means there is no broadcasting between me and co-hosts and also between co-hosts when i stop my broadcasting.

Can not join a channel

Hi there!

I'm using this example as it is on iOS emulator.

After starting the application and clicking on the Start Call button, nothing happens.

The joinChannelSuccess event does not fire.

The error event returns {"api": "rtc.audio.enabled", "errorCode": 11, "result": ""}

Could someone please clarify what's wrong here?

no any return statement

Hello guys,

rtcengine.current = await RtcEngine.create(appId);

  await rtcengine.current.enableVideo();
  let data = await rtcengine.current.joinChannel(
    null,
    channelName,
    '',
    0,
  );
  console.log('rtcengine', datasss )
  rtcengine.current.addListener('userJoined', (data, elapsed) => {
    console.log('UserJoined', data, elapsed);
    if (peerIds.indexOf(data.uid) === -1) {
      SetPeerIds(oldArray => [...oldArray, data.uid]);
    }

  });
  rtcengine.current.addListener('userOffline', (uid, reason) => {
    console.log('UserOffline', uid, reason);
    // let dataPeerId = peerIds;

    SetPeerIds(oldArray => oldArray.filter(item => item !== data.uid));
  });
  rtcengine.current.addListener('joinChannelSuccess', (channel, uid, elapsed) => {
    console.log('JoinChannelSuccess', channel, uid, elapsed)
    SetJoinSucceed(true);
  });

no lisener response I cannot see the log of the listener

IOS rn 0.60 build error

I can`t build the app @ rn 0.60 , i ve downloaded the package using npm , and every build i make , returns this error, any solution ?

65158255-69bb8000-da08-11e9-848f-e4e859d59a57

iOS,start call response is -7

run in iOS
touch start call

RtcEngine.joinChannel(this.state.channelName, this.state.uid);  //Join Channel

response is -7
I don't find the errorcode in ErrorCode

what should i do?

Screen share window does not show the video sometimes

We are currently using Agora SDK for video call on Android. Sometimes when a user on one end shares the screen, the peerId on another side is coming negative, and hence the screen share is not displayed, just a blank screen, and it works fine for positive peerId value. Can you provide a suggestions as to why it might be happening and any possible solutions?

Problem using Agora IO

Hey guys. I was succesful when build your example but right after i tap "join channel" button, i'm getting the error below:
image

Can someone help me?

package.json:
{
"name": "estudante",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"apisauce": "^1.1.1",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-agora": "^2.9.0-alpha.1",
"react-native-camera": "^3.4.0",
"react-native-elements": "^1.2.0",
"react-native-gesture-handler": "^1.4.1",
"react-native-image-crop-picker": "^0.25.2",
"react-native-image-picker": "^1.1.0",
"react-native-masked-text": "^1.13.0",
"react-native-material-textfield": "^0.12.0",
"react-native-modal": "^11.3.1",
"react-native-paper": "^2.16.0",
"react-native-reanimated": "^1.2.0",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.5",
"react-navigation-drawer": "^2.2.1",
"react-navigation-stack": "^1.8.0",
"react-navigation-tabs": "^2.5.3",
"react-redux": "^7.1.1",
"redux": "^4.0.4"
},
"devDependencies": {
"@babel/core": "7.6.0",
"@babel/runtime": "7.6.0",
"@react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.9.0",
"eslint": "6.4.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6",
"redux-devtools": "^3.5.0"
},
"jest": {
"preset": "react-native"
}
}


Podfile:
platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'estudante' do
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/React'
pod 'React-DevSupport', :path => '../node_modules/react-native/React'
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

pod 'react-native-agora', :path => '../node_modules/react-native-agora'

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker'

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'

target 'estudanteTests' do
inherit! :search_paths
end

use_native_modules!
end

target 'estudante-tvOS' do

target 'estudante-tvOSTests' do
inherit! :search_paths
end

end

post_install do |installer|
installer.pods_project.targets.each do |target|
targets_to_ignore = %w(React yoga)

if targets_to_ignore.include? target.name
  target.remove_from_project
end

end
end

Problem building Agora.IO on iOS

I get this error message when trying to build: 'AgoraRtcEngineKit / AgoraRtcEngineKit.h' file not found.
image

I researched various solutions on the internet, and almost all have the following done:
"find AgoraRtcEngineKit.framework from your Pods folder and replace AgoraRtcEngineKit.framework in RCTAgora by dragging it into Your Project -> Libraries -> RCTAgora.xcodeproj -> Build Phases -> Link Binary With Libraries drag_sdk_into_your_project_rctagora_link_binary_with_libraires".

But in my iOS/Pods folder does not have the folder "AgoraRtcEngine_iOS".Can someone help me?

package.json:
{
"name": "agoraguide",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.6",
"react-native-agora": "^2.9.0-alpha.1"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.9.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.0",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}

Podfile:

target 'agoraguide' do

end

target 'agoraguide-tvOS' do

target 'agoraguide-tvOSTests' do
inherit! :search_paths
end

end

post_install do |installer|
installer.pods_project.targets.each do |target|

targets_to_ignore = %w(React yoga)

if targets_to_ignore.include? target.name
target.remove_from_project
end
end
end

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.