Web&H5(Vue2/Vue3)

最近更新时间：2024-04-03 15:47:11
我的收藏
本页目录：

本文将介绍如何快速完成 TUICallKit 组件的接入，您将在10分钟内完成以下几个关键步骤，并最终得到一个包含完备 UI 界面的视频通话功能。
桌面端
移动端
视频通话
语音通话
﻿
﻿
﻿
﻿
﻿
﻿
单人通话
群组通话
﻿
﻿
﻿
﻿
﻿
﻿
TUICallKit Demo 体验
如果您想要直接体验音视频通话，进入 Demo 体验页面，点击 Web 卡片。
如果您想要直接跑通一个新工程，请直接阅读 Web Demo 快速跑通。
环境准备
Node.js 版本：Node.js ≥ 12.13.0（推荐使用官方 LTS 版本，npm 版本请与 node 版本匹配）。
Modern browser, supporting WebRTC APIs.
npm 包集成
Vue3 开发环境，集成 @tencentcloud/call-uikit-vue NPM 包。
Vue2.7 开发环境：集成 @tencentcloud/call-uikit-vue2 NPM 包。
Vue2.6 开发环境：集成 @tencentcloud/call-uikit-vue2.6 + @vue/composition-api NPM 包。
源码集成
Vue3 + TypeScript 开发环境：从 @tencentcloud/call-uikit-vue NPM 包拷贝源码。
Vue2.7 + TypeScript 开发环境：从 @tencentcloud/call-uikit-vue2 NPM 包拷贝源码。
Vue2.6 + TypeScript 开发环境：从 @tencentcloud/call-uikit-vue2.6 NPM 包拷贝源码。
需要：Vue2.6 + unplugin-vue2-script-setup + @vue/composition-api 。
注意：
1. HBuilderX 中选择 vue2 时，使用的是 vue2.6，因此需要使用：@tencentcloud/call-uikit-vue2.6。
2. HBuilderX 中选择 vue3 时，使用的是 vue3，因此需要使用：@tencentcloud/call-uikit-vue。
步骤一：开通服务
在使用腾讯云提供的音视频服务前，您需要前往控制台，为应用开通音视频服务。具体步骤请参见 开通服务。﻿
步骤二：创建 Vue3 项目
1. 如果您尚未安装 vue-cli ，可以在 terminal 或 cmd 中采用如下方式进行安装：
npm install -g @vue/cli
2. 通过 vue-cli 创建项目，并选择下图中所选配置项。
vue create tuicallkit-demo
﻿
﻿
﻿
3. 创建完成项目，切换到项目所在目录。
cd tuicallkit-demo
步骤三：下载 TUICallKit 组件
推荐使用 NPM 集成，如果您需要采用源码集成，请参见 TUICallKit 源码集成。
说明：如果您的工程同时使用了 TUIChat UIKit，请直接移步 TUIKit 接入音视频通话 进行接入。
1. 通过 npm 方式下载 @tencentcloud/call-uikit-vue 组件并在项目中使用。
Vue3
Vue2.7
Vue2.6
npm install @tencentcloud/call-uikit-vue
npm install @tencentcloud/call-uikit-vue2
npm install @tencentcloud/call-uikit-vue2.6 @vue/composition-api 
如果是源码集成还需要安装 unplugin-vue2-script-setup。
npm i -D unplugin-vue2-script-setup
2. 将 debug 目录复制到您的项目。
Vue3
Vue2.7
Vue2.6
MacOS 端
Windows 端
cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src
xcopy node_modules\\@tencentcloud\\call-uikit-vue\\debug .\\src\\debug /i /e
MacOS 端
Windows 端
cp -r node_modules/@tencentcloud/call-uikit-vue2/debug ./src
xcopy node_modules\\@tencentcloud\\call-uikit-vue2\\debug .\\src /i /e
﻿
MacOS 端
Windows 端
cp -r node_modules/@tencentcloud/call-uikit-vue2.6/debug ./src
xcopy node_modules\\@tencentcloud\\call-uikit-vue2.6\\debug .\\src /i /e
﻿
步骤四：引入 TUICallKit 组件
1. 如下代码示例中的 SDKAppID、SecretKey 、userID、callUserID 四个参数。
SDKAppID：在腾讯云创建的音视频应用 SDKAppID，参见 开通服务。
SecretKey：用户签名，参见 开通服务。
userID：主叫的 userID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。
callUserID：被叫的 userID，需要已初始化存在。(demo 中的 callUserID，当有被叫时输入，无被叫可以不输入)。
2. 在 tuicallkit-demo/src/App.vue 中引入下面代码。
说明：TUICallKit 组件需要放到一个 dom 节点里，用于显示并控制 TUICallKit 的位置、宽高等样式。
Vue3
Vue2.7
Vue2.6
将下面代码直接复制引用在 App.vue 文件中。
<template>
<template>
  <div style="padding: 20px 0 0 20px">
    <div><span>userID：</span><input type="text" v-model="userID" /></div>
    <div style="margin-top: 6px;"><span>callUserID：</span><input type="text" v-model="callUserID" /></div>
    <button @click="init()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 1: Initialization </button>
    <button @click="call()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 2: Start 1v1 video call </button>
    <div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
      <TUICallKit />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";
﻿
const userID = ref('');     
const callUserID = ref(''); 
const SDKAppID = 0;       // Replace with your SDKAppID
const SecretKey = '';     // Replace with your SecretKey
﻿
async function init() {
  try {
    const { userSig } = GenerateTestUserSig.genTestUserSig({
      userID: userID.value,
      SDKAppID: SDKAppID,
      SecretKey: SecretKey,
    });
    await TUICallKitServer.init({  //【1】Initialize the TUICallKit component
      SDKAppID, 
      userID: userID.value, 
      userSig,
    });
    alert("[TUICallKit] Initialization success.");
  } catch (error: any) {
    alert(`[TUICallKit] Initialization failed. Reason: ${error}`);
  }
}
async function call() {  //【2】Make a 1v1 video call
  try {
    await TUICallKitServer.call({ userID: callUserID.value, type: TUICallType.VIDEO_CALL });
  } catch (error: any) {
    alert(`[TUICallKit] Call failed. Reason: ${error}`);
  }
}
</script>
将下面代码直接复制引用在 App.vue 文件中。
<template>
<template>
  <div style="padding: 20px 0 0 20px">
    <div><span>userID：</span><input type="text" v-model="userID" /></div>
    <div style="margin-top: 6px;"><span>callUserID：</span><input type="text" v-model="callUserID" /></div>
    <button @click="init()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 1: Initialization </button>
    <button @click="call()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 2: Start 1v1 video call </button>
    <div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
      <TUICallKit />
    </div>
  </div>
</template>
<script>
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue2";
﻿
export default {
  name: 'App',
  data() {
    return {
      // SDKAppID、userSig 的获取参考下面步骤
      userID: '',     // 主叫的 userID
      callUserID: '', // 被叫的 userID
      SDKAppID: 0,    // Replace with your SDKAppID
      SecretKey: '',  // Replace with your SecretKey
    };
  },
  components: {
    TUICallKit
  },
  methods: {
    async init() {
      try {
        const { userSig } = GenerateTestUserSig.genTestUserSig({
          userID: this.userID,
          SDKAppID: Number(this.SDKAppID),
          SecretKey: this.SecretKey,
        });
        // 初始化
        await TUICallKitServer.init({
          SDKAppID: Number(this.SDKAppID),
          userID: this.userID,
          userSig,
          // tim: this.tim     // 如果工程中已有 tim 实例，需在此处传入
        });
        alert("[TUICallKit] Initialization succeeds.");
      } catch (error) {
        alert(`[TUICallKit] Initialization failed. Reason: ${error}`);
      }
    },
    async call() {
      try {
        // 1v1 video call
        await TUICallKitServer.call({ userID: this.callUserID, type: TUICallType.VIDEO_CALL });
      } catch (error) {
        alert(`[TUICallKit] Call failed. Reason: ${error}`);
      }
    }
  },
}
</script>
1. main.ts 文件注册 @vue/composition-api 。
main.ts
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
2. 将下面代码直接复制引用在 App.vue 文件中。
<template>
<template>
  <div style="padding: 20px 0 0 20px">
    <div><span>userID：</span><input type="text" v-model="userID" /></div>
    <div style="margin-top: 6px;"><span>callUserID：</span><input type="text" v-model="callUserID" /></div>
    <button @click="init()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 1: Initialization </button>
    <button @click="call()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 2: Start 1v1 video call </button>
    <div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
      <TUICallKit />
    </div>
  </div>
</template>
<script>
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue2.6";
﻿
export default {
  name: 'App',
  data() {
    return {
      // SDKAppID、userSig 的获取参考下面步骤
      userID: '',     // 主叫的 userID
      callUserID: '', // 被叫的 userID
      SDKAppID: 0,    // Replace with your SDKAppID
      SecretKey: '',  // Replace with your SecretKey
    };
  },
  components: {
    TUICallKit
  },
  methods: {
    async init() {
      try {
        const { userSig } = GenerateTestUserSig.genTestUserSig({
          userID: this.userID,
          SDKAppID: Number(this.SDKAppID),
          SecretKey: this.SecretKey,
        });
        await TUICallKitServer.init({
          SDKAppID: Number(this.SDKAppID),
          userID: this.userID,
          userSig,
          // tim: this.tim     // 如果工程中已有 tim 实例，需在此处传入
        });
        alert("[TUICallKit] Initialization succeeds.");
      } catch (error) {
        alert(`[TUICallKit] Initialization failed. Reason: ${error}`);
      }
    },
    async call() {
      try {
        // 1v1 video call
        await TUICallKitServer.call({ userID: this.callUserID, type: TUICallType.VIDEO_CALL });
      } catch (error) {
        alert(`[TUICallKit] Call failed. Reason: ${error}`);
      }
    }
  },
}
</script>
步骤五：拨打您的第一通电话
1. 在终端输 npm run serve 运行 tuicallkit-demo。
警告：本地环境请在 localhost 协议下访问，具体参见 网络访问协议说明。
2. 点击 Step 1: Initialization Button，弹出 Initialization success 表示初始化成功。
﻿
﻿
﻿
3. 点击 Step 2: Start 1v1 video call 发起 1v1 视频通话，具体效果如下图所示。
﻿
﻿
﻿
更多特性
﻿设置昵称、头像﻿
﻿群组通话﻿
﻿悬浮窗﻿
﻿自定义铃声﻿
﻿监听通话状态、组件回调事件﻿
﻿设置分辨率、填充模式﻿
﻿界面定制﻿
常见问题
如果您的接入和使用中遇到问题，请参见 常见问题。
技术咨询
了解更多详情，请到 腾讯云通信官方社群 进行咨询和反馈。
上一篇: iOS 下一篇: uni-app（小程序）