腾讯云音视频通话SDKWeb_音视频解决方案_同尘科技
本文将介绍如何定制 TUICallKit 的用户界面,我们提供了两个方案供您选择:界面微调方案和自实现 UI 方案。界面微调方案:将会在已有的开源 TUICallKit 做代码修改,适用于 Vue2.7 + Typescript
或者 Vue3 + Typescript
项目,若您采用其他语言或者技术栈,请使用自实现 UI 方案。自实现 UI 方案:TUICallKit 是 UI 组件,其底层使用的是腾讯云 TUICallEngine SDK。SDK 封装了音视频通话常见场景的操作,适用于任意前端框架,您可以使用这套 JavaScript 接口制作交互更灵活的业务页面。
方案一:界面微调方案
TUICallKit 是含 UI 音视频通话组件,请点击 发布日志 查看最近更新记录。为了方便的进行源码调整,推荐直接将组件拷贝到您的项目中(源码为 TypeScript 版本)1. 下载源码Vue3Vue2
npm install @tencentcloud/call-uikit-vue
npm install @tencentcloud/call-uikit-vue2
2. 将源码拷贝到自己的项目中,以拷贝到 src/components/
目录为例:macOS + Vue3macOS + Vue2Windows + Vue3Windows + Vue2
mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@tencentcloud/call-uikit-vue/* ./src/components/TUICallKit
mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@tencentcloud/call-uikit-vue2/* ./src/components/TUICallKit
xcopy .\node_modules\@tencentcloud\call-uikit-vue .\src\components\TUICallKit /i /e
xcopy .\node_modules\@tencentcloud\call-uikit-vue2 .\src\components\TUICallKit /i /e
3. 修改引入路径需要将 CallKit 改为从本地文件中引入,如下方代码。其他用法细节可参考 TUICallKit 快速接入。
import { TUICallKit, TUICallKitServer } from "./components/TUICallKit/src/index";
注意:此方法可能与您的 ESLint、TypeScript 配置冲突,若出现报错,可参考步骤4。4. 解决源码拷贝可能导致的报错如果您在使 TUICallKit 组件时遇到了报错,请不要担心,大多数情况下这是由于 ESLint 和 TSConfig 配置不一致造成的。您可以查阅文档,按照要求正确配置即可。如果您需要帮助,请随时联系我们,我们将确保您能够成功地使用此组件。以下是几个常见的问题:ESLint 报错TypeScript 报错若 TUICallKit 与您项目的代码风格不一致导致报错,可将本组件目录屏蔽,如在项目根目录增加 .eslintignore
文件,如:
# .eslintignoresrc/components/TUICallKit
如遇 Cannot find module '../package.json'
报错,是因为 TUICallKit 内引用了 JSON 文件,可在 tsconfig.json
中添加相关配置,示例:
// tsconfig.json{ "compilerOptions": { "resolveJsonModule": true, }}
其他 TSConfig 问题请参见 TSConfig Reference。
调整 UI 布局
您可以通过修改 src/components/
文件下的不同页面来修改音视频通话界面,每个单页面的功能如下:
- components/ - Calling-C2CVideo.vue 1v1 视频通话 - Calling-Group.Vue 多人音频、视频通话 - ControlPanel.vue 控制面板 - ControlPanelItem.vue 控制面板子项 - Dialing.vue 拨打电话页面、来电页面、1v1 音频通话 - MicrophoneIcon.vue 可显示音量变化的麦克风 Icon - TUICallKit.vue TUICallKit 总组件
样式文件在 src/style.css
,根据不同的 UI 样式,可以进行自行调整。
调整业务逻辑
主要业务逻辑代码在 server.ts
中,配合 store/index.ts
使用。如想要针对性的对“被踢出”状态做处理,可以在 server.ts
中找到 handleKickedOut()
函数中添加处理逻辑,例如:
private handleKickedOut(event: any) { console.error("TUICallKit Kicked Out", JSON.stringify(event)); // do some thing... alert("该用户被踢出,请重新登录!");}
替换图标
您可以直接修改 src/icons
文件夹下的图标组件,以确保整个应用中的图标色调风格保持一致,请在替换时保持图标文件的名字不变,图标预览可参考 src/assets
。
方案二:自实现 UI 方案
TUICallKit 的整个通话功能是基于 TUICallEngine 这个无 UI SDK实现的,您可以完全基于 TUICallEngine 实现一套自己的 UI 界面。详情可见:TUICallEngine 接入指引TUICallEngine API 接口地址
对音视频的解决方案有疑惑?想了解解决方案收费? 联系解决方案专家
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?