tencent cloud

All product documents
Tencent Real-Time Communication
DocumentationTencent Real-Time CommunicationVideo Calling (Including UI)Conversational Chat（TUICallKit）React
React
Download PDF
Last updated: 2025-01-16 15:07:42
React
Last updated: 2025-01-16 15:07:42
Download PDF
By integrating Chat and CallKit, you can achieve the following effects. Click Trying It Online.



Environment Requirements

React version 18+ (17.x versions are not supported)
TypeScript
Node.js version 16+
npm (use a version that matches the Node version in use)

Step 1: Integrating Chat

For detailed steps, please refer to: Quick Integration of Chat.

Step 2: Activating the Audio and Video Call Capability

Before using the audio and video services provided by Tencent Cloud, you need to go to the console to activate the service for the application. Refer to the specific steps in Activate the Service.

Step 3: Download the TUICallKit Component

Download the TUICallKit component via npm, version 3.3.6 and above:
npm i @tencentcloud/call-uikit-react

Step 4: Introducing and Invoking the TUICallKit Component

Just add two lines of code to experience the call feature. Introduce TUICallKit and invoke the TUICallKit component.
Enable Call in the <ChatHeader /> component, display the Icon, and set enableCall to true.
Note:
1. If you have not integrated TUIKit yet, please follow the Integrate TUIKit documentation to integrate TUIKit first. TUIKit version 2.2.8 and above.
2. The TUICallKit component can add style to display and control the position, width, height, and other styles of TUICallKit.
// 1. Import TUICallKit
import { TUICallKit } from '@tencentcloud/call-uikit-react';
// 2. If you are displaying on a PC, please add style to initialize the position of TUICallKit. If it is displayed on H5, it is not needed.
const callStyle: React.CSSProperties = {
  position: 'fixed',
  top: '50%',
  left: '50%',
  zIndex: '999',
  transform: 'translate(-50%, -50%)',
};
// 3. Please use the TUICallKit component in UIKitProvider
return (
  <div style={{display: 'flex', height: '100vh'}}>
    <UIKitProvider language={"en-US"}>
      <TUICallKit style={callStyle} /> 
      <div style={{maxWidth: '400px'}}>
         <Profile />
         <ConversationList />
      </div>
      <Chat>
        <ChatHeader enableCall={true}/> 
        <MessageList />
        <MessageInput />
      </Chat>
      <ChatSetting />
    </UIKitProvider>
  </div>
);

Step 5: Launching the Project

 npm run start

Step 6: Sending Your First Message

Enter your message in the input box and press Enter to send.


Step 7. Make your first call

As shown in the figure, click the video/audio Icon in the toolbar to realize the call effect.


FAQs

If you encounter any problems with access and use, please refer to FAQs.
If you have any requirements or feedback, you can contact: info_rtc@tencent.com.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon