腾讯云实时音视频uni-app(小程序)_音视频解决方案_同尘科技
本文将介绍如何快速完成 TUICallKit 组件的接入,跟随本文档,您将在半小时内得到一个包含完备 UI 界面的视频通话小程序。基本功能如下图所示:
注意:1. @tencentcloud/call-uikit-wechat ≥ V3.0.4 采用新架构进行重构,不再使用微信原生进行开发,而是采用 Vue(支持 Vue2.6、Vue3)开发的组件。本文档使用主包接入的方式集成 TUICallKit ,如果您想使用分包集成的方式请参考 uni-app(小程序)。2. 如果想使用 wxcomponents 的方式集成组件,需要低于 V3.0.4。低版本的组件会针对发现的 bug 继续升级更新维护。如果您想继续使用小于 v3.0.4 版本来集成 TUICallKit,请移步 旧版文档。
小程序 Demo 体验
如果您想要直接体验音视频通话小程序,单击 Demo 体验,扫描小程序二维码。如果您想要直接跑通一个新工程,请直接阅读 uni-app demo 快速跑通。如果您想要亲自集成 TUICallKit 组件,搭建一个音视频通话小程序,请跟随本文档。
开发环境要求
微信 App iOS 最低版本要求:8.0.40。微信 App Android 最低版本要求:8.0.40。小程序基础库最低版本要求:2.10.0。警告:由于小程序测试号不具备 和 的使用权限,请使用企业小程序账号申请相关权限进行开发。由于微信开发者工具不支持原生组件(即 和 标签),需要在真机上进行运行体验。
小程序开发准备
步骤一:开通企业类小程序
小程序推拉流标签不支持个人小程序,只支持企业类小程序。需要在 注册 时填写主体类型为企业,如下图所示:
步骤二:在小程序控制台开启实时音视频接口
小程序推拉流标签使用权限暂时只开放给有限类目,具体支持类目参考该地址。符合类目要求的小程序,需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限。
TUICallKit 源码集成
步骤一:创建 uni-app 小程序项目
1. 在 HBuilder 中创建小程序项目。 2. 在终端输入
npm init -y
,创建package.json
文件。
npm init -y
步骤二:下载并导入 TUICallKit 组件
MacOS 端Windows 端
npm i @tencentcloud/call-uikit-wechat
mkdir -p ./TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./TUICallKit
npm i @tencentcloud/call-uikit-wechat
xcopy node_modules\@tencentcloud\call-uikit-wechat\ .\TUICallKit /i /e
步骤三:获取 SDKAppID、SecretKey
1. 登录到 即时通信 IM 控制台,单击创建新应用,在弹出的对话框中输入您的应用名称,并单击确定。 2. 单击创建的应用,进入基本配置页面,获取 SDKAppID、SecretKey。3. 在基本配置页面,单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。4. 如果需要正式应用上线,可以单击 购买正式版 即可进入购买页面。
步骤四:获取 UserSig,修改 App.vue 文件
客户端生成控制台生成由于 UserSig 有时效性,如果您需要长期使用 TUICallKit,推荐您采用该方法。1. 修改 TUICallKit/debug/GenerateTestUserSig-es.js
文件 的 SDKAPPID 以及 SECRETKEY。
1. 如果您想要快速体验 callkit,您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。
注意:每个 userID 对应的 userSig 是唯一的,若使用控制台生成临时的 userSig ,请在登录第二个用户时记得替换 app.js 中的 userSig。
步骤五:调用 TUICallKit 组件
Vue3 环境Vue2 环境1. 修改 index.vue 文件。
import { ref } from "vue";import * as GenerateTestUserSig from "../../TUICallKit/debug/GenerateTestUserSig-es.js";import { TUICallKitServer } from "../../TUICallKit/src/index";import TUICallKit from "../../TUICallKit/src/Components/TUICallKit";let userID = ref("");let isLogin = ref(false);const loginHandler = async () => { if (!userID.value) return; const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({ userID: userID.value, }); await TUICallKitServer.init({ sdkAppID: SDKAppID, userID: userID.value, userSig: userSig, }); isLogin.value = true; userID.value = "";};
const callHandler = async () => { await TUICallKitServer.call({ userID: userID.value, type: 2, });};.loginBox { margin-top: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
input { display: flex; font-size: 20px;}
.login { width: 100vw; bottom: 5vh; margin: 70rpx;}
.login button { width: 80%; background-color: #006eff; border-radius: 50px; color: white;}
1. 下载依赖。
npm i unplugin-vue2-script-setup
2. 修改vue.config.js
文件。
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;module.exports = { parallel: false, configureWebpack: { plugins: [ ScriptSetup({ /* options */ }), ], }, chainWebpack(config) { config.plugins.delete('fork-ts-checker'); },};
3. 修改main.js
文件。
import vueComposition from "@vue/composition-api" Vue.use(vueComposition)
4. 修改index.vue
文件。
import * as GenerateTestUserSig from "../../TUICallKit/debug/GenerateTestUserSig-es.js";import { TUICallKitServer } from "../../TUICallKit/src/index";import TUICallKit from "../../TUICallKit/src/Components/TUICallKit.vue";export default { components: { TUICallKit, }, data() { return { isLogin: false, userID: "", }; }, methods: { async loginHandler() { if (!this.userID) return; const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({ userID: this.userID, }); await TUICallKitServer.init({ sdkAppID: SDKAppID, userID: this.userID, userSig: userSig, }); this.isLogin = true; this.userID = ""; },
async callHandler() { await TUICallKitServer.call({ userID: this.userID, type: 2, }); }, },};.loginBox { margin-top: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
input { display: flex; font-size: 20px;}
.login { width: 100vw; bottom: 5vh; margin: 70rpx;}
.login button { width: 80%; background-color: #006eff; border-radius: 50px; color: white;}
步骤六:运行到微信开发者工具
1. 运行到微信开发者工具。
2. 请在本地设置里面勾选上“不校验合法域名、web-view (业务域名)、 TLS 版本以及 HTTPS 证书”。 警告:如果不勾选该条目,则会在控制台出现如下错误。
3. 单击清缓存 > 全部清除,避免开发者工具的缓存造成渲染异常。 4. 编译小程序。
5. 该项目快速集成后的预期效果图。
步骤八:拨打您的第一通电话
1. 请单击预览,扫描二维码,在真机环境使用小程序。 2. 登录后,请输入呼叫用户 ID,拨打您的第一通电话。具体效果如下图所示:
注意:第一次使用小程序通话,需要获取摄像头和麦克风权限。
更多特性
设置昵称和头像
如果您需要自定义昵称和头像,可以使用如下接口进行更新:
TUICallKitServer.setSelfInfo("昵称", "头像 URL");
自定义铃声
如果您需要自定义来电铃音,可以通过如下接口进行设置:传入本地铃声文件应为绝对路径。如需恢复默认铃声,filePath
传空即可。
TUICallKitServer.setCallingBell("filePath");
群组通话
如果您需要实现群组(即多人)音视频通话,可以通过如下接口进行设置:
TUICallKitServer.groupCall({ userIDList: ["jane", "mike", "tommy"], type: 1, // 1-语音通话 2-视频通话 groupID: "12345678"});
API 文档
小程序 TUICallKIt API 文档请参考:TUICallKit API。
常见问题
包体积过大
注意:TUICallKit 版本须大于或等于 3.1.2。分包接入文档。体积优化文档。
全局监听
注意:1. TUICallKit 版本须大于或等于 3.0.4。2. 全局监听不支持分包接入。具体实现方法请参考:主包方案 :【TUICallKit】小程序全局监听(主包方案)。
什么是 SDKAppID、SecretKey?
SDKAppID:IM 的应用 ID,用于业务隔离,即不同的 SDKAppID 的通话彼此不能互通。Secretkey:IM 的应用密钥,需要和 SDKAppID 配对使用,用于签出合法使用 IM 服务的鉴权用票据 UserSig。
什么是 UserSig,如何生成 UserSig?
UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
调用 call 方法提示报错 undefined,如何处理?
1. 不要在 TUICallKit 的 dom 标签上使用 v-if 来进行条件渲染。
警告:使用 v-if 条件渲染指令隐藏节点后,该节点上的方法和事件也会被隐藏,无法正常触发。因此,无法通过隐藏节点上的方法来操作节点或获取数据。如果需要在隐藏节点中执行一些操作,可以考虑使用 v-show 来代替 v-if,或者通过其他方式实现隐藏和显示的效果。
说明:了解更多详情您可 进入 IM 社群 进行咨询和反馈。
对音视频的解决方案有疑惑?想了解解决方案收费? 联系解决方案专家
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?