tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    Web

    Last updated: 2023-06-07 15:08:40
    Download PDF

      Integrating TUICallKit

      This document shows you how to quickly integrate the TUICallKit component to build a video call application with ready-made UI.
      To try out the component, see TUICallKit basic demo.
      Before you start, check whether your desktop browser supports TRTC. For details, see Environment requirements below.

      Contents

      Step 1. Activate TRTC and Chat
      Step 2: Integrate TUICallKit
      Step 3. Call TUICallKit
      Related documents
      FAQs
      1. How do I generate a UserSig?
      2. Vite import
      3. Environment requirements
      Browser versions
      Network
      Website domain protocol

      Step 1. Activate the service

      TUICallKit is an audio & video communication component built upon Tencent Cloud's paid PaaS services, Chat and Real-time Communication (TRTC) . In order for you to better experience the Call feature, we offer a 7-day free trial version for each SDKAppID (Note: no additional call duration is provided with the free trial version). Each SDKAppID can apply the free trial version twice, with each trial lasting for 7 days; at the same time, the total number of trial opportunities for all SDKAppID under one account (UIN) is 10.
      
      You can activate the Call free trial version in the Chat console, with the specific operation steps as follows:
      
      1. Log into the Chat console, select the data center, and create a new application. Skip this step if you already have an application.
      2. Click on the target application card to enter the application's basic configuration page.
      3. Locate the Call card, and click on "Free Trial".
      4. After confirming the content in the popup window, click on "Activate now". Once activated, you can proceed with integration according to this document.
      5. If you need to purchase the official version for your business to go live, you can proceed to the console to make the purchase. Please refer to Purchase Official Version.

      Step 2: Integrate TUICallKit

      Method 1: Integrate using npm

      Download the TUICallKit component using npm. In case you need to scale your business in the future, we recommend you copy TUICallKit to the src/components/ directory of your project.
      # macOS
      yarn add @tencentcloud/call-uikit-vue  # If you haven’t installed Yarn, execute `npm install -g yarn` first.
      mkdir -p ./src/components/TUICallKit/Web && cp -r ./node_modules/@tencentcloud/call-uikit-vue/* ./src/components/TUICallKit/Web
      
      # Windows
      yarn add @tencentcloud/call-uikit-vue  # If you haven’t installed Yarn, execute `npm install -g yarn` first.
      xcopy .\\node_modules\\@tencentcloud\\call-uikit-vue  .\\src\\components\\TUICallKit\\Web /i /e

      Method 2: Integrate the source code

      1. Download the TUICallKit source code from GitHub and copy the TUICallKit/Web folder to the src/components folder of your project.
      
      
      
      2. Go to the above folder and install the required dependencies.
      cd ./src/components/TUICallKit/Web 
      yarn         # If you haven’t installed Yarn, execute `npm install -g yarn` first.

      Step 3. Call TUICallKit

      Call TUICallKit on a page to show the call view.
      1. Import the UI. Below is an example:
      <script lang="ts" setup>
      import { TUICallKit } from "./components/TUICallKit/Web";
      </script>
      
      <template>
        <TUICallKit />
      </template>
      2. Log in and make a call.
      2.1 If you are already using a TUIKit component, add the code below to declare TUICallKit as a plugin. If you are not already using a TUIKit component, skip this.
      import { TUICallKit } from './components/TUICallKit/Web';
      TUIKit.use(TUICallKit);
      2.2 Initialize the component before making a call.
      import { TUICallKitServer } from './components/TUICallKit/Web';
      TUICallKitServer.init({ SDKAppID, userID, userSig });
      Note
      If you use Vite to start your project, you also need to perform these steps.
      For how to get the SDKAppID and SecretKey, see step 1. As a temporary method, you can use genTestUserSig(userID) in GenerateTestUserSig.js to generate userSig:
      import * as GenerateTestUserSig from "./components/TUICallKit/Web/demos/basic/public/debug/GenerateTestUserSig.js";
      const { userSig } = GenerateTestUserSig.genTestUserSig(userID, SDKAppID, SecretKey);
      
      Caution
      In this document, the method to obtain UserSig is to configure a SECRETKEY in the client code. In this method, the SECRETKEY is vulnerable to decompilation and reverse engineering. Once your SECRETKEY is disclosed, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for locally running and debugging a demo project. The correct UserSig distribution method is to integrate the calculation code of UserSig into your server and provide an application-oriented API. When UserSig is needed, your application can send a request to your server for a dynamic UserSig. For more information, see Generating UserSig.
      2.3 Run the following code where call making needs to be implemented:
      import { TUICallKitServer } from './components/TUICallKit/Web';
      TUICallKitServer.call({ userID: "123", type: 2 }); // One-to-one call
      TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // Group call
      You can now make your first call. For information on API parameters, see API Documentation.
      3. Advanced APIs
      TUICallKit offers the beforeCalling and afterCalling callbacks to send you notifications about call status.
      beforeCalling: Returned before a call.
      afterCalling: Returned after a call.
      For example, you can use them to expand and collapse the <TUICallKit /> component (as shown in the demo).
      function beforeCalling() {
        console.log("This is executed before a call.");
      }
      function afterCalling() {
        console.log("This is executed after a call.");
      }
      <TUICallKit :beforeCalling="beforeCalling" :afterCalling="afterCalling"/>
      TUICallKit
      TUICallKit basic demo
      UI Customization (TUICallKit)
      FAQs (Web)

      FAQs

      1. How do I generate a UserSig?

      The correct UserSig distribution method is to integrate the calculation code of UserSig into your server and provide a project-oriented API. When UserSig is needed, your project can send a request to your server for a dynamic UserSig. For more information, see Generating UserSig.

      2. Vite import

      If you created your project using Vite, because Vite uses a different file packaging method, you need to import lib-generate-test-usersig.min.js in index.html.
      // index.html
      <script src="./src/components/TUICallKit/Web/demos/basic/public/debug/lib-generate-test-usersig.min.js"> </script>
      Comment out the import method in GenerateTestUserSig.js.
      // import * as LibGenerateTestUserSig from './lib-generate-test-usersig.min.js'

      3. Environment requirements

      Browser versions

      We recommend you use the latest version of Chrome. The table below shows the support for TUICallKit by mainstream browsers:
      OS
      Browser
      Minimum Browser Version Requirement
      macOS
      Safari (desktop)
      11+
      macOS
      Chrome (desktop)
      56+
      macOS
      Firefox (desktop)
      56+
      macOS
      Edge (desktop)
      80+
      Windows
      Chrome (desktop)
      56+
      Windows
      QQ Browser (desktop, WebKit core)
      10.4+
      Windows
      Firefox (desktop)
      56+
      Windows
      Edge (desktop)
      80+
      
      Note
      For more information on browser compatibility, see Browsers Supported. You can also run an online test using the TRTC compatibility check page.

      Network

      Audio/Video calls may fail due to firewall restrictions. To avoid this, add the ports and domain names used by TUICallKit to your firewall’s allowlist.

      Website domain protocol

      For security and privacy reasons, only HTTPS URLs can access all features of the component. Please use the HTTPS protocol for your website in production environments.
      Scenario
      Protocol
      Receive (Playback)
      Send (Publish)
      Share Screen
      Remarks
      Production
      HTTPS
      Supported
      Supported
      Supported
      Recommended
      Production
      HTTP
      Supported
      Not supported
      Not supported
      -
      Local development
      http://localhost
      Supported
      Supported
      Supported
      Recommended
      Local development
      http://127.0.0.1
      Supported
      Supported
      Supported
      -
      Local development
      http://[local IP]
      Supported
      Not supported
      Not supported
      -
      Local development
      file:///
      Supported
      Supported
      Supported
      -
      
      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