setVideocall(true)}>Start Call
- ) -} +Enumeration layout
Generated using TypeDoc
agora-react-uikit
+
+
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.
+
Getting started
+ + + +Requirements
+ +-
+
- An Agora developer account +
- A React project +
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',
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.
+ + +Demo Project
+ +There's a demo project in the repo here.
+ + +Instructions for running the demo:
+ +-
+
- Add your Agora App ID to
/example/src/App.tsx
+ - Run
npm startto start the bundler to build the library
+ - Execute
cd example && npm startto run the example app
+
Documentation
+ +For full documentation, see our docs page.
+You can visit the wiki for other examples and in depth guide.
+Generated using TypeDoc
Interface PropsInterface
Generated using TypeDoc
Interface RtcPropsInterface
+
Props object for customising the UI Kit functionality
+Hierarchy
- RtcPropsInterface
Index
Properties
Optional Custom
+
React functional component for overriding the default video placeholder
+Optional active
+
Set to true to enable active speaker callback, switches the pinned video to active speaker if you're using the pinned layout. (default: false)
+app
+
Agora App ID - used to authenticate the request
+Optional call
+
Once set to true, the UI Kit attempts to join the channel. Can be set to false to initialise the SDK and wait before joining the channel. (default: true)
+channel
+
Channel name to join - users in the same channel can communicate with each other
+Optional custom
+
Pass in a custom RTC client, to use your own implementation of the AgoraRTCClient.
+Optional dual
+
Enable dual stream mode with selected fallback option. (default: disabled)
+Optional enable
+
Enable the mic before joining the call. (default: true)
+Optional enable
+
Enables dual stream mode. (default: false)
+Optional enable
+
Enable the camera before joining the call. Only use for initiak(default: true)
+Optional layout
+
Choose between grid layout and pinned layout. (default: pinned layout)
+Optional role
+
Set local user's role between audience and host. Use with mode set to livestreaming. (default: host)
+Optional token
+
(optional) Token used to join a channel when using secured mode (default: null)
+Optional token
+
(optional) URL for token server, manages fetching and updating tokens automatically. Must follow the schema here - https://github.com/AgoraIO-Community/agora-token-service/
+Optional uid
+
(optional) UID for local user to join the channel (default: 0)
+Generated using TypeDoc
Interface StylePropInterface
+
Props object for customising the UI Kit, takes in react native styling
+Hierarchy
- StylePropInterface
Index
Properties
- Btn
Template Styles - UIKit
Container - custom
Icon - grid
Video Cells - grid
Video Container - icon
Size - local
Btn Container - local
Btn Styles - max
View Container - max
View Overlay Container - max
View Styles - min
View Container - min
View Overlay Container - min
View Styles - pinned
Video Container - remote
Btn Container - remote
Btn Styles - scroll
View Container - theme
- video
Mode
Properties
Optional Btn
+
Globals style for the local buttons (except end call)
+Optional UIKit
+
Applies style to the global view containing the UI Kit
+Optional custom
+
Custom base64 string for icon
+Optional grid
+
Applies style to the individual cell (view) containing the video in the grid layout
+Optional grid
+
Applies style to the grid container
+Optional icon
+
Color tint for icons
+Optional local
+
Style for the local button container
+Optional local
+
Style for specific local buttons, overrides the style applied by BtnTemplateStyles prop
+Optional max
+
Style for the big view container
+Optional max
+
Style for the overlay on small user view when pressed in pinned layout
+Optional max
+
Style for the big view in pinned layout
+Optional min
+
Style for the small view container
+Optional min
+
Style for the overlay on small user view when pressed in pinned layout
+Optional min
+
Style for the small view in pinned layout
+Optional pinned
+
Applies style to the grid container
+Optional remote
+
Style for the remote button container
+Optional remote
+
Style for the remote button
+Optional scroll
+
Applies style to the pinned scrollview container
+Optional theme
+
Color tint for icons
+Optional video
+
Sets the scaling of the video
+Type declaration
Optional max?: "cover" | "contain" | "fill"
Optional min?: "cover" | "contain" | "fill"
Generated using TypeDoc
Interface VideoPlaceholderProps
Generated using TypeDoc
agora-react-uikit
Index
Enumerations
Interfaces
Variables
Functions
Variables
Grid
Local
Max
Min
Pinned
Props
Rtc
Rtc
Tracks
default
+
High level component to render the UI Kit
+icons
Type declaration
call
End: Element mic: Element
mic
Off: Element remote
Swap: Element videocam: Element
videocam
Off: Element
Functions
Const Btn
Parameters
props: BtnTemplateInterface
Returns Element
End
Returns Element
Local
Returns Element
Local
Returns Element
Local
Returns Element
Const Max
Parameters
props: { style?: CSSProperties; user: UIKitUser }
Optional style?: CSSProperties
user: UIKitUser
Returns Element
Const Min
Parameters
props: { user: UIKitUser }
user: UIKitUser
Returns Element
Remote
Parameters
props: { UIKitUser: UIKitUser }
UIKit
User: UIKitUser
Returns null | Element
Remote
Parameters
props: { UIKitUser: UIKitUser }
UIKit
User: UIKitUser
Returns null | Element
Swap
Parameters
props: { UIKitUser: UIKitUser }
UIKit
User: UIKitUser
Returns Element
Const Video
Parameters
props: VideoPlaceholderProps
Returns null | Element
Generated using TypeDoc
Agora React Web UI Kit
{videocall ? (<>
-
You're {role ? 'an audience' : 'a host'}
-setRole(!role)}>Change Role
+You're {isHost ? 'a host' : 'an audience'}
+setHost(!isHost)}>Change Role
setPinned(!isPinned)}>Change Layout
Select a pre built layout
+