Agora React VideoUIKit

Instantly integrate Agora video calling or streaming into your web application using a React based VideoUIKit.

Based on EkaanshArora project AgoraIO-Community/VideoUIKit-Web-React

Getting started

Requirements

• An Agora developer account
• A React project

Installation

Inside yoour React application, install dependencies:

Yarn

yarn add agora-video-uikit-react

NPM

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. (oficial)

Documentation

For full documentation, see our docs page.

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

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

Improvements

This project has been created to support some improvements and fix some important issues inside UIKit official project that developers and collaborators aren't including in main project.

• Camera switch: It's not possible to switch camera in UIKit official project. This project includes a button to switch camera on mobile devices.

Controls

• TIMER
• FULLSCREEN
• SWITCHCAMERA

Props

showTimer?: boolean optional param to show a timer with videocall duration in minutes and seconds. It starts when participant has joined to videocall. Default value is false

showEndCallButton?: boolean optional param to show/hide end call button. Main functionality is hide end call button if you want only one participant could hang up. Default value is true

showButtonsLabel?: boolean optional param to show label above buttons.

enableBlurBackground?: boolean optional param to enable blur background for local video. By default is false.

showSwapButton?: boolean optional param to show/hide swap button. Only will be shown if this param is set to true and mobile devices. Default value is false.

showSwapUser?: boolean optional param to show/hide swap user button inside other users thumbnails. Default value is false.

Callbacks

FullScreen(): void: Callback for: when a user expand to full screen the video

NormalScreen(): void: Callback for when a user click to go back to normal screen the video

Icons

fullScreen: custom Icon for Full Screen Button

switchCamera: custom Icon for Switch Camera Button

Styles

localBtnWrapper styles for button wrapper inside button container

timerStyles styles for Timer

fullScreen: style for FullScreen button

switchCamera: style for SwitchCamera button

Toggle styles have been added too. It they're not setted, buttons have same style for both states (on/off or mute/unmute)

unmuteLocalVideo: (paired with muteLocalVideo)

unmuteLocalAudio: (paired with muteLocalAudio)

normalScreen: (paired with fullScreen)

Issues fixed (not in main project)

• Error showing custom icons: Was no possible include only one or some custom icons and have others by default.
• Error publishing tracks before joining: Tracks were published before joining call on a first place, first participant tracks were not received by others participant unless they were unmuted/muted. This status updated made them republished and now received by others participants.
• Error showing black big bar when nobody else is in the video call: Removing weird black bar and showing 100% width screen when only one participant is joined to video call.

Issues

This project gonna be actively maintained so feel free to report your issues and create PRs to improve our code.