uniapp:记录使用uniapp对接腾讯音视频插件(TUICallKit )

官方地址:TUICallKit—API
uniapp插件地址:腾讯云音视频通话插件TencentCloud-TUICallKit

1、到鷈插件地址,购买插件,并绑定到自己的项目中。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
第3步的报名,一定要与最后打包包名一致。输入包名后:下一步-------确定。

2、开通服务

1.登录到 即时通信 IM 控制台,单击创建新应用,在弹出的对话框中输入您的应用名称,并单击确定。
在这里插入图片描述
2.进入刚才创建的应用,选择 基本配置 并在页面的右下角找到 开通腾讯实时音视频 服务功能区,先免费体验,等正式上线在加购。
在这里插入图片描述
3.在同一页面找到 SDKAppID密钥 ,后续步骤会用到
在这里插入图片描述

3.HBuilder导入插件,并发行自定义基座进行调试。

1.导入云端插件。
在这里插入图片描述
2.打自定义基座,准备调试。

4.准备工作

1.项目中会用到 GenerateTestUserSig.js(计算userSig)lib-generate-test-usersig-es.min.js两个JS文件。前往github拷贝到自己项目中
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.打开GenerateTestUserSig.js将之前获取到的SDKAppID密钥 填入文件内。

Github 中的示例代码使用了 genTestUserSig 函数在本地计算 userSig 是为了更快地让您跑通当前的接入流程,但该方案会将您的 SecretKey 暴露在 App 的代码当中,这并不利于您后续升级和保护您的 SecretKey,所以我们强烈建议您将 userSig 的计算逻辑放在服务端进行,并由 App 在每次使用 TUICallKit 组件时向您的服务器请求实时计算出的 userSig。
在这里插入图片描述

5.页面中开始使用

1.APP.vue 引入腾讯音视频插件

// 计算userSig
import 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;
		
		// 群聊:语音/视频,需要用到TIM
		uni.$TUIKit = TIM.create({
    
    
			SDKAppID: genTestUserSig('').sdkAppID
		});
		uni.$TIM = TIM;
	}
}

2.在首页 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
				}
				// 登录 TIM
				uni.$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>

3.在聊天页面拨打语音,或视频。

if(this.sessionInfo.session_type =='normal'){
    
    
	console.log('1v1:')
	uni.$TUICallKit.call({
    
    
		userID: this.sessionInfo.friend_uid, // 对方用户id
		callMediaType: this.callMediaType, // 语音通话(1)、视频通话(2)
	}, (res) => {
    
    
		if (res.code === 0) {
    
    
			console.log('call success');
		} else {
    
    
			console.log(res.msg);
		}
	});
}else{
    
    
	console.log('群聊:')
	// 群聊看下方实现方法:
}

在这里插入图片描述

在这里插入图片描述

4.如果你需要监听通话操作,可以写在app.vue中,更多监听请查看官方API文档

uni.$TUICallingEvent.addEventListener('onCallCancelled', (res) => {
    
    
	console.log('通话已取消:');
});

uni.$TUICallingEvent.addEventListener('onCallBegin', (res) => {
    
    
	console.log('通话已接通:');
});

uni.$TUICallingEvent.addEventListener('onCallEnd', (res) => {
    
    
	console.log('通话结束:');
});

群聊知识点

1.首先群聊语音依赖TIM。需要先用TIM创建群组获取到群组id,之后才可以使用groupCall发起群聊,(这是官方的描述注意:使用群组通话前需要创建IM 群组)
2.群聊内容,首先在:app.vue 中引入依赖项,index.vue中登录TIM
3.需要注意的是:发起群语音选中的用户id,必须是已经登录了uni.$TUIKit.loginuni.$TUICallKit.login的用户(userID:必须是字符串)。我们app更新后,可能会出现部分用户没有更新,那么他也就没有用上边两个API登录。所以无法使用TIM的功能
4.最后是创建群聊(群聊页面请自行编写css,这里只记录js部分):

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				list: [], // 当前群成员
				ids: [], // 已选中的成员id:数据结构:[233,548,786]
				session_id: '', // 当前群id
				groupID: '', // TIM创建群组id
				sessionInfo:{
    
    } // 群信息
			}
		},
		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进行计算。

猜你喜欢

转载自blog.csdn.net/qq_40745143/article/details/129375319