REACT ROOM CAPABILITIES
Rooms built for your application
Room lifecycle
- Create and join rooms
- Handle leave and end actions
Live conversation
- Connect participant video
- Control camera and microphone
Participant experience
- Display room members
- Reflect room state changes
Application identity
- Connect your own user IDs
- Authenticate with server-issued UserSig
Platform integration
- Browser workspaces
- Follow native or browser permissions
Your product flow
- Connect rooms to your navigation
- Keep business data in your app
Explore the React meeting components
See the room experience and the code behind it.
A place for everyone
Mount the meeting view with the React Video Conferencing UI Kit. Your application supplies authenticated users and a room ID.
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { ConferenceMainView } from '@tencentcloud/roomkit-web-react';
export default function App() {
return (
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
);
}Connect your application identity
Sign in with your application ID, user ID, and a server-issued UserSig. Enter the room after login succeeds.
import { conference } from '@tencentcloud/roomkit-web-react';
await conference.login({ sdkAppId: SDKAppID, userId, userSig });
await conference.createAndJoinRoom({
roomId, options: { roomName: 'Design review' },
});Bring participants together
Use an existing room ID to bring users into the same session.
import { conference } from '@tencentcloud/roomkit-web-react';
// After login, join an existing room.
await conference.joinRoom({ roomId });
// Leave without ending the room for everyone.
await conference.leaveRoom();CUSTOMIZATION
Make the room feel like your product
GET STARTED
Bring your first room to life
- 01
- 02
- 03
npm install @tencentcloud/roomkit-web-react tuikit-atomicx-react @tencentcloud/uikit-base-component-react @tencentcloud/universal-apiimport { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { ConferenceMainView } from '@tencentcloud/roomkit-web-react';
export default function App() {
return (
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
);
}React Video Conferencing UI Kit FAQs
What does the React Video Conferencing UI Kit include?
The React Video Conferencing UI Kit provides a ready-made meeting interface with room entry, video views, and participant controls. Your app supplies identity and business workflows.
How do I integrate the React Video Conferencing UI Kit?
How do users sign in to the React Video Conferencing UI Kit?
Use your SDKAppID, user ID, and a UserSig generated on your server. Keep the application secret out of browser and mobile code. Handle authentication failure before room entry.
Can I customize the meeting experience?
Adapt documented components and configuration to your product. Native UI Kit source exposes room views and toolbars. Check the platform guide for supported options.
How is Room priced?
Does this replace my course or workspace system?
Your application continues to own course content, workspace permissions, payments, and business records. The meeting component adds real-time communication to that flow.
How do I integrate React Video Conferencing UI Kit with React?
How do I test React Video Conferencing UI Kit before releasing my app?
How do I customize the interface for React Video Conferencing UI Kit?
Set theme and language on UIKitProvider from @tencentcloud/uikit-base-component-react. To change the video arrangement, call conference.setFeatureConfig({ layoutTemplate: RoomLayoutTemplate.SidebarLayout }) with RoomLayoutTemplate from tuikit-atomicx-react/room. This selects a supported layout, rather than an arbitrary replacement of every room component. The built-in invitation picker uses IM friend relationships; synchronize business contacts through the documented server APIs when needed.