专为以下场景打造:VUE
Vue 视频通话 UI Kit
使用 Tencent RTC 的 Vue Video Calling UI Kit 添加语音和视频通话。在 Vue 应用中挂载 TUICallKit,并将通话控制功能接入现有用户流程。
开发者资源
Vue 视频通话 UI Kit 文档与示例
VUE CALL 功能
Vue 视频通话功能
连接人与人
- 语音和视频通话
- 来电处理
掌控通话体验
- 摄像头和麦克风控件
- 通话生命周期事件
打造属于您的产品体验
- 您的应用流程
- 平台专属集成
探索 Vue 视频通话组件
将 TUICallKit 接入你的组件布局,然后通过应用中的操作发起通话。
嵌入您的 Vue 通话界面
在组件布局中挂载 TUICallKit,并使用已验证身份的用户进行初始化。该组件提供通话界面和控件。
阅读文档<script setup>
import { TUICallKit } from "@trtc/calls-uikit-vue";
</script>
<template>
<TUICallKit />
</template>在 Vue 中发起视频通话
将应用中的接收方 ID 传递给通话 API。将此操作关联到 Vue 界面中的联系人、对话或通话按钮。
阅读文档import { TUICallKitAPI, CallMediaType } from
'@trtc/calls-uikit-vue';
await TUICallKitAPI.calls({
userIDList: [recipientID],
type: CallMediaType.VIDEO,
});开始使用
为你的 Vue 应用添加视频通话
- 01
- 02
- 03
npm install @trtc/calls-uikit-vueimport { TUICallKitAPI } from '@trtc/calls-uikit-vue';
await TUICallKitAPI.init({ SDKAppID, userID, userSig });Vue 视频通话 UI Kit 常见问题
Vue Video Calling UI Kit 包含哪些内容?
Vue 视频通话 UI Kit 提供 TUICallKit 界面和通话控件。将其连接到您的用户身份和组件布局;Call 服务负责连接参与者。
我应该使用 Vue 通话 SDK 还是 UI Kit?
UI Kit 在底层服务之上提供界面组件。如果需要更灵活地控制自己的应用界面,请选择 SDK。
在浏览器中使用 Vue 视频通话需要满足哪些条件?
为已认证且启用 Call 服务的用户初始化 TUICallKit。使用 HTTPS 或 localhost,并处理摄像头、麦克风和浏览器播放权限。
如何对 Vue Video Calling UI Kit 的用户进行身份验证?
在您的服务器上创建 UserSig,并在您自己的登录流程完成后将其传递给客户端。应用密钥应始终保存在服务器上。
Vue 视频通话 UI Kit 可以免费使用吗?
界面与托管式 Call 服务承担不同的作用。请为你的应用开通该服务,并查看当前套餐、功能可用性和使用费用。
如何将 Vue 视频通话 UI Kit 集成到 Vue 项目中?
使用文档所述的 Vue 集成和组件 API。在已连接视图之前初始化服务,并在视图卸载时移除监听器或释放资源。
发布应用前如何测试 Vue 视频通话 UI Kit?
在独立用户之间测试邀请、接听、拒绝和结束通话状态,包括拒绝权限的情况。
如何定制 Vue 视频通话 UI Kit 的界面?
使用 @trtc/calls-uikit-vue 中的 TUICallKitAPI,通过 setLocalViewBackgroundImage 和 setRemoteViewBackgroundImage 设置摄像头关闭时的背景。这些背景会在语音通话或关闭视频时显示。如需自定义按钮 SVG,文档中的源码复制流程要求使用 Vue 3、TypeScript,以及 3.2.2 或更高版本。请将导入路径改为本地组件副本,并在升级时维护这些修改。

