uniapp对接腾讯云IM+音视频。音视频含UI集成
2024-06-03 10:32:10
uniapp对接腾讯云IM+音视频
文章目录
- uniapp对接腾讯云IM+音视频
- 前言
- 一、准备工作
- 二、使用步骤
- 1.App.vue配置
- 2.登录时操作 login.vue
- 3.使用方法
- 一、音视频
- `还有更多api请查看插件地址: ` [插件地址](https://ext.dcloud.net.cn/plugin?id=9035)
- 二、IM
- `更多api：` [文档地址](https://web.sdk.qcloud.com/im/doc/zh-cn/SDK.html)
- 总结
- `如有疑问，或者困难可在下方留言.如本文对你有所帮助，给个点赞、收藏再走吧。`
- `本文原创,转载请注明出处！！！`
前言
提示：作者已经实现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中的SDKAPPIDuserID: '', // 用户id,登录接口返回的用户id,也可以任意指定,但不要重复userSig: '', // 登录时生成},onLaunch() {// 登录成功后存储的userID和userSigif(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;// 添加监听事件// 通话状态监听TUICallingEvent.addEventListener('onError', (res) => {console.log('onError', JSON.stringify(res));});TUICallingEvent.addEventListener('onCallReceived', (res) => {console.log('onCallReceived', JSON.stringify(res));});TUICallingEvent.addEventListener('onCallCancelled', (res) => {console.log('onCallCancelled', res);});TUICallingEvent.addEventListener('onCallBegin', (res) => {console.log('onCallBegin', JSON.stringify(res));});TUICallingEvent.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 = 0for (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]// 如果已登录并且能获取到用户idif(uni.getStorageSync('token') && this.globalData.userID){console.log(uni.getStorageSync('token'), this.globalData.userID);// 登录腾讯IMuni.$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'), // 对方的userIDcallMediaType: 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中已经实现.
- 获取会话列表
uni.$TUIKit.getConversationList().then(res=>{console.log(res.data.conversationList)
})
- 删除会话
let promise = uni.$TUIKit.deleteConversation('conversationID');
promise.then(function(imResponse) {// 删除会话成功const { conversationID } = imResponse.data; // 被删除的会话 IDuni.showToast({title: '删除成功',icon: "none"})
}).catch(function(imError) {console.warn('deleteConversation error:', imError); // 删除会话失败的相关信息
});
- 创建文字/图片消息并发送
let message = uni.$TUIKit.createTextMessage({to: 'userID', // 对方用户idconversationType: 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 设置为 trueneedReadReceipt: 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, // 设置最长时间60scamera: '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集成相关推荐
- 监控、无人机摄像头RTSP协议对接腾讯云直播
监控.无人机摄像头RTSP协议对接腾讯云直播 1. 需求与目标 传统监控高清摄像机ip camera(如: 海康,大华等)遵循监控行业标准,一般只支持rtsp传输协议,互联网直播通用标准为rtmp协议 ...
- uniapp结合腾讯云及时通信IM的聊天记录本地存储方案
uniapp结合腾讯云及时通信IM的聊天记录本地存储方案 UniApp 是一个跨平台的应用开发框架,可以使用 Vue.js 开发多端应用(如H5.小程序.App等).在 UniApp 中,可以使用 u ...
- 直播系统开发之ios对接腾讯云直播sdk
这里是使用 Swift 语言编写对接腾讯云直播 SDK 的 demo 的示例代码.这段代码仅作为参考,实际应用中可能需要根据您的具体需求进行修改. 首先,你需要从腾讯云控制台获取 SDK 的 AppI ...
- 腾讯云直播代码 java_JAVA 对接腾讯云直播的实现
签名授权 public static T TecentDoPostJsonV3(String url,String key,String secretId, TecentPublicParams he ...
- 腾讯直播与 JAVA整合_JAVA对接腾讯云直播如何实现 JAVA对接腾讯云直播实现代码...
JAVA对接腾讯云直播如何实现?本篇文章小编给大家分享一下JAVA对接腾讯云直播实现代码,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 签名授权 public static ...
- python项目对接腾讯云发送短信
python项目对接腾讯云发送短信 先安装需要的包 pip install tencentcloud-sdk-python # -*- coding: utf-8 -*- # pip install ...
- 小熊派 移植TencentOS-tiny+EC20+MQTT对接腾讯云
1.参考文档 TencentOS tiny端云对接开发指南(IoTHub)以及Tencent tiny源码库 TencentOS-tiny官网 2.云端配置 登陆腾讯云,点击"云产品&quo ...
- TencentOS-tiny+ESP8266+mqttclient对接腾讯云平台IoThub
1. 硬件准备 本文中我准备的腾讯官方EVB_MX_Plus开发板和ESP8266 WIFI通信模组: 2. 云端产品创建 在云端创建产品的过程和下文相同,不再赘述. 小熊派移植TencentOS-t ...
- ESP32上手笔记 | 04 -通过MQTT对接腾讯云IoT Explorer物联网平台（PubSubClient）
一.WIFI库和ArduinoJson库 阅读文章:ESP32上手笔记 | 03 -通过HTTP获取天气信息(WiFi+HTTPClient+ArduinoJson). 二.PubSubClient库 ...
最新文章
- uniapp 的使用
- php动态验证码脚本,这个PHP脚本有什么问题吗？ (验证码)
- 树莓派 之 Screen
- LeetCode - Reorder List
- 信息系统项目管理师-信息化与信息系统考点笔记(下)
- Python自动化测试 （九）urllib2 发送HTTP Request
- oracle的scn增量备份,【Oracle】基于SCN的增量备份修复DataGuard GAP
- 在配置静态IP的时候遇到 ：bringing up interface eth0 : error unknown connection
- Linux版本的SVN客户端,linux 下安装 subversion(svn) 客户端
- Git 好用的客户端 SourceTree破解
- 基于Python3-Pygame的推箱子游戏
- 深度学习2.0-15.随机梯度下降之梯度下降简介
- 大文件上传下载实现思路，分片、断点续传代码实现，以及webUpload组件
- 标准差和标准误的区别
- 基于权限特征和机器学习的Android恶意程序识别技术
- 波士顿房价预测python决策树_机器学习第二练---波士顿房价预测
- 【笔记整理】jq笔记
- Image类--旋转和翻转图片
- [PHP] B2B2C商品模块数据库设计
- 颜色恒常性 Retinex