tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Real-Time Communication
    Documentation
    Download PDF

    Vue

    Last updated: 2025-01-16 15:15:37
    Download PDF
      By integrating Chat and CallKit, you can achieve the following effects. Click Try It Online.
      

      Environment Requirements

      TypeScript
      Sass (The version of sass-loader should be ≤ 10.1.1)
      node（node.js ≥ 16.0.0）
      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

      As follows: Import <TUICallKit /> where <TUIKit /> is imported.
      <template>
        <div id="app">
          <TUIKit :SDKAppID="YOUR_SDKAPPID" userID="YOUR_USERID" userSig="YOUR_USERSIG" />
          <TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" />
        </div>
      </template>
      <script lang="ts" setup>
      import { TUIKit } from './TUIKit';
      import { TUICallKit } from '@tencentcloud/call-uikit-vue';
      </script>
      <style lang="scss">
      </style>

      Step 5: Launching the Project

      vite
      webpack
      npm run dev
      npm run serve

      Step 6: Sending Your First Message

      As shown in the figure, you can send messages to and from your friends.
      

      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.
      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-2025 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy