Agora Video Tool Kit for React Native

Instantly integrate Agora video calling or streaming into your React Native application.

Getting started

Requirements

• An Agora developer account (it's free)
• Android or iOS Device
• React Native Project

Installation

npm i react-native-agora agora-react-native-rtm react-native-agoravideo-toolkit-ui

Usage

This VideoUIKit is very simple to use and contains a high level component called AgoraToolKit. You can check out code explanation here. It includes all features like mute/unmute ,video pause,record video call and many more.

Replace the Agora App ID with your own appID.

If you created the Agora App in secured mode, you'll need to pass in an rtcToken and an rtmToken to the connectionData prop. Alternatively, you can deploy the one-click token server and pass in the tokenUrl, the Tool Kit then automatically fetches and manages the tokens.

Record video call

For adding record button for recording video live call ,you'll need to pass recordStatus:true to the connectionData prop.

To Record Video In Android :

You need to add following permission in AndroidManifest file

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

If Android version > 12 add permission

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

To Record Video In IOS :

You need to add following permission in Info.plist file

<key>LSSupportsOpeningDocumentsInPlace</key>
 <true/>
 <key>UISupportsDocumentBrowser</key>
<true/>

A simple Demo app integrating Agora Video/Audio tool Kit:

import React, {useState} from 'react';
import AgoraUIKit from 'react-native-agoravideo-toolkit-ui';

const App = () => {
const [videoCall, setVideoCall] = useState(true);
const connectionData = {
appId: '<Agora App ID>',
channel: 'test',
};
const rtcCallbacks = {
EndCall: () => setVideoCall(false),
};
return videoCall ? (
<AgoraUIKit connectionData={connectionData} rtcCallbacks={rtcCallbacks} />
) : (
<Text onPress={()=>setVideoCall(true)}>Start Call</Text>
);
};

export default App;