tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Real-Time Communication
    Documentation
    Download PDF

    Web

    Last updated: 2024-12-12 16:54:10
    Download PDF
      TUILiveKit is an online live streaming UI component launched by Tencent Cloud. This article will guide you on how to quickly integrate TUILiveKit Web side components into your projects to provide live streaming capabilities for your applications.
      
      
      
      
      
      

      Environment Preparation

      Node.js version: Node.js ≥ 16.19.1 (It is recommended to use the official LTS version, and the npm version should match the node version).
      Modern browser, supporting WebRTC APIs.

      Integrating TUILiveKit Component

      Note：
      If you do not currently have a Vue project, it is recommended that you go to Github to download the TUILiveKit Demo project, refer to the project README.md documentation to run the sample project, and add business logic according to your needs.
      If you need to integrate it into an existing project, please follow the steps below for integration.

      Step 1: Install Dependencies

      npm install @tencentcloud/livekit-web-vue3 pinia --save
      Note：
      If the functional style provided by the TUILiveKit npm package does not meet your business needs, you can refer to the LiveKit source export solution to access TUILiveKit source code.

      Step 2: Project Engineering Configuration

      Register Pinia: TUILive uses Pinia for room data management, and you need to register Pinia in the project entry file. The project entry file is src/main.ts.
      // src/main.ts
      import { createPinia } from 'pinia';
      
      const app = createApp(App);
      // register pinia
      app.use(createPinia()); 
      app.mount('#app')

      Step 3: Import the TUILiveKit component

      <template>
         <live-main-view></live-main-view>
      </template>
      
      <script setup>
      import { LiveMainView } from '@tencentcloud/livekit-web-vue3';
      </script>

      Step 4: Logging into the TUILiveKit Component

      Before starting live, you need to call the login interface to login. For details about how to obtain the sdkAppId, userId, and userSig, refer to the service activation.
      import { liveRoom } from '@tencentcloud/livekit-web-vue3';
      await liveRoom.login({    
        sdkAppId: 0,  // Replace with your sdkAppId
        userId: '',  // Replace with your userId
        userSig: '',  // Replace with your userSig
      });
      import { liveRoom } from '@tencentcloud/livekit-web-vue3';
      
      liveRoom.login({        
          sdkAppId: 0,   
          userId: '',
          userSig: '', 
      });
      Parameter Explanation:
      sdkAppId: Acquired in the final step of service activation.
      userId: The current user's ID, a string type, allowing only English letters (a-z, A-Z), numbers (0-9), hyphens (-), and underscores (_).
      userSig: Obtained by encrypting information such as SDKAppID and UserID with the SDKSecretKey retrieved during service activation. UserSig is an authentication ticket used by Tencent Cloud to verify if the current user can access TRTC services.You can generate a temporarily available UserSig through the Auxiliary Tool in the console.
      For more information, refer to the guide on How to Calculate and Utilize UserSig.
      Note:
      This step is also the step that we have received the most feedback from developers so far. Frequently asked questions are as follows:
      The sdkAppId setting is wrong. The SDKAppID of domestic sites is generally a 10-digit integer starting with 140.
      UserSig was mismatched to the encryption key (SecretKey). UserSig is obtained by using SecretKey to encrypt information such as SDKAppID, UserID, and expiration time, instead of directly configuring SecretKey to UserSig.
      userId is set to simple strings such as "1", "123", "111", etc. Since TRTC does not support multi-terminal login with the same UserID, when multiple people collaborate in development, the form is like "1", "123", "111" such a UserID can easily be occupied by your colleagues, causing login failure. Therefore, we recommend that you set some highly identifiable UserIDs during debugging.
      The sample code in Github uses the genTestUserSig function to calculate UserSig locally to allow you to run through the current access process faster, but this solution will expose your SecretKey in the code, which is not conducive to your subsequent upgrades and protection. Your SecretKey, so we strongly recommend that you put the calculation logic of UserSig on the server side, and request the real-time calculated UserSig from your server every time you use the TUILiveKit component.

      Step 5: Start a new Live

      The anchor can start the live by calling the start interface, and the audience can call the join interface to join the live room.
      import { liveRoom } from '@tencentcloud/livekit-web-vue3';
      
      const startLive = async () => {
          await liveRoom.login({    
              sdkAppId: 0,
              userId: '',
              userSig: '', 
          });
          await liveRoom.start('123456', {
            roomName: 'TestRoom',
            isOpenCamera: false,
            isOpenMicrophone: false,
          });
      }
      startLive()

      Step 6: Join a Live

      The audience can join the live room created by the anchor in Step 5 by calling the Join interface and filling in the corresponding roomId parameter.
      import { liveRoom } from '@tencentcloud/livekit-web-vue3';
      
      const joinLive = async () => {
          await liveRoom.login({    
              sdkAppId: 0,
              userId: '',
              userSig: '', 
          });
          await liveRoom.join('123456', {
            isOpenCamera: false,
            isOpenMicrophone: false,
          });
      }
      joinLive()

      Development environment running

      1. Execute development environment commands. (Here, the vue3 + vite default project is taken as an example, different project dev instructions may be different, please adjust according to your own project)
        npm run dev
      2. According to the console prompts, open the page in the browser.
      3. Experience the TUILiveKit component functions.

      Production environment deployment

      1. Package the dist file.
        npm run build
      2. Deploy the dist file to the server.
      Note:
      The production environment requires the use of an HTTPS domain name.

      Other documents

      Describes the TUILiveKit components
      TUILiveKit service activation
      TUILiveKit Web quickly runs through Demo

      Communication and feedback

      If you have any needs 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-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy