Agora React Web UIKit

Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.

Getting started

Requirements

• An Agora developer account
• A React project

You can also use the UIKit outside a React project (for example in a vanilla-js project) using web-components. Find out more in the /web-component directory.

Installation

To a react application, add the following:

npm i agora-react-uikit

Usage

This UIKit contains a high level component called AgoraUIKit. You can check out code explanation here.

A simple sample app integrating Agora UI Kit:

import React, {useState} from 'react';
import AgoraUIKit from 'agora-react-uikit';

const App = () => {
  const [videoCall, setVideoCall] = useState(true);
  const rtcProps = {
    appId: '<Agora App ID>',
    channel: 'test', // your agora channel
    token: '<Your channel Token>' // use null or skip if using app in testing mode
  };
  const callbacks = {
    EndCall: () => setVideoCall(false),
  };
  return videoCall ? (
    <div style={{display: 'flex', width: '100vw', height: '100vh'}}>
      <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
    </div>
  ) : (
    <h3 onClick={() => setVideoCall(true)}>Start Call</h3>
  );
};

export default App;

Insert your Agora AppID and Token.

Demo Project

There’s a demo project in the repo here.

Instructions for running the demo:

1. Add your Agora App ID to /example/src/App.tsx
2. Run npm start to start the bundler to build the library
3. Execute cd example && npm start to run the example app

Documentation

For full documentation, see our docs page.

You can visit the wiki for other examples and in depth guide.

GitHub