tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    React

    Last updated: 2024-11-01 14:16:18
    Download PDF
      TUICallKit is an audio and video call UI component launched by Tencent Cloud. By integrating this component, you can experience the audio and video call feature with just a few lines of code in your chat application.
      
      
      
      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: Enable 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 enable the audio and video services for your application. For detailed steps, please refer to Activate Service.

      Step 2: Download the TUICallKit Component

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

      Step 3: Import and Invoke the TUICallKit Component

      You only need to add two lines of code to experience the call feature. Import TUICallKit and invoke the TUICallKit component.
      In the <ChatHeader /> component, enable Call, display the Icon, and set enableCall to true.
      Note:
      1. If you have not yet integrated TUIKit, please follow Integrate TUIKit documentation to first integrate TUIKit. The TUIKit version should be updated to v2.2.7 or above.
      2. The TUICallKit component allows you to add styles for controlling the position, width, and height of TUICallKit.
      // Import TUICallKit
      import { TUICallKit } from '@tencentcloud/call-uikit-react';
      // If you are displaying on the PC end, please add styles to initialize the TUICallKit position. For H5 display, this is not required
      const callStyle: React.CSSProperties = {
        position: 'fixed',
        top: '50%',
        left: '50%',
        zIndex: '999',
        transform: 'translate(-50%, -50%)',
      };
      // Please use the TUICallKit component within the 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 4: Launch the project

       npm run start

      Step 5: Make your first call

      
      
      

      FAQs

      How to disable the audio/video call feature?

      To disable the audio/video call button, set the nbableCall attribute to false in the <ChatHeader /> component. If enableCall is not specified, the default is false.
      return (
        <div style={{display: 'flex', height: '100vh'}}>
          <UIKitProvider language={"en-US"}>
            <TUICallKit style={callStyle} />
            <div style={{maxWidth: '400px'}}>
               <Profile />
               <ConversationList />
            </div>
            <Chat>
              <ChatHeader enableCall={false}/> 
              <MessageList />
              <MessageInput />
            </Chat>
            <ChatSetting />
          </UIKitProvider>
        </div>
      );

      How do I purchase a package?

      Please refer to the purchase link to purchase the official version.

      Technical consultation

      If you need anything or have feedback, you can contact: info_rtc@tencent.com. Alternatively, join the Telegram technical group or the WhatsApp group for support from professional engineers to solve your problems.
      
      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
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy