uniapp集成多人音视频通话

uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台，uniapp需要使用hbuilderX进行开发。

环信为用户使用uniapp开发原生应用并拥有音视频功能，特别提供了适配uniapp的音视频SDK和uniapp原生插件，用户可以集成后快速在android和ios原生客户端使用音视频功能。

PS：目前音视频插件仅支持运行在iOS以及Android，暂不支持运行在微信小程序使用。如需运行到微信小程序我们为此提供了小程序音视频SDK，请移步小程序集成多人音视频文档部分。

使用 uniapp 集成多人音视频SDK，需要下载环信uniapp原生插件<emlive-pusher>、<emlive-player>配合一起使用。音视频SDK依赖IM SDK, 所以要先集成IM，并把IM SDK实例挂载在全局变量下：uni.WebIM = websdk, 可以参考uniapp demo utils/WebIM 文件。

下载好uniapp demo后，导入hbuilderX，需要检查manifest.json/原生插件配置中是否选中了插件，否则需要自己选择nativeplugins中的EMLiveplugin插件，然后点击hbuilderX的运行→运行到手机或模拟器→制作自定义调试基座。 此时hbuilderX会进行打包，等打包成功后，点击运行→运行到手机或模拟器→运行基座选择→自定义调试基座，选择好后重新点击运行→运行到手机或模拟器→找到自己的设备 等安装好后，就可以在群组聊天中点击电话的icon，发起多人会议。

在插件市场下载好插件后，放到uniapp工程的nativeplugins目录下，如果没有此目录需要自己创建。导入好插件后需要在工程目录manifest.json中选择：App原生插件配置/本地插件中选择刚导入的插件[EMLivePlugin(适用平台： Android,IOS)]，最后需要在hbuilderX上选择： 运行→运行到手机或模拟器→制作自定义调试基座，这样插件就导入成功了，下次运行时在运行→运行到手机或模拟器→运行基座选择中选择自定义调试基座。

<emlive-pusher>插件参数说明

示例代码：

<emlive-player 
    ref="livePlayer" 
    style="width:350px;height:300px" 
    :muted="false" 
    :enable-camera="true" 
    object-fit="fill" 
    :rtcLogToConsole="true" 
    @bindstatechange="onStateChange" 
    @bindnetstatus="onNetStatusChange" 
    @callbackData="onData" 
    @callbackStats="onStats">
</emlive-player>

<emlive-player>插件参数说明

示例代码：

<emlive-player 
    ref="livePlayer" 
    style="width:350px;height:300px" 
    :muted="false" 
    :enable-camera="true" 
    object-fit="fill" 
    :rtcLogToConsole="true" 
    @bindstatechange="onStateChange" 
    @bindnetstatus="onNetStatusChange" 
    @callbackData="onData" 
    @callbackStats="onStats">
</emlive-player>

bindstatechange回调参数说明：

bindnetstatus回调参数说明：

uniapp音视频SDK的集成和微信小程序音视频SDK的集成类似，主要分为以下几个步骤：

• 1、引入SDK
• 2、创建会议
• 3、自己加入会议并发出邀请（邀请方式为：发送携带会议信息的邀请信息，可以是文本消息亦可以是自定义消息等方式。）
• 4、发布自己的音视频流
• 5、其他人收到邀请加入会议
• 6、其他人发布音视频流
• 7、监听SDK onMemberJoined、onStreamAdded事件，收到其他人的流之后订阅流
• 8、监听插件 callbackData、bindstatechange事件，将数据传给SDK
• 9、显示画面
• 10、退出会议

SDK下载地址：

• 通过github仓库地址

音视频SDK在emediaSDK/emedia_for_miniProgram.js

引入：

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

调用createConference创建会议，示例代码：

/**
 * @param {number} confrType - 会议类型, 建议使用 10
 * @param {string} password - 会议密码
 * @param {boolean} rec - 是否录制
 * @param {boolean} recMerge 是否合并录制
 */
uni.emedia.mgr.createConference(confrType, password, rec, recMerge).then( (data) => {
    let ticket = data.data.ticket
    let ticketJosn = JSON.parse(ticket)
    let confrId = ticketJosn.confrId
})

调用joinConference加入会议，示例代码：

/**
 * @param {string} confrId - 会议id
 * @param {string} password - 会议密码
 */
uni.emedia.mgr.joinConference(confrId, password)

调用publish加入会议，示例代码：

/**
 * @param {string} confrId - 会议id
 * @param {object} livePusher - emlivePusher 插件
 */
uni.emedia.mgr.publish(confrId, this.$refs.livePusher)

使用onMemberJoined监听有人加入会议，示例代码：

uni.emedia.mgr.onMemberJoined = function(member){
    // member 人员信息
}

使用onStreamAdded回调监听有媒体流加入，示例代码：

uni.emedia.mgr.onStreamAdded = function(stream) {
    // stream 媒体流
}

调用subscribe订阅媒体流，示例代码：

/**
 * @prama {string} confrId - 会议id
 * @prama {object} stream - 媒体流
 * @prama {object} livePlayer - emlivePlayer 插件
 */
uni.emedia.mgr.subscribe(confrId, stream, this.$refs.livePlayer)

将插件callbackData 和 bindstatechange 返回的数据传给SDK，示例代码：

<!-- template -->
<emlive-pusher 
    ref="livePusher" 
    objectFit="fill"
    :videoWidth="640"
    :videoHeight="480"
    :muted="muted" 
    :enableCamera="enableCamera" 
    :devicePosition="devicePosition"
    :rtcLogToConsole="true"
    @bindnetstatus="netstatus" 
    @bindstatechange="statechange" 
    @callbackData="onData"
    >
</emlive-pusher>

<emlive-player
    ref="livePlayer" 
    objectFit="fit" 
    @bindstatechange="playerStateChange"
    @bindnetstatus="playerNetChange"
    :muted="false"
    :enableCamera="true" 
    :openSpeaker="openSpeaker"
    @callbackData="onPlayerData"
    >
</emlive-player>

// script
onData(data){
    uni.emedia.mgr.postMessage(confrId, data, this.$refs.livePusher)
}
onPlayerData(data){
    uni.emedia.mgr.postMessage(confrId, data, this.$refs.livePlayer)
}
statechange(state){
    uni.emedia.mgr.onStateChange(state)
}

// 会议类型
emedia.mgr.ConfrType = {
   COMMUNICATION: 10, //普通会议模式
   COMMUNICATION_MIX: 11, //大会议模式
   LIVE: 12, //直播模式
};

// 角色
emedia.mgr.Role = {
    ADMIN: 7, //管理员(可推送视频、可解散会议、可踢人、可变更其他人角色，会议创建者默认为管理员)
    TALKER: 3, // 主播（可发言、可观看）
    AUDIENCE: 1 // 观众（仅可以观看）
};

1、创建会议

/**
 * @method createConference 创建会议
 * @param {string} confrType - 会议类型
 * @param {string} password - 会议密码
 * @param {boolean} rec - 是否录制 默认false
 * @param {boolean} recMerge - 是否合并 默认false
 */
emedia.mgr.createConference(confrType, password, rec, recMerge)

2、加入会议

/**
 * @method joinConference 加入会议
 * @param {string} confrId - 会议id
 * @param {string} password - 会议密码
 */
uni.emedia.mgr.joinConference(confrId, password)

3、发布流

/**
 * @method publish 发布流
 * @param {string} confrId - 会议id
 * @param {object} livePusher - emlivePusher 插件
 */
uni.emedia.mgr.publish(confrId, this.$refs.livePusher)

4、订阅流

/**
 * @method publish 订阅流
 * @param {string} confrId - 会议id
 * @param {object} livePusher - emlivePusher 插件
 */
uni.emedia.mgr.subscribe(confrId, stream, this.$refs.livePlayer)

5、把插件callbackData返回的数据传给SDK

/**
 * @method postMessage 把插件数据传给SDK
 * @param {string} confrId - 会议id
 * @param {object} data - 插件会烦数据
 * @param {object} emlivePlugin - emlivePusher 或者 emlivePlayer
 */
uni.emedia.mgr.postMessage(confrId, data, emlivePlugin)

6、将插件bindstatechange返回的数据传给SDK

/**
 * @method onStateChange 把插件state数据传给SDK
 * @param {object} state - 插件状态
 */
uni.emedia.mgr.postMessage(state)

7、退出会议

/**
 * @method exitConference 退出会议
 * @param {string} confrId - 会议id
 */
uni.emedia.mgr.exitConference(confrId)

8、解散会议

/**
 * @method destroyConference 解散会议
 * @param {string} confrId - 会议id
 */
uni.emedia.mgr.destroyConference(confrId)

9、踢人

/**
 * @method kickMembersById 解散会议
 * @param {string} confrId - 会议id
 * @param {Array} memberNames 踢出的人
 */
uni.emedia.mgr.kickMembersById(confrId, memberNames)

10、改变角色

/**
 * @method grantRole 改变角色
 * @param {string} confrId 会议id
 * @param {Array} memberNames 人员
 * @param {string} role 角色
 */
emedia.mgr.grantRole(confrId, memberNames, role)

1、有人加入会议，已经在会议中的人将会收到回调

emedia.mgr.onMemberJoined = function (member) {};

2、有人退出会议，已经在会议中的人将会收到回调

emedia.mgr.onMemberExited = function (member) {};

3、有媒体流加入，如有人推流之后

emedia.mgr.onStreamAdded = function (stream) {};

4、有媒体流移除，如有人退出之后

emedia.mgr.onStreamRemoved = function (stream) {};

5、角色改变

emedia.mgr.onRoleChanged = function (role) {};

6、媒体流发生变化，比如有人关闭摄像头。

emedia.mgr.onMediaChanaged = function (stream) {};

7、会议退出，自己主动退出，服务端主动关闭；

emedia.mgr.onConferenceExit = function (reason) {};

1、如何排查问题？

• 将插件的rtcLogToConsole设置为true, 在bindstatechange、callbackData可以查看到相关日志

2、demo基于hbuilderX版本？

• demo基于hbuilderX 2.9.10版本

3、使用插件报错？

• 插件是原生插件，需要在nvue页面里使用（uni-app不容许做成组件使用，只容许作为单独页面使用）