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

$3

- An Agora developer account
- A React project

$3

Inside yoour React application, install dependencies:

#### Yarn

``bash
yarn add agora-video-uikit-react
`

#### NPM

`bash
npm i agora-react-uikit
`

$3

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

A simple sample app integrating Agora UI Kit:

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

const App = () => {
const [videoCall, setVideoCall] = useState(true)
const rtcProps = {
appId: '',
channel: 'test', // your agora channel
token: '' // use null or skip if using app in testing mode
}
const callbacks = {
EndCall: () => setVideoCall(false)
}
return videoCall ? (


export default App
`

Insert your Agora AppID and Token.

$3

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.

$3

- TIMER
- FULLSCREEN
- SWITCHCAMERA

$3

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.

$3

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

$3

fullScreen: custom Icon for Full Screen Button

switchCamera: custom Icon for Switch Camera Button

$3

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`)

$3

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

$3

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