A Web library to simply integrate Agora Video Calling or Live Video Streaming to your website with just a few lines of code

Last update: Jul 24, 2022

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.

NPM JavaScript Style Guide

Getting started

Requirements

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

https://github.com/AgoraIO-Community/Web-React-UIKit
Comments
  • 1. Some Suggestions

    Thanks for coming up with the idea of a higher level API for demystifying Agora video processing. The Agora Web UI Kit is easy to use. I applaud you for that. Nonetheless, for a developer with need to integrate video into a business systems, some heavy customization might be needed. Look and feel is what UI is all about. It is great, one can recompose the UI and I think that's where most serious developers will put their focus on if they want to use the kit.

    I am assuming you wrote the kit for easy integration to UI frameworks and in particular React developers. I know it is COOL to use TypeScript for development. But I can tell you that as a consultant that work with US companies "Raw React JS" is used 95% of the time because it is easier to integrate with other components used heavily in most companies.

    My humble suggestions (others can help in the implementation)

    1. A good example of the kit using just pure React (no TypeScript). There is simple TypeScript example already.
    2. A detailed example of recomposing the kit using raw React and TypeScript with emphasis on:
    • capturing local and remote video
    • How to customize the video containers, buttons and icons with the freedom to place icons and control bars in any desired location
    • In short a better exposure (example) on how to use most of the functions and props in raw React and TypeScript.
    1. I am open to help build a POC application by recomposing the UI Kit.

    Thanks Agora for your SDKs and special thanks to Ekaansh Arora for coming up with UI web kit.

    Jonathan Ekwempu

    Reviewed by onyii5119 at 2022-02-02 17:36
  • 2. Unable to view local video.

    I try to run the example project and add my app id in /example/src/App.tsx file. I am using the secure token for authentication so i add tokens in rtcProps and give a role as host and channel name which i used to generate the token. Still not able to view my local video. Screens show just blank

    Reviewed by iamkunall at 2022-05-20 09:49
  • 3. Invalid App ID

    I am trying to integrate UI Kit with my app, I generate join token server side and when I try to render the Agora UI Kit, I get the following error :

    **"'AgoraRTCException', code: 'CAN_NOT_GET_GATEWAY_SERVER', message: 'AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid vendor key, can not find appid'**

    I thought it was a mistake on my end, I went to the Agora dashboard and clicked on "create web demo link" and it didn't work there as well, the same error was popping up on the console.

    P.S: My app ID is correct

    Reviewed by monizb at 2022-04-19 21:34
  • 4. know when the audio and video mute button is clicked

    know when the audio and video mute button is clicked,,

    I have tried the following but it doesn't work

    callbacks: { "local-user-mute-audio": (status) => { console.log('status', status) }, },

    thank you

    Reviewed by ronny141 at 2022-04-11 18:15
  • 5. How to add a new component to LocalControls?

    I want to add a new new component to LocalControls, I checked the repo but I didn't find any solution. Can you plz tell me how to do that? I want to add a timer and few other buttons as follows:

    image

    Reviewed by gdSuhail at 2022-04-11 13:03
  • 6. Gatsby - error "window" is not available during server side rendering.

    Hi @EkaanshArora, Thanks for the UiKit.

    I have added the UIKit to one of our Gatsby project and it is working great but the problem is occuring during the build process. I am getting the error "window" is not available during server side rendering. error during running the build. The error is coming in the AgoraRTC_N-production.js file. I tried checking the condition of isBrowser() and then rendering the AgoraUIKit but still the same error is occuring. Please tell me how can I fix this issue. Thanks

    image

    Reviewed by gdSuhail at 2022-02-11 14:50
  • 7. Changes in Wiki

    So , in the wiki image There is an extra div closing tag under the example section Along with that, on 6th line of the same code snippet, SetRole is not defined (can be replaced with setHost perhaps)

    Reviewed by BearTS at 2022-04-06 17:20
  • 8. feature to switch between mirror or non mirror mode for VideoPlayer

    The Web API has the capability to switch between mirror and non-mirrored. However, this is not available for React UIKit.

    See

    https://docs.agora.io/en/Interactive%20Broadcast/API%20Reference/web_ng/interfaces/videoplayerconfig.html?platform=Web#mirror

    Please add this feature as it is useful for specific use cases.

    Reviewed by benghui-agora at 2022-07-07 15:27
  • 9. rear camera on mobile devices?

    Hi, I would like to display the rear camera on mobile devices. I search the doc but could not find which setting to set. Could you provide any guide? Thank you.

    Reviewed by pongsagon at 2022-05-29 13:31
  • 10. Custom css style for web component

    Hello, I am using agora-react-web-uikit web component in a Vuejs application. Are there any ideas to add StyleProp using web component approach? Thank you

    Reviewed by vuminhhieu1311 at 2022-05-09 17:49
  • 11. Unable to find the sendChannelMessage method

    I am trying to integrate Agora UI Kits into my react app, the connection part works and I am able to connect to both RTM and RTC channels, now I want to be able to send a message to everyone in the channel, I see there is a "sendChannelMessage" method under "RtmContext" in the library but I am unable to figure out how to import and use this method? Even if I import RtmContext it doesn't seem to expose the sendChannelMessage method somehow? Please help me, thanks!

    I tried referring to this: https://agoraio-community.github.io/Web-React-UIKit/interfaces/internal.rtmContext.html#sendChannelMessage but I'm unable to understand how to import this into React

    Reviewed by monizb at 2022-04-23 13:08
Let's learn React by building react within 100 lines of code
Let's learn React by building react within 100 lines of code

kReact Let's learn React by building react within 100 lines of code ???? Medium article: https://kamesh-dev.medium.com/kreact-building-your-own-react-

Nov 4, 2021
Raycast lets you control your tools with a few keystrokes.
Raycast lets you control your tools with a few keystrokes.

Raycast Extensions (Beta) Raycast lets you control your tools with a few keystrokes. This repository contains all extensions that are available in the

Aug 7, 2022
Code Kitchen - a React live-coding playground

Code Kitchen is a React live-coding playground which allows the developers to embed React component demos into a React UI library’s web documents.

Jul 16, 2022
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector Introduction This package allows users to jump to local IDE code directly from browser React component by just a simple click, whi

Aug 2, 2022
Integrate user-agent detection in an idiomatic React way

react-useragent Integrate user-agent detection in an idiomatic React way. Installation yarn add @quentin-sommer/react-useragent or npm i -s @quentin-s

Jul 26, 2022
ReactJS-Travel-Website - This is a travel(adventure) website made with ReactJS.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 1, 2022
Sapling - A convenient way to traverse your React app in VS Code
Sapling - A convenient way to traverse your React app in VS Code

Sapling - A convenient way to traverse your React app in VS Code

Jul 27, 2022
The recommended Code Splitting library for React ✂️✨
The recommended Code Splitting library for React ✂️✨

React code splitting made easy. Reduce your bundle size without stress ✂️ ✨ . npm install @loadable/component Docs See the documentation at loadable-c

Aug 9, 2022
🌟 JavaScript Style Guide, with linter & automatic code fixer
🌟 JavaScript Style Guide, with linter & automatic code fixer

JavaScript Standard Style Sponsored by English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Ko

Aug 9, 2022
CodeSwing is an interactive coding playground for VS Code
CodeSwing is an interactive coding playground for VS Code

?? CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications ("swings"). It's

Aug 5, 2022
Use SWC with Rollup to transform ESNext and TypeScript code.
Use SWC with Rollup to transform ESNext and TypeScript code.

rollup-plugin-swc SWC is an extensible Rust-based platform for the next generation of fast developer tools. This plugin is designed to replace rollup-

Aug 6, 2022
Typing test website build with React
Typing test website build with React

typing-test NOTE: This is my recreation of already existing monkeytype This site is currently live: Visit Here How to run locally git clone https://gi

Jul 28, 2022
LensKart Website Built With React And MongoDB

LensKart where you will get the best lenses This project was bootstrapped with react,express, mongodb, tailwind, a part of bootstrap, swiper and other

Jan 1, 2022
Landing Page For Tv E-commerce Website

About Landing Page For A TV E-Commerce Website As An Instance Of A Template Visit The Website From Here MicroOne Usage As it is a React app, you must

Jul 3, 2022
A next.js website that fetches random user data using axios
A next.js website that fetches random user data using axios

next.js random user using axios.get() example typescript by: UnusualAbsurd Live

Dec 17, 2021
React Static Website Starter Project
React Static Website Starter Project

React Static Website Starter Project This repo is an example of a React static website. The project has the following features: ES6 code Babel v6 tran

Nov 22, 2021
A website that makes use of the specs API (glasses) methods. With a SAAS kind of feel to it
A website that makes use of the specs API (glasses) methods. With a SAAS kind of feel to it

SpecsOn website ?? A website that makes use of the specs API (glasses ?? ) metho

Mar 17, 2022
This website is made using React.js and Bootstrap5, where anyone can take service from team. it's a fully responsive.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 19, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Jul 30, 2022