BUILT FOR REACT

React Video Calling UI Kit

Add in-app calls with Tencent RTC’s React Video Calling UI Kit. Embed TUICallKit, connect your users, and adapt the call screen and floating window to your React app.

Start Building Try Call Demo

DEVELOPER RESOURCES

React Video Calling UI Kit Docs & Examples

Component Reference

Explore the React Video Calling UI Kit components.

Explore Components User Authentication

Integration Guides

Install the React Video Calling UI Kit and connect your users.

React Integration Quick Start

Examples & Source

See the product in action and explore its implementation.

Try Call Demo View React Source

One-to-One Video Calls in React

Bring a face-to-face conversation into your React app for personal connections or consultations, with video and call controls in the same experience.

Explore Video Consultations

Group Video Calls in React

Connect several participants in your React call component. Use the platform guide to configure the call flow and supported group layout.

Explore Group Calling

REACT CALL CAPABILITIES

React Video Calling Features

Connect people

Voice and video calls
Incoming call handling

Stay in control

Camera and microphone controls
Call lifecycle events

Make it yours

Your application flow
Platform-specific integration

Explore React Video Call Components

Connect TUICallKit to your component layout, then start calls from the actions in your app.

Call interface

Embed Your React Call Interface

Mount TUICallKit in your component layout and initialize it with your authenticated user. The component provides the call interface and controls.

Read the Documentation

import { TUICallKit } from '@trtc/calls-uikit-react';

export function CallView() {
  return <TUICallKit />;
}

Start a call

Start a Video Call in React

Pass the recipient IDs from your application to the calling API. Connect this action to a contact, conversation, or call button in your React interface.

Read the Documentation

import { TUICallKitAPI, CallMediaType } from
  '@trtc/calls-uikit-react';

await TUICallKitAPI.calls({
  userIDList: [recipientID],
  type: CallMediaType.VIDEO,
});

Floating window

Keep the conversation visible as people move through your app.

Read the Documentation

TUICallKitAPI.enableFloatWindow(true);

CUSTOMIZATION

Customize Your React Call UI Kit

Adapt the React call component, controls, and incoming-call flow to your product.

Layout & controls

Adapt the call experience using the customization options in your platform guide.

Read the Documentation

GET STARTED

Add Video Calling to Your React App

01
Create your app
Enable Call for your application and test users.
Open Call Console
02
Add the React Video Calling UI Kit
Follow the platform guide to connect your project.
Follow the Integration Guide
03
Make your first call
Sign in two test users, then place and answer a call.
Set Up Authentication

React Call UI Kit

npm install @trtc/calls-uikit-react

import { TUICallKitAPI } from '@trtc/calls-uikit-react';

await TUICallKitAPI.init({ SDKAppID, userID, userSig });

React Video Calling UI Kit FAQs

What does the React Video Calling UI Kit include?

The React Video Calling UI Kit provides TUICallKit screens and call controls. Connect it to your user identity and component layout; the Call service connects participants.

Should I use a React call SDK or UI Kit?

The UI Kit provides interface components on top of the underlying service. Choose the SDK when you need more control over your own application UI.

Web Video Calling SDK

What does React video calling need in the browser?

Initialize TUICallKit for authenticated users with the Call service enabled. Use HTTPS or localhost and handle camera, microphone, and browser playback permissions.

React Call Integration Guide

How do I authenticate users of the React Video Calling UI Kit?

Create a UserSig on your server and pass it to the client after your own sign-in flow. Keep the application secret on your server.

Read the Authentication Guide

Is the React Video Calling UI Kit free to use?

The interface and the hosted Call service have different roles. Activate the service for your application and review the current plan, feature availability, and usage charges.

View Call Pricing

How do I integrate React Video Calling UI Kit with React?

Initialize the documented provider and compose connected components. Match subscriptions and cleanup to React lifecycle, then test navigation and repeated mounting in your actual application.

Read the platform guide

How do I test React Video Calling UI Kit before releasing my app?

Test invitation, accept, decline and end-call state between independent users, including permission denial.

Read the platform guide

How do I customize the interface for React Video Calling UI Kit?

Use TUICallKitAPI from @trtc/calls-uikit-react for supported control changes. For example, hideFeatureButton(FeatureButton.Camera) hides the camera button, and setLayoutMode(LayoutMode.LocalInLargeView) places the local video in the large view. The layout setting applies only to one-to-one video calls. For an entirely different interface, build around TUICallEngine instead of assuming every internal view has a React replacement prop.

Read the customization guide

React Call Integration Support

Integration questions

Get setup help for the React Video Calling UI Kit.

View Developer Documentation

Talk about your application

Discuss your product, expected usage, and integration needs.

Contact Sales

Bring Video Calling to Your React App

Start with the React Video Calling UI Kit, connect two test users, and build your first call.

Get started for free View the UI Kit Guide

React Video Calling UI Kit

React Video Calling UI Kit Docs & Examples

Component Reference

Integration Guides

Examples & Source

One-to-One Video Calls in React

Group Video Calls in React

React Video Calling Features

Connect people

Stay in control

Make it yours

Explore React Video Call Components

Embed Your React Call Interface

Start a Video Call in React

Floating window

Customize Your React Call UI Kit

Layout & controls

Ringtone & identity

Add Video Calling to Your React App

Create your app

Add the React Video Calling UI Kit

Make your first call

React Video Calling UI Kit FAQs

What does the React Video Calling UI Kit include?

Should I use a React call SDK or UI Kit?

What does React video calling need in the browser?

How do I authenticate users of the React Video Calling UI Kit?

Is the React Video Calling UI Kit free to use?

How do I integrate React Video Calling UI Kit with React?

How do I test React Video Calling UI Kit before releasing my app?

How do I customize the interface for React Video Calling UI Kit?

React Call Integration Support

Integration questions

Talk about your application

Bring Video Calling to Your React App