实时音视频 Web-含 UI 集成方案-文档中心-腾讯云

说明：
我们团队即将在 Web 端丰富更多不同的组件，以满足您的开发需求。
希望您能抽出几分钟时间，为您自己的需求投上一票，我们将优先开发！
问卷地址：TUICallKit Web 问卷调查﻿
TUICallKit Web 是腾讯云推出的音视频通话 UI 组件，通过编写几行代码，就可以为您的 Web 应用添加音视频通话功能。
视频通话
语音通话
﻿
﻿
﻿
﻿
﻿
﻿
Demo
在接入前，您可以访问在线 Demo 1v1音视频通话体验馆 体验通话效果。
如果想要跑通一个新工程，还可以直接阅读 Vue3 Demo 快速跑通 或者 Vue2 Demo 快速跑通。
API 文档
TUICallKit API 文档请参见 TUICallKit API。
安装
注意：
如果您的工程同时使用了 TUIChat UIKit，请直接移步 TUIKit 接入音视频通话 进行接入。
Vue3
Vue2
npm install @tencentcloud/call-uikit-vue
npm install @tencentcloud/call-uikit-vue2
基础使用
概念解释
<TUICallKit/> 是音视频通话的 UI 部分，负责展示通话组件，需要将其放置在页面代码中，不在通话状态时显示空内容，如：
<script setup>
import { TUICallKit } from "@tencentcloud/call-uikit-vue";
<script>
﻿
<template>
  <TUICallKit />
</template>
TUICallKitServer 是通话状态实例，负责初始化组件和拨打电话等操作，大多数情况下由用户的操作触发，如：
<script setup>
import { TUICallKitServer } from "@tencentcloud/call-uikit-vue";
﻿
async function init() {
  try {
    await TUICallKitServer.init({ SDKAppID, userID, userSig }); // 关于初始化所需参数，请查看下方完整的示例代码
    alert("初始化完成");
  } catch (error) {
    alert(`初始化失败，原因：${error}`);
  }
}
<script>
﻿
<template>
    <button @click="init()"> 步骤 1: 初始化 </button>
</template>
基础示例代码
1. 请修改下面示例代码中的必要信息，确保正常运行。
SDKAppID：在腾讯云创建的音视频应用 SDKAppID，参考 开通服务。
userID：用户 ID，由您指定，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。
userSig：用户签名，参考 获取临时 userSig，或者 部署 userSig 签发服务。
callUserID：想要呼叫的 userID，需要已存在，参考文章尾部 常见问题 - 创建 userID。
2. 参考以下示例代码：
示例代码1（Vue3 + TypeScript + Composition API）
示例代码2（Vue2 + JavaScript + Options API）
<script lang="ts" setup>
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
﻿
// 以下 4 个变量需要在运行前修改
const SDKAppID = 0; 
const userID = "";
const userSig = "";
const callUserID = "";
﻿
async function init() {
  try {
    await TUICallKitServer.init({ SDKAppID, userID, userSig });
    // await TUICallKitServer.init({ tim, SDKAppID, userID, userSig}); // 如果工程中已有 tim 实例，需在此处传入
    alert("初始化完成");
  } catch (error: any) {
    alert(`初始化失败，原因：${error}`);
  }
}
﻿
async function call() {
  try {
    await TUICallKitServer.call({ userID: callUserID, type: TUICallType.VIDEO_CALL }); // 1v1 通话
    // TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // 群组通话
  } catch (error: any) {
    alert(`拨打失败，原因：${error}`);
  }
}
</script>
  
<template>
  <div>
    <button @click="init()"> 步骤 1: 初始化 </button>
    <button @click="call()"> 步骤 2: 发起视频通话 </button>
    <div style="width: 50rem; height: 35rem; border: 1px solid salmon;"> 
      <TUICallKit />  <!-- 组件默认显示空内容，进入通话后自动显示 -->
    </div>
  </div>
</template>
<template>
  <div>
    <button @click="init()"> 步骤 1: 初始化 </button>
    <button @click="call()"> 步骤 2: 发起视频通话 </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: 0,
      userID: '',
      userSig: '',
      callUserID: '',
    };
  },
  components: {
    TUICallKit
  },
  methods: {
    async init() {
      try {
        await TUICallKitServer.init({
          SDKAppID: this.SDKAppID,
          userID: this.userID,
          userSig: this.userSig
          // tim: this.tim // 如果工程中已有 tim 实例，需在此处传入
        });
        alert("初始化完成");
      } catch (error) {
        alert(`初始化失败，原因：${error}`);
      }
    },
    async call() {
      try {
        // 1v1 通话
        await TUICallKitServer.call({
          userID: this.callUserID,
          type: TUICallType.VIDEO_CALL
        });
        // 群组通话
        // TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: TUICallType.VIDEO_CALL }); 
      } catch (error) {
        alert(`拨打失败，原因：${error}`);
      }
    }
  },
}
</script>
详细接口使用请参考 TUICallKit 接口文档。
进阶使用
本组件提供了通话状态回调，可以用于业务侧实现更多交互逻辑。
beforeCalling: 通话前会执行
afterCalling: 通话后执行
onMinimized: 组件切换最小化后会执行
本组件提供了若干个功能开关，可以根据需要选择开启或关闭。
allowedMinimized: 是否允许最小化
allowedFullScreen: 是否允许全屏
videoDisplayMode: 画面显示模式
videoResolution: 通话分辨率
完整示例代码1（Vue3 + TypeScript + Composition API）
完整示例代码2（Vue2 + JavaScript + Options API）
<script lang="ts" setup>
import { TUICallKit, TUICallKitServer, TUICallType, VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue";
﻿
// 以下 4 个变量需要在运行前修改
const SDKAppID = 0; 
const userID = "";
const userSig = "";
const callUserID = "";
﻿
async function init() {
  try {
    await TUICallKitServer.init({ SDKAppID, userID, userSig });
    // await TUICallKitServer.init({ tim, SDKAppID, userID, userSig}); // 如果工程中已有 tim 实例，需在此处传入
    alert("初始化完成");
  } catch (error: any) {
    alert(`初始化失败，原因：${error}`);
  }
}
﻿
async function call() {
  try {
    await TUICallKitServer.call({ userID: callUserID, type: TUICallType.VIDEO_CALL }); // 1v1 通话
    // TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // 群组通话
  } catch (error: any) {
    alert(`拨打失败，原因：${error}`);
  }
}
﻿
function beforeCalling(type: string, error: any) {
  console.log("通话即将开始", type, error);
}
﻿
function afterCalling() {
  console.log("通话已结束");
}
﻿
function onMinimized(oldStatus: string, newStatus: string) {
  console.log("最小化状态变更: " + oldStatus + " -> " + newStatus);
}
﻿
</script>
  
<template>
  <div>
    <button @click="init()"> init </button>
    <button @click="call()"> 发起视频通话 </button>
    <div style="width: 50rem; height: 35rem; border: 1px solid salmon;"> 
      <TUICallKit
        :beforeCalling="beforeCalling"
        :afterCalling="afterCalling"
        :onMinimized="onMinimized"
        :allowedMinimized="true"
        :allowedFullScreen="true"
        :videoDisplayMode="VideoDisplayMode.CONTAIN"
        :videoResolution="VideoResolution.RESOLUTION_1080P"
      />
    </div>
  </div>
</template>
<template>
  <div>
    <button @click="init()"> 步骤 1: 初始化 </button>
    <button @click="call()"> 步骤 2: 发起视频通话 </button>
    <div style="width: 50rem; height: 35rem; border: 1px solid salmon;">
      <TUICallKit 
        :beforeCalling="beforeCalling" 
        :afterCalling="afterCalling" 
        :onMinimized="onMinimized"
        :allowedMinimized="true" 
        :allowedFullScreen="true" 
        :videoDisplayMode="VideoDisplayMode.CONTAIN"
        :videoResolution="VideoResolution.RESOLUTION_1080P" 
      />
    </div>
  </div>
</template>
﻿
<script>
import { TUICallKit, TUICallKitServer, TUICallType, VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue2";
﻿
export default {
  name: 'App',
  data() {
    return {
      SDKAppID: 0,
      userID: '',
      userSig: '',
      callUserID: '',
      VideoDisplayMode,
      VideoResolution
    };
  },
  components: {
    TUICallKit
  },
  methods: {
    async init() {
      try {
        await TUICallKitServer.init({
          SDKAppID: this.SDKAppID,
          userID: this.userID,
          userSig: this.userSig
          // tim: this.tim // 如果工程中已有 tim 实例，需在此处传入
        });
        alert("初始化完成");
      } catch (error) {
        alert(`初始化失败，原因：${error}`);
      }
    },
    async call() {
      try {
        // 1v1 通话
        await TUICallKitServer.call({
          userID: this.callUserID,
          type: TUICallType.VIDEO_CALL
        });
        // 群组通话
        // TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: TUICallType.VIDEO_CALL }); 
      } catch (error) {
        alert(`拨打失败，原因：${error}`);
      }
    },
    beforeCalling(type, error) {
      console.log("通话即将开始", type, error);
    },
    afterCalling() {
      console.log("通话已结束");
    },
    onMinimized(oldStatus, newStatus) {
      console.log("最小化状态变更: " + oldStatus + " -> " + newStatus);
    }
  },
}
</script>
详细接口使用请参考 TUICallKit 接口文档。
其他文档
﻿TUICallKit API﻿
﻿TUICallKit Vue3 Demo 快速跑通、Vue2 Demo 快速跑通﻿
﻿TUICallKit 界面定制指引﻿
﻿TUICallKit (Web) 常见问题﻿
欢迎加入 QQ 群：646165204，进行技术交流和反馈~
常见问题
1. 如何生成 UserSig？
UserSig 是腾讯云为其云服务设计的一种安全保护签名，是一种登录凭证，由 SDKAppID 与 SecretKey 等信息组合加密得到。
方式一：控制台获取，参考 获取临时 userSig﻿
方式二：部署临时生成脚本
警告：
此方式是在前端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试，生产环境请看方式三。
为方便初期调试，userSig 可临时使用 GenerateTestUserSig.js 中 genTestUserSig(params) 函数来计算 ，例如：
import { genTestUserSig } from "@tencentcloud/call-uikit-vue/debug/GenerateTestUserSig-es.js";
const { userSig } = genTestUserSig({ userID: "Alice", SDKAppID: 0, SecretKey: "YOUT_SECRETKEY" });
此生成脚本是 JavaScript 版本，可以在 TypeScript 项目中增加类型说明，如在 src/index.d.ts（此文件需要被包含在 tsconfig.json 的 includes 字段中）中增加：
declare module "@tencentcloud/call-uikit-vue/debug/GenerateTestUserSig-es.js" {
    interface generateParams {
        SDKAppID: number;
        userID: string;
        SecretKey: string;
    }
    interface generateResult {
        userSig: string;
        SDKAppID: number;
    }
    declare function genTestUserSig(params: generateParams): generateResult;
    export { genTestUserSig }
}
方式三：正式环境使用
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
2. 如何创建 userID？
通过 userID 与 userSig 登录过一次，会默认创建该用户。
还可以通过 即时通信 IM 控制台 进行创建和获取，单击目标应用卡片，进入应用的账号管理页面，即可创建账号并获取 userID。例如：
﻿
﻿
﻿
3. 如何获得 SDKAppID 与 SecretKey？
TUICallKit（含 TUICallEngine SDK）是基于腾讯云 即时通信 IM 和 实时音视频 TRTC 两项付费 PaaS 服务构建出的音视频通信组件。您可以按照如下步骤开通相关的服务并体验 7 天的免费试用服务：
1. 登录到 即时通信 IM 控制台，单击创建新应用，在弹出的对话框中输入您的应用名称，并单击确定。
﻿
﻿
﻿
2. 单击刚刚创建出的应用，进入基本配置页面，并在页面的右下角找到开通腾讯实时音视频服务功能区，单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。
﻿
﻿
﻿
3. 在同一页面找到 SDKAppID 和 密钥(SecretKey) 并记录下来，它们会在如何生成 UserSig 中被用到。
﻿
﻿
﻿
注意：
单击 免费体验 以后，部分之前使用过 实时音视频 TRTC 服务的用户会提示：
TRTC service is suspended. Please check if the package balance is 0 or the Tencent Cloud accountis in arrears
因为新的 IM 音视频通话能力是整合了腾讯云 实时音视频 TRTC 和 即时通信 IM 两个基础的 PaaS 服务，所以当 实时音视频 TRTC 的免费额度（10000 分钟）已经过期或者耗尽，就会导致开通此项服务失败，这里您可以单击 TRTC 控制台，找到对应 SDKAppID 的应用管理页，示例如图，开通后付费功能后，再次 启用应用 即可正常体验音视频通话能力。
﻿
﻿
﻿
﻿
动态与公告

新手指引

产品简介

购买指南

Demo 体验

SDK 下载

含 UI 集成方案

无 UI 集成方案

高级功能

代码示例

客户端 API

服务端 API

控制台指南

常见问题

旧版文档

服务协议

联系我们

词汇表

Web

本页目录：

Demo

API 文档

安装

基础使用

概念解释

基础示例代码

进阶使用

其他文档

常见问题

1. 如何生成 UserSig？

2. 如何创建 userID？

3. 如何获得 SDKAppID 与 SecretKey？
