腾讯云音视频通话SDKWeb_音视频解决方案_同尘科技

说明：我们团队即将在 Web 端丰富更多不同的组件，以满足您的开发需求。希望您能抽出几分钟时间，为您自己的需求投上一票，我们将优先开发。问卷地址：TUICallKit Web 问卷调查。TUICallKit Web 是腾讯云推出的音视频通话 UI 组件，通过编写几行代码，就可以为您的 Web 应用添加音视频通话功能。

视频通话	语音通话
	

Demo

在接入前，您可以访问在线 Demo 1v1音视频通话体验馆 体验通话效果。如果想要跑通一个新工程，还可以直接阅读 Vue3 Demo 快速跑通 或者 Vue2 Demo 快速跑通。

API 文档

TUICallKit API 文档请参见 TUICallKit API。

安装

注意：注意：如果您的工程同时使用了 TUIChat UIKit，请直接移步 TUIKit 接入音视频通话 进行接入。Vue3Vue2

npm install @tencentcloud/call-uikit-vue

npm install @tencentcloud/call-uikit-vue2

基础使用

概念解释

是音视频通话的 UI 部分，负责展示通话组件，需要将其放置在页面代码中，不在通话状态时显示空内容，如：

import { TUICallKit } from "@tencentcloud/call-uikit-vue";
  

TUICallKitServer 是通话状态实例，负责初始化组件和拨打电话等操作，大多数情况下由用户的操作触发，如：

import { TUICallKitServer } from "@tencentcloud/call-uikit-vue";
async function init() {  try {    await TUICallKitServer.init({ SDKAppID, userID, userSig }); // 关于初始化所需参数，请查看下方基础示例代码    alert("初始化完成");  } catch (error) {    alert(`初始化失败，原因：${error}`);  }}
     步骤 1: 初始化 

基础示例代码

1. 请修改下面示例代码中的必要信息，确保正常运行。SDKAppID：在腾讯云创建的音视频应用 SDKAppID，参考 开通服务。userID：用户 ID，由您指定，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。userSig：用户签名，参考 如何生成 userSig。callUserID：想要呼叫的 userID，需要已存在，参考文章尾部 常见问题 – 创建 userID。2. 参考以下示例代码：示例代码1（Vue3 + TypeScript + Composition API）示例代码2（Vue2 + JavaScript + Options API）

  
     init      发起视频通话     
      
自动接听等特性
       accept        reject        hangup     
    
          
  

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);}
function handleKickedOut() {  console.error("The user has been kicked out");}
function handleStatusChanged(args: { oldStatus: string; newStatus: string; }) {  const { oldStatus, newStatus } = args;  console.log("通话状态变更: " + oldStatus + " -> " + newStatus);}
async function accept() {  try {    await TUICallKitServer.accept();    alert("已自动接听");  } catch (error) {    alert(`自动接听失败，原因：${error}`);  }}
async function reject() {  try {    await TUICallKitServer.reject();    alert("已自动拒绝");  } catch (error) {    alert(`自动拒绝失败，原因：${error}`);  }}
async function hangup() {  try {    await TUICallKitServer.hangup();    alert("已自动挂断");  } catch (error) {    alert(`自动挂断失败，原因：${error}`);  }}

  
     步骤 1: 初始化      步骤 2: 发起视频通话     
           
  

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}`);      }    }  },}

详细接口使用请参考 TUICallKit 接口文档。

更多特性

1. 通过接口设置自动接听

通过 TUICallKitServer 组件的接口，可以灵活的控制 组件的状态，实现业务侧的更多需求。注意：在调用“接听/拒绝/挂断”等接口时，为了维护良好的用户体验，建议在 UI 层面上提醒用户该通话已被自动处理。accept(): 接听来电reject(): 拒绝来电hangup(): 挂断已接通的电话

// 此接口需确保在收到来电邀请后调用（status === STATUS.BE_INVITED），通话状态可以参考 `@status-changed` 的抛出。try {  await TUICallKitServer.accept();  alert(`已自动接听`);} catch (error: any) {  alert(`自动接听失败，原因：${error}`);}

// 与 accept() 相同，具有一样的调用时机限制。try {  await TUICallKitServer.reject();  alert(`已自动拒绝`);} catch (error: any) {  alert(`自动拒绝失败，原因：${error}`);}

// 调用此接口需确保已经在呼叫状态或接通状态（status !== STATUS.BE_INVITED && status !== STATUS.IDLE）。通话状态可以参考 `@status-changed` 的抛出。try {  await TUICallKitServer.hangup();  alert(`已自动挂断`);} catch (error: any) {  alert(`自动挂断失败，原因：${error}`);}

2. 通话状态回调与 UI 设置

本组件提供了通话状态回调，可以用于业务侧实现更多交互逻辑。beforeCalling: 通话前会执行afterCalling: 通话后执行onMinimized: 组件切换最小化后会执行本组件提供了若干个功能开关，可以根据需要选择开启或关闭。allowedMinimized: 是否允许最小化allowedFullScreen: 是否允许全屏videoDisplayMode: 画面显示模式videoResolution: 通话分辨率本组件提供了若干个事件，会在组件内触发通知到业务侧。kicked-out: 该用户被踢出（如重复登录），通话自动结束status-changed: 通话状态发生了变化，使用方式参照下方示例代码，status 种类参考 API 文档。完整示例代码1（Vue3 + TypeScript + Composition API）完整示例代码2（Vue2 + JavaScript + Options API）

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);}
function handleKickedOut() {  console.error("用户被踢出了");}
function handleStatusChanged({ oldStatus, newStatus }) {  console.log(`[Call Demo] ${oldStatus} -> ${newStatus}`);}
    
     init      发起视频通话     
           
  

  
     步骤 1: 初始化      步骤 2: 发起视频通话     
      
自动接听等特性
       accept        reject        hangup     
    
          
  

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);    },    handleKickedOut() {      console.error("The user has been kicked out");    },    handleStatusChanged(args) {      const { oldStatus, newStatus } = args;      console.log("通话状态变更: " + oldStatus + " -> " + newStatus);    },    async accept() {      try {        await TUICallKitServer.accept();        alert("已自动接听");      } catch (error) {        alert(`自动接听失败，原因：${error}`);      }    },    async reject() {      try {        await TUICallKitServer.reject();        alert("已自动拒绝");      } catch (error) {        alert(`自动拒绝失败，原因：${error}`);      }    },    async hangup() {      try {        await TUICallKitServer.hangup();        alert("已自动挂断");      } catch (error) {        alert(`自动挂断失败，原因：${error}`);      }    }  },}

详细接口使用请参考 TUICallKit 接口文档。

其他文档

TUICallKit APITUICallKit Vue3 Demo 快速跑通、Vue2 Demo 快速跑通TUICallKit 界面定制指引TUICallKit (Web) 常见问题欢迎加入 QQ 群：646165204，进行技术交流和反馈

常见问题

1. 如何生成 UserSig？

UserSig 是腾讯云为其云服务设计的一种安全保护签名，是一种登录凭证，由 SDKAppID 与 SecretKey 等信息组合加密得到。方式一：控制台获取，参考 获取临时 userSig。方式二：部署临时生成脚本。警告：此方式是在前端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试，生产环境请看方式三。为方便初期调试，userSig 可临时使用 GenerateTestUserSig-es.js 中 genTestUserSig(params) 函数来计算 ，例如：

import { genTestUserSig } from "@tencentcloud/call-uikit-vue/debug/GenerateTestUserSig-es.js";const { userSig } = genTestUserSig({ userID: "Alice", SDKAppID: 0, SecretKey: "YOUT_SECRETKEY" });

方式三：正式环境使用正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

2. 如何创建 userID？

通过 userID 与 userSig 登录过一次，会默认创建该用户。还可以通过 即时通信 IM 控制台 进行创建和获取，单击目标应用卡片，进入应用的账号管理页面，即可创建账号并获取 userID。例如：

3. 如何获得 SDKAppID 与 SecretKey？

在使用 TUICallKit 发起通话前，您需要开通 TUICallKit 专属的音视频通话服务，详细步骤如下：1. 登录 腾讯云视立方控制台，单击 创建项目 按钮后，您可以根据自己的业务情况，选择合适的接入场景和集成方式，这里我们推荐“含 UI 快速集成”，即TUICallKit。
2. 在选定接入场景和集成方式以后，您就需要开通一下 音视频通话 SDK 使用的两项 腾讯云基础的 PaaS 能力，即 即时通信 IM 和 实时音视频 TRTC，开通后，单击 创建项目并下一步 按钮。
3. 在项目创建完成以后，您需要为该项目匹配一个 IM 应用，因为音视频通话 SDK 依赖了IM SDK 提供的基础能力，这里创建或者管理已有的 IM 应用均可，在关联成功后，就可以领取7天的免费体验版，用于后续的开发调试工作，当然如果您之前已经体验过，也可以直接在该页面 购买正式版本。
4. 单击 前往集成，选择 项目配置，查看详细的配置页面，找到 SDKAppID 和密钥并记录下来，它们会在后续的步骤三：生成 UserSig中被用到，至此音视频通话 SDK 服务开通完成。

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案