natural-calluikit-vue

TUICallKit

English | 简体中文

Vue3 版本的音视频通话 UI 组件，通过编写几行代码，就可以为您的 Web 应用添加音视频通话功能。Vue2 请参见 @tencentcloud/call-uikit-vue2

特性

• ⚡️ 功能全面 —— 支持单人/多人/音频/视频通话、支持视频转音频通话、支持自由选择通话设备
• 🌟 低门槛 —— 仅需 3 行代码即可跑通测试 Demo，6 行代码完成通用能力接入
• 📱 多设备适配 —— 支持 H5 1v1 通话、群组通话 布局
• 🎨 灵活样式 —— 组件开源，可复用逻辑，自定义 UI 样式
• 🛠 优秀生态 —— 与 TUIKit 协同使用，可以在 TIM 会话中直接发起音视频通话
• 🔥 先进技术栈 —— TypeScript 类型，支持 Vue3 Composition API
• 🌍 跨平台 —— 支持 Android、iOS、Web、小程序、Flutter、UniApp 等多个开发平台
• ☁️ 低延迟 —— 腾讯云全球链路资源储备，保证国际链路端到端平均时延 < 300ms
• 🤙🏻 低卡顿 —— 抗丢包率超过 80%、抗网络抖动超过 1000ms，弱网环境仍顺畅稳定
• 🌈 高品质 —— 支持 720P、1080P 高清画质，70% 丢包率仍可正常视频

使用指引

我们团队即将在 Web 端丰富更多不同的组件，以满足您的开发需求。
希望您能抽出几分钟时间，为您自己的需求投上一票，我们将优先开发！
问卷地址：https://wj.qq.com/s2/11263124/1556/

为方便您的使用，本组件配套多篇使用指引：

• 如果您想在线体验通话效果，请访问 1v1音视频通话体验馆

• 如果您想要调试通话效果，请阅读 Vue3 Demo 快速跑通 或者 Vue2 Demo 快速跑通

• 如果您想把我们的功能直接嵌入到您的项目中，请阅读 快速接入 TUICallKit

• 如果您想要修改 UI 界面，请阅读 TUICallKit 界面定制指引

目录说明

.
├── README.md
├── demos/basic-vue3/
├── demos/basic-vue2/
└── TUICallKit/

demos/basic-vue3/

• 此文件夹下是 Vue3 基础版 demo，集成了完整的 TUICallKit 组件功能，可以直接搜索用户拨打音视频通话。
• demo 页面下方集成了调试面板，可直接输入您的应用信息，具体流程请参考：Vue3 Demo 快速跑通。

demos/basic-vue2/

• 此文件夹下是 Vue2.7 基础版 demo，集成了完整的 TUICallKit 组件功能，可以直接搜索用户拨打音视频通话。
• demo 页面下方集成了调试面板，可直接输入您的应用信息，具体流程请参考：Vue2 Demo 快速跑通。

TUICallKit/

• 此文件夹下是 TUICallKit 组件源文件，支持 Vue3 与 Vue2.7+ 的项目直接引入。包含全部 UI 层与逻辑层代码，入口文件为 index.ts。
• 推荐直接使用打包方式引入，如 快速接入 TUICallKit。可直接复制此文件到您的工程中进行组件的引入，详细的源码接入组件过程请参考 TUICallKit 界面定制指引。

Changelog

版本更新历史请点击 SDK 发布日志(Web)。

附录

• 如果你遇到了困难，可以先参阅 常见问题；
• 如果发现了示例代码的 bug，欢迎提交 issue；
• 欢迎加入 QQ 群：646165204，进行技术交流和反馈~

License

ISC License © 2022-present, Tencent