uniapp使用环信插件实现视频通话

前言：因为我所做的项目需求是，接到后端推送视频消息，APP端点击消息跳转到通话页面进行1对1通话，而后端已经进行账号好友等的处理，环信提供的demo很多功能前端暂时用不到了，以下就把我用到的罗列出来。

PS：本人并不是前端大神，第一次分享文章，有写不对的欢迎提出来哦，请大佬们多多包涵！

效果：

一、引入插件

1. 首先，在插件市场https://ext.dcloud.net.cn/plugin?id=3507，按照官方文档集成参考说明，把所用到插件导入到你的项目中
   

2. 下载环信demo，以下是需要直接复制粘贴到你的项目中的sdk和组件以及你所用到的图片，图片暂不展示
   
   

3. 音视频SDK在emediaSDK/emedia_for_miniProgram.js里，引入SDK方法：在App.vue页面引入

let emedia = uni.emedia = require("./emediaSDK/emedia_for_miniProgram");
    emedia.config({
   useUniappPlugin: true}) // 设置使用uniapp插件

二、改造demo实现我的项目需求

1. 项目只是单纯实现接听视频通话，所以思路大概如下：
   （1）项目需求直接用项目的账号进行登录，后端已处理环信的账号登录、好友绑定、创建群聊等，所以我这边登录项目的账号的时候已经跟后端的账号好友绑定了。现在展示一下环信登录的代码：
   (appKey是每个项目使用环信的唯一标识，就相当于微信小程序的appid)

// //接收环信多人视频
var options = {
   
	apiUrl: 'https://a1.easemob.com',
	user: XX,
	pwd: XX,
	appKey: XX
};
//环信登录
WebIM.conn.open(options);

（2）在App.vue入口页，通过onTextMessage（）函数监听到后端传来的视频参数，接收到我的账号、发出视频邀请的账号、会议Id，接收到的参数直接传入groupChatRoom页面：
（这里只展示关键代码，后面附上groupChatRoom页面完整代码）

WebIM.conn.listen({
   
	onTextMessage(message) {
   
		console.log("onTextMessage", message);
		if (message) {
   
		   if (onMessageError(message)) {
   
		      msgStorage.saveReceiveMsg(message, msgType.TEXT);
		   }
		var my = uni.getStorageSync("myUsername");
		var nameList = {
   
			myName: my,
			your: message.from,
			groupId: message.ext.conferenceId
		};
		uni.navigateTo({
   
			url: "/pages/groupChatRoom/groupChatRoom?username=" + JSON.stringify(nameList)
		});
		calcUnReadSpot(message);
		ack(message);
	}
},
		

（3）groupChatRoom页面里展示的是接收群聊消息，因为后端已做好好友绑定、创建群聊，所以这里我只需列出后端传来的最新消息即可，以下是demo提供的处理数据的代码，有一些数据我的项目需求用不到，不过懒得整理了，处理最后得到的array数据，存入浏览器本地，之后需要调用到：

getChatList() {
   
    var array = [];
    var member = uni.getStorageSync("member");
    var myName = uni.getStorageSync("myUsername");
    var listGroups = uni.getStorageSync('listGroup') || [];

    for (let i = 0; i < member.length; i++) {
   
        let newChatMsgs = uni.getStorageSync(member[i].name + myName) || [];
        let historyChatMsgs = uni.getStorageSync("rendered_" + member[i].name + myName) || [];
        let curChatMsgs = historyChatMsgs.concat(newChatMsgs);

        if (curChatMsgs.length) {
   
            let lastChatMsg = curChatMsgs[curChatMsgs.length - 1];
            lastChatMsg.unReadCount = newChatMsgs.length;

            if (lastChatMsg.unReadCount > 99) {
   
                lastChatMsg.unReadCount = "99+";
            }

            let dateArr = lastChatMsg.time.split(' ')[0].split('-');
            let timeArr = lastChatMsg.time.split(' ')[1].split(':');
            let month = dateArr[2] < 10 ? '0' + dateArr[2] : dateArr[2];
            lastChatMsg.dateTimeNum = `${
     dateArr[1]}${
     month}${
     timeArr[0]}${
     timeArr[1]}${
     timeArr[2]}`;
            lastChatMsg.time = `${
     dateArr[1]}月${
     dateArr[2]}日 ${
     timeArr[0]}时${
     timeArr[1]}分`;
            array.push(lastChatMsg);
        }
    }

    for (let i = 0; i < listGrou