agora-custom-ui v1.0.9
Agora UIKit for React (Typescript):
Harsh Wadhwa https://github.com/harsh-wadhwa
3 Step Real Time Communication for React Applications (based on Agora's VideoSDK and RTM) Improved upon agora-react-uikit offered by Agora Team
Improvements over existing kit
- Layout and UI fixes. (✅)
- In call settings to change Audio Input devices and Video Input devices. (✅)
- Supported enableAudio and enableVideo props to pass to kit, before joining a call (✅)
- Supported cameraDevice(pass deviceId here) and microphoneDevice(pass deviceId here) props, before joining a call (✅)
Supported : control which users of video call can mute others' video and audio. (✅)
Change Audio Playback Device (Output) (...coming soon ⏲️)
- Option to pass prop for User picture to be shown instead of placeholder when camera is off. (...coming soon ⏲️)
Supported New Props
RTC : enableAudio, enableVideo, cameraDeviceId, microphoneDeviceId RTM : isThisUserAllowedToMuteOthers
Installation
In your react application, run the following in a terminal: "npm i agora-custom-ui"
Instructions for running the demo:
- Add your Agora App ID to
/example/src/App.tsx
- Run
npm start
to start the bundler to build the library - Execute
cd example && npm start
to run the example app
Usage
Insert your Agora AppID and Token.
A simple sample app integrating Agora UI Kit: import React, {useState} from 'react'; import AgoraUIKit from 'agora-custom-ui';
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 ? (
<div style={{display: 'flex', width: '100vw', height: '100vh'}}>
<AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
</div>
) : (
<h3 onClick={() => setVideoCall(true)}>Start Call</h3>
); };
export default App;