夜雨聆风
uniapp:记录使用uniapp对接腾讯音视频插件(TUICallKit )
GenerateTestUserSig.js(计算userSig)和lib-generate-test-usersig-es.min.js两个JS文件。前往
6、打开GenerateTestUserSig.js将之前获取到的SDKAppID 和 密钥 填入文件内。
Github 中的示例代码使用了 genTestUserSig 函数在本地计算 userSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在 App 的代码当中，这并不利于您后续升级和保护您的 SecretKey，所以我们强烈建议您将 userSig 的计算逻辑放在服务端进行，并由 App 在每次使用 TUICallKit 组件时向您的服务器请求实时计算出的 userSig。
7、页面中开始使用APP.vue
// 计算userSigimport TIM from 'tim-wx-sdk'; // 自行 npm install tim-wx-sdk 进行安装（安装TIM 是为了之后发起群聊语音/视频）import { genTestUserSig } from './utils/GenerateTestUserSig.js';// 原生插件引入提供如下接口：1V1音视频，群聊音视频。const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit');// 监听通话的状态，例如：异常、通话开始、结束等。const TUICallingEvent = uni.requireNativePlugin('globalEvent');// 目前仅提供如下接口：结束通话，设置用户视频画面的渲染模式const TUICallEngine = uni.requireNativePlugin('TencentCloud-TUICallKit-TUICallEngine');export default {onLaunch: function() {// 将原生插件挂载到 uni 上uni.$TUICallKit = TUICallKit;uni.$TUICallingEvent = TUICallingEvent;uni.$TUICallEngine = TUICallEngine;// 群聊：语音/视频，需要用到TIMuni.$TUIKit = TIM.create({SDKAppID: genTestUserSig('').sdkAppID});uni.$TIM = TIM;}}
8、在首页 index.vue 完成 TUICallKit 组件的登录
<script>import { genTestUserSig } from '../../utils/GenerateTestUserSig.js';export default {onLoad() {// 请求接口，获取用户数据，这里需要用到 用户id，头像，姓名。（之后拨打音视频需要用到）if (res.code == 1) {let user_id = res.data.user_id+='';let globalData = {SDKAppID: genTestUserSig('').sdkAppID,userID: user_id, // 必须是字符串userSig: genTestUserSig(user_id).userSig}// 登录 TIMuni.$TUIKit.login({userID: user_id,userSig: genTestUserSig(user_id).userSig});// 登录uni.$TUICallKit.login(globalData, (val) => {if (val.code === 0) {// 开启悬浮窗uni.$TUICallKit.enableFloatWindow(true);console.log('login success');// 设置用户昵称，头像uni.$TUICallKit.setSelfInfo({nickName: res.data.nickname,avatar: res.data.avatar}, (val) => {if (val.code === 0) {console.log('setSelfInfo success');} else {console.log(val.msg);}});} else {console.log(val.msg);}});}}}</script>
9、在聊天页面拨打语音，或视频。
if(this.sessionInfo.session_type =='normal'){console.log('1v1：')uni.$TUICallKit.call({userID: this.sessionInfo.friend_uid, // 对方用户idcallMediaType: this.callMediaType, // 语音通话(1)、视频通话(2)}, (res) => {if (res.code === 0) {console.log('call success');} else {console.log(res.msg);}});}else{console.log('群聊：')// 群聊看下方实现方法：}
10、如果你需要监听通话操作，可以写在app.vue中，更多监听请查看官方API文档
uni.$TUICallingEvent.addEventListener('onCallCancelled', (res) => {console.log('通话已取消：');});uni.$TUICallingEvent.addEventListener('onCallBegin', (res) => {console.log('通话已接通：');});uni.$TUICallingEvent.addEventListener('onCallEnd', (res) => {console.log('通话结束：');});
11、群聊知识点
1.首先群聊语音依赖TIM。需要先用TIM创建群组获取到群组id,之后才可以使用groupCall发起群聊，（这是官方的描述注意：使用群组通话前需要创建IM 群组）
2.群聊内容，首先在：app.vue 中引入依赖项，index.vue中登录TIM
3.需要注意的是：发起群语音选中的用户id，必须是已经登录了uni.$TUIKit.login和uni.$TUICallKit.login的用户（userID:必须是字符串）。我们app更新后，可能会出现部分用户没有更新，那么他也就没有用上边两个API登录。所以无法使用TIM的功能。
4.最后是创建群聊（群聊页面请自行编写css，这里只记录js部分）：
<script>export default {data() {return {list: [], // 当前群成员ids: [], // 已选中的成员id：数据结构：[233,548,786]session_id: '', // 当前群idgroupID: '', // TIM创建群组idsessionInfo:{} // 群信息}},methods:{// 发起群语音/视频async submit() {if (this.ids.length == 0) {uni.showToast({icon: 'none',title: '请先选择联系人'});} else {// 将本机用户id插入群成员中let my_user_id = uni.getStorageSync('userinfo').user_id;let userIDList = [];let groupList = [];this.ids.unshift(my_user_id);this.ids.forEach(item=>{userIDList.push(item+'') // 注意用户id，必须要求是字符串。})for (let i = 0; i < userIDList.length; i++) {const user = {userID: userIDList[i],};groupList[i] = user;}// 创建群聊await this.createGroup(groupList);if (this.groupID) {uni.$TUICallKit.groupCall({groupID: this.groupID,userIDList: userIDList,callMediaType: 1, // 1语音，2视频}, (res) => {if (res.code === 0) {console.log('call success');this.list.forEach(item=>{item.checked = false;})this.ids = [];} else {console.log(res.msg);}});}}},// 创建IM群聊createGroup(groupList) {return uni.$TUIKit.createGroup({type: uni.$TIM.TYPES.GRP_MEETING,name: this.sessionInfo.name, // 群名称memberList: groupList, // 如果填写了 memberList，则必须填写 userID}).then((imResponse) => {console.log(imResponse)this.groupID = imResponse.data.group.groupID; // 创建成功的群组id}).catch((imError) => {console.warn(imError); // 创建群组失败的相关信息});}}}</script>
提示：
1.在使用uni.$TUICallKit.call({userID：123})拨打之前，假设对方用户id是123，
对方需要先完成登录uni.$TUICallKit.login，否则会提示无效的用户id。设置昵称和头像是为了在拨打电话界面显示用户信息。
2.userSig官方推荐放在服务器进行计算，为了效果这里直接使用了官方提供的demoGenerateTestUserSig.js进行计算。