tencent cloud

文档反馈

Web&H5 (Vue3)

最后更新时间:2024-05-27 15:05:59
    本文将介绍如何快速完成 TUICallKit 组件的接入,您将在10分钟内完成以下几个关键步骤,并最终得到一个包含完备 UI 界面的视频通话功能。
    
    
    

    TUICallKit Demo 体验

    如果您想要直接体验音视频通话,点击体验 Tencent RTC Demo
    如果您想要直接跑通一个新工程,请直接阅读 跑通 Demo

    环境准备

    Node.js 版本:Node.js ≥ 12.13.0(推荐使用官方 LTS 版本,npm 版本请与 node 版本匹配)。
    Modern browser, supporting WebRTC APIs.

    步骤一:开通服务

    请参考开通服务,获取 SDKAppID、SDKSecretKey,他们将在步骤四:初始化 TUICallKit 组件作为必填参数使用。

    步骤二:创建 Vue3 项目

    1. 如果您尚未安装 vue-cli ,可以在 terminal 或 cmd 中采用如下方式进行安装。如果遇到安装问题,详见常见问题
    npm install -g @vue/cli
    2. 通过 vue-cli 创建项目,并选择下图中所选配置项。
    vue create callkit-demo
    
    
    
    3. 创建完成项目,切换到项目所在目录。
    cd callkit-demo

    步骤三:下载 TUICallKit 组件

    1. 下载 @tencentcloud/call-uikit-vue 组件。
    npm install @tencentcloud/call-uikit-vue
    2. debug 目录复制到您的项目目录 callkit-demo/src,本地生成 userSig 时需要使用。
    MacOS
    Windows
    cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src
    xcopy node_modules\\@tencentcloud\\call-uikit-vue\\debug .\\src\\debug /i /e

    步骤四:初始化 TUICallKit 组件

    您可以选择在 callkit-demo/src/App.vue 文件引入示例代码,示例代码采用的是 Composition API 写法。
    1. 调用 TUICallKitServer.init API 登录组件,需要在代码中填写 SDKAppID、SDKSecretKey 两个参数。
    <script setup>
    import { ref } from 'vue';
    import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
    import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 3
    
    const SDKAppID = 0; // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number)
    const SDKSecretKey = ''; // TODO: Replace with your SDKSecretKey
    
    const callerUserID = ref('');
    const calleeUserID = ref('');
    
    //【1】Initialize the TUICallKit component
    const init = async () => {
    const { userSig } = GenerateTestUserSig.genTestUserSig({
    userID: callerUserID.value,
    SDKAppID,
    SecretKey: SDKSecretKey
    });
    await TUICallKitServer.init({
    userID: callerUserID.value,
    userSig,
    SDKAppID,
    });
    alert('TUICallKit init succeed');
    }
    </script>
    参数
    类型
    说明
    userID
    String
    自定义用户 ID,只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。
    SDKAppID
    Number
    Tencent RTC 控制台 创建的音视频应用的唯一标识。
    SDKSecretKey
    String
    Tencent RTC 控制台 创建的音视频应用的 SDKSecretKey。
    userSig
    String
    一种安全保护签名,用于对用户进行登录鉴权认证,确认用户是否真实,阻止恶意攻击者盗用您的云服务使用权。
    userSig 说明:
    开发环境:如果您正在本地跑通 Demo、开发调试,可以采用 debug 文件中的 GenerateTestUserSig.genTestUserSig函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量。
    生产环境:如果您的项目要发布上线,请采用 服务端生成 UserSig 的方式。
    2. 引入TUICallKit 组件,该组件包含通话时的完整 UI 交互。
    <template>
    <span> caller's ID: </span>
    <input type="text" v-model="callerUserID">
    <button @click="init"> step1. init </button> <br>
    <span> callee's ID: </span>
    <input type="text" v-model="calleeUserID">
    <button @click="call"> step2. call </button>
    <!--2】Import the TUICallKit component: Call interface UI -->
    <TUICallKit style="width: 650px; height: 500px " />
    </template>

    步骤五:拨打您的第一通电话

    1. 调用 TUICallKitServer.call API 拨打通话。
    //【3】Make a 1v1 video call
    const call = async () => {
    await TUICallKitServer.call({
    userID: calleeUserID.value,
    type: TUICallType.VIDEO_CALL,
    });
    };
    2. 输入 npm run serve / npm run dev 运行项目。
    警告:
    本地环境请在 localhost 协议下访问,公网体验请在 HTTPS 协议下访问,具体参见 网络访问协议说明
    3. 打开两个浏览器页面,输入不同的 userID 登录(主叫方和被叫方),两个 userID 都登录成功后,点击 step2. call 拨打通话。
    
    
    

    更多特性

    悬浮窗

    常见问题

    如果您的接入和使用中遇到问题,请参见 常见问题

    技术咨询

    如果有任何需要或者反馈,您可以联系:info_rtc@tencent.com 。
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持