uniapp对接腾讯云IM+音视频。音视频含UI集成

uniapp对接腾讯云IM+音视频

前言

提示：作者已经实现uniapp集成腾讯云IM+音视频到android和ios平台，如有疑问可在下方留言。音视频为含ui集成

一、准备工作

• uniapp腾讯云音视频插件地址 官方插件显示的ios版本为9-15，本人ios版本号为16.1,亲测可行
• uniapp 腾讯云音视频文档
• uniapp 腾讯云IM文档 注意这个是uni的v3+ts版本,如果是v2版本腾讯云没有直接的sdk，可以参考腾讯云IM中web的sdk可以查看这个文档: web对接腾讯云IM文档
• 需要文件,用于后续生成userSig,下载地址: 用于生成userSig
• 请认真阅读插件的使用步骤
• 缺少依赖的自行安装npm i xx

二、使用步骤

1.App.vue配置

代码如下（示例）：

<script>
import TIM from 'tim-js-sdk';
import { genTestUserSig } from '@/debug/GenerateTestUserSig.js'; // 准备工作第四步,下载解压到项目根目录并引入。注意修改GenerateTestUserSig.js中的SDKAPPID和SECRETKEY
const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit');
const TUICallKitEvent = uni.requireNativePlugin('globalEvent');
const TUICallEngine = uni.requireNativePlugin('TencentCloud-TUICallKit-TUICallEngine');

export default {
	globalData: {
		SDKAppID: genTestUserSig('').sdkAppID, // 修改GenerateTestUserSig.js中的SDKAPPID
		userID: '', // 用户id,登录接口返回的用户id,也可以任意指定,但不要重复
		userSig: '', // 登录时生成
	},
	onLaunch() {
		// 登录成功后存储的userID和userSig
		if(uni.getStorageSync('USERID')){
			this.globalData.userID = uni.getStorageSync('USERID')
		}
		if(uni.getStorageSync('USERSIG')){
			this.globalData.userSig = uni.getStorageSync('USERSIG')
		}
		// 重点注意： 为了 uni-app 更好地接入使用 tim，快速定位和解决问题，请勿修改 uni.$TUIKit 命名。
		// 如果您已经接入 tim ，请将 uni.tim 修改为 uni.$TUIKit。
		uni.$TUIKit = TIM.create({
			SDKAppID: this.globalData.SDKAppID
		});
		uni.$TIM = TIM;
		// 将原生插件挂载在 uni 上
		uni.$TUICallKit = TUICallKit;
		uni.$TUICallKitEvent = TUICallKitEvent;
		uni.$TUICallEngine = TUICallEngine;
		// 添加监听事件
		// 通话状态监听
		TUICallKitEvent.addEventListener('onError', (res) => {
		  console.log('onError', JSON.stringify(res));
		});
		TUICallKitEvent.addEventListener('onCallReceived', (res) => {
		  console.log('onCallReceived', JSON.stringify(res));
		});
		TUICallKitEvent.addEventListener('onCallCancelled', (res) => {
		  console.log('onCallCancelled', res);
		});
		TUICallKitEvent.addEventListener('onCallBegin', (res) => {
		  console.log('onCallBegin', JSON.stringify(res));
		});
		TUICallKitEvent.addEventListener('onCallEnd', (res) => {
		  console.log('onCallEnd', JSON.stringify(res));
		});
		// IM监听
		uni.$TUIKit.on(TIM.EVENT.ERROR, function(event) {
			console.log(event,'收到 SDK 发生错误通知')
		  // 收到 SDK 发生错误通知，可以获取错误码和错误信息
		  // event.name - TIM.EVENT.ERROR
		  // event.data.code - 错误码
		  // event.data.message - 错误信息
		});
		
		uni.$TUIKit.on(TIM.EVENT.SDK_NOT_READY, function(event) {
			console.log(event,'收到 SDK 进入 not ready 状态通知')
		  // 收到 SDK 进入 not ready 状态通知，此时 SDK 无法正常工作
		  // event.name - TIM.EVENT.SDK_NOT_READY
		})
		
		uni.$TUIKit.on(TIM.EVENT.NET_STATE_CHANGE, function(event) {
			console.log(event,'网络状态发生改变')
		  // 网络状态发生改变（v2.5.0 起支持）
		  // event.name - TIM.EVENT.NET_STATE_CHANGE
		  // event.data.state 当前网络状态，枚举值及说明如下：
		  //   - TIM.TYPES.NET_STATE_CONNECTED - 已接入网络
		  //   - TIM.TYPES.NET_STATE_CONNECTING - 连接中。很可能遇到网络抖动，SDK 在重试。接入侧可根据此状态提示“当前网络不稳定”或“连接中”
		  //   - TIM.TYPES.NET_STATE_DISCONNECTED - 未接入网络。接入侧可根据此状态提示“当前网络不可用”。SDK 仍会继续重试，若用户网络恢复，SDK 会自动同步消息
		});
		
		uni.$TUIKit.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, function(event) {
			let badge = 0
			for (let i in event.data) {
				badge += event.data[i].unreadCount
			}
			// badeg为未读消息总数,可用于设置角标...
			console.log(event,'收到会话列表更新通知')
		  // 收到会话列表更新通知，可通过遍历 event.data 获取会话列表数据并渲染到页面
		  // event.name - TIM.EVENT.CONVERSATION_LIST_UPDATED
		  // event.data - 存储 Conversation 对象的数组 - [Conversation]
		});
		
		// 监听事件，如：
		uni.$TUIKit.on(TIM.EVENT.SDK_READY, function(event) {
			console.log(event,' 收到离线消息和会话列表同步完毕通知')
		  // 收到离线消息和会话列表同步完毕通知，接入侧可以调用 sendMessage 等需要鉴权的接口
		  // event.name - TIM.EVENT.SDK_READY
		});
		
		uni.$TUIKit.on(TIM.EVENT.MESSAGE_RECEIVED, this.onReceiveMessage);
		// 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
		// event.name - TIM.EVENT.MESSAGE_RECEIVED
		// event.data - 存储 Message 对象的数组 - [Message]
		// 如果已登录并且能获取到用户id
		if(uni.getStorageSync('token') && this.globalData.userID){
			console.log(uni.getStorageSync('token'), this.globalData.userID);
			// 登录腾讯IM
			uni.$TUIKit.login({
				userID: this.globalData.userID,
				userSig: this.globalData.userSig,
			})
			uni.$TUICallKit.login({
				SDKAppID: this.globalData.SDKAppID,
				userID: this.globalData.userID,
				userSig: this.globalData.userSig,
			}, (res) => {
				if (res.code === 0) {
					// 开启悬浮窗
					uni.$TUICallKit.enableFloatWindow(true);
				} else {
					console.error('login failed, failed message = ', res.msg);
				}
			});
			// 如果设置的是手动关闭启动图则打开下方注释
			// plus.navigator.closeSplashscreen()
		}else{
			uni.reLaunch({
				url: '/pages/login/login',
				success: ()=>{
					// 如果设置的是手动关闭启动图则打开下方注释
					// plus.navigator.closeSplashscreen()
				}
			})
		}
	},
	onShow() {
		console.log('App Show');
	},
	onHide() {
		console.log('App Hide');
	},
	methods: {
		onReceiveMessage(event){
			// 设置已读
			var pages = getCurrentPages()
			let route = pages[pages.length - 1].route
			// 如果当前是在聊天页面,则直接设置该消息已读
			if(route == 'pages/news/chatRoom/chatRoom'){
				// 因为返回的是数组,虽然是一条为了保险起见写成循环(万一是多条呢!!!)
				for (let i in event.data) {
					uni.$TUIKit.setMessageRead({conversationID: event.data[i].conversationID})
				}
			}
		}
	}
};
</script>
<style>
/*每个页面公共css */
</style>

2.登录时操作 login.vue

下面操作，需要在登录接口执行后再执行

代码如下（示例）：

//login页面需引入 import { genTestUserSig } from '@/debug/GenerateTestUserSig.js';
// 下方代码放到登录接口的回调中
const userID = String('userID'); // userID必须要字符串类型,后台登录接口返回		
const userSig = genTestUserSig(userID).userSig; // 引入上方js并调用,生成userSig
uni.$TUIKit.login({
	userID: userID,
	userSig: userSig
}).then(() =>{
	let onSdkReady = (event) => {
		// 更新用户昵称及头像
		uni.$TUIKit.updateMyProfile({
			nick: '', // 接口返回的用户昵称
			avatar: '', // 接口返回的用户头像
		}).then(() => {
		}, err => {
		})
	}
	// 监听事件，如：
	uni.$TUIKit.on(uni.$TIM.EVENT.SDK_READY, onSdkReady)
})
uni.$TUICallKit.login({
	SDKAppID: genTestUserSig('').sdkAppID,
	userID: userID,
	userSig: userSig,
}, (res) => {
	if (res.code === 0) {
		// 开启悬浮窗
		uni.$TUICallKit.enableFloatWindow(true);
		// 登录成功后进入首页
		uni.switchTab({
			url: '/pages/index/index'
		})
	} else {
		console.error('login failed, failed message = ', res.msg);
	}
});
// 可以把userID和userSig缓存到本地,用于持久登录
uni.setStorageSync('USERID',userID)
uni.setStorageSync('USERSIG',userSig)
getApp().globalData.userID = userID;
getApp().globalData.userSig = userSig;

3.使用方法

一、音视频

腾讯云音视频插件只需要执行拨打方法即可,收到来电请求后，TUICallKit 组件会自动唤起来电提醒的接听界面。

• 音视频1V1

uni.$TUICallKit.call({
	userID: String('userID'), // 对方的userID
	callMediaType: 1, // 语音通话(callMediaType = 1)、视频通话(callMediaType = 2)
}, (res) => {
    if (res.code === 0) {
		push({
			user_id: String(this.userID),
			content: `[${this.$store.state.common.userInfo.nickname}]向您发起了${type == 1 ? '语音通话' : '视频通话'}`
		})
        console.log('call success');
    } else {
        console.log(`call failed, error message = ${res.msg}`);
    }
});

• 音视频1VN

uni.$TUICallKit.groupCall({
	groupID: 'myGroup',
 	userIDList: ['mike', 'tom'],
  	callMediaType: 1, // 语音通话(callMediaType = 1)、视频通话(callMediaType = 2)
}, (res) => {
  if (res.code === 0) {
    console.log('groupCall success');
  } else {
    console.log(`groupCall failed, error message = ${res.msg}`);
  }
});

还有更多api请查看插件地址: 插件地址

二、IM

监听会话列表&设置消息已读方法在App.vue中已经实现.文章来源地址https://www.toymoban.com/news/detail-467851.html

• 获取会话列表

uni.$TUIKit.getConversationList().then(res=>{
	console.log(res.data.conversationList)
})

• 删除会话

let promise = uni.$TUIKit.deleteConversation('conversationID');
promise.then(function(imResponse) {
	// 删除会话成功
	const { conversationID } = imResponse.data; // 被删除的会话 ID
	uni.showToast({
		title: '删除成功',
		icon: "none"
	})
}).catch(function(imError) {
	console.warn('deleteConversation error:', imError); // 删除会话失败的相关信息
});

• 创建文字/图片消息并发送

let message = uni.$TUIKit.createTextMessage({
	to: 'userID', // 对方用户id
	conversationType: uni.$TIM.TYPES.CONV_C2C, // 消息类型
	// 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
	// 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
	// priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
	payload: {
		text: 'hello world !!!', // 文字内容
	},
	// v2.20.0起支持C2C消息已读回执功能，如果您发消息需要已读回执，需购买旗舰版套餐，并且创建消息时将 needReadReceipt 设置为 true
	needReadReceipt: true
	// 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到，v2.10.2起支持）
	// cloudCustomData: 'your cloud custom data'
})
// 图片消息
// message = uni.$TUIKit.createImageMessage({
//     to: 'userID',
//     conversationType: uni.$TIM.TYPES.CONV_C2C,
//     payload: { file: [] }, // uni.chooseImage返回的本地文件,直接把数组拿过来,参考下方发送视频消息
//     onProgress: function(event) { console.log('file uploading:', event) }
// });
let promise = uni.$TUIKit.sendMessage(message);
promise.then((imResponse)=>{
	// 发送成功
	console.log(imResponse);
}).catch(function(imError) {
	// 发送失败
	console.warn('sendMessage error:', imError);
});

• 创建视频消息并发送

uni.chooseVideo({
	mediaType: ['video'], // 视频
	count: 1,
	compressed: false,
	sourceType: ['camera', 'album'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
	maxDuration: 60, // 设置最长时间60s
	camera: 'back', // 后置摄像头
	success:(res)=>{
		let message = uni.$TUIKit.createVideoMessage({
			to: 'userID',
			conversationType: uni.$TIM.TYPES.CONV_C2C,
			payload: { file: res },
			onProgress: function(event) { console.log('file uploading:', event) }
		});
		// 2. 发送消息
		let promise = uni.$TUIKit.sendMessage(message);
		promise.then((imResponse)=>{
			// 发送成功
			console.log(imResponse);
		}).catch(function(imError) {
			// 发送失败
			console.warn('sendMessage error:', imError);
		});
	}
})

• 创建语音消息并发送语音消息走的是自定义消息，参考文档上的创建语音消息并没有实现会有报错

let message = uni.$TUIKit.createCustomMessage({
	to: 'userID',
	conversationType: uni.$TIM.TYPES.CONV_C2C,
	// 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
	// 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
	// priority: TIM.TYPES.MSG_PRIORITY_HIGH,
	// 注意，这三个参数我这边因为没有其他需求所以直接把三个参数分别使用了。如果有其他的自定义消息,可以把参数设置为JSON对象,定义好自己的规范
	payload: {
		data: '', // 语音地址
		description: 'voice', // 语音类型
		extension: '', // 语音时长
	}
});
// 3. 发送消息
let promise = uni.$TUIKit.sendMessage(message);
promise.then((imResponse)=>{
	// 发送成功
	console.log(imResponse);
}).catch(function(imError) {
	// 发送失败
	console.warn('sendMessage error:', imError);
});

更多api： 文档地址

总结

如有疑问，或者困难可在下方留言.如本文对你有所帮助，给个点赞、收藏再走吧。

本文原创,转载请注明出处！！！

到了这里，关于uniapp对接腾讯云IM+音视频。音视频含UI集成的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！