Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.
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.
To a react application, add the following:
npm i agora-react-uikit
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',
token: '<Your Agora Token>' // skip if you're using an app in testing mode
};
const callbacks = {
EndCall: () => setVideoCall(false),
};
return videoCall ? (
<AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
) : (
<Text onPress={()=>setVideoCall(true)}>Start Call</Text>
);
};
export default App;
Insert your Agora AppID and Token.
There's a demo project in the repo here.
/example/src/App.tsx
npm start
to start the bundler to build the librarycd example && npm start
to run the example appFor full documentation, see our docs page.
You can visit the wiki for other examples and in depth guide.
Generated using TypeDoc