差别
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
im:web:basics:multiuserconference [2019/07/08 08:22] zhaoliang [共享桌面,仅支持PC Chrome或electron平台] |
im:web:basics:multiuserconference [2020/06/25 02:30] allenwang 移除 |
||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== 多人实时通话 ====== | + | ====== 多人音视频会议 ====== |
---- | ---- | ||
行 5: | 行 5: | ||
===== 产品简介 ===== | ===== 产品简介 ===== | ||
- | 为满足不同场景需求,[[https://github.com/easemob/webim/tree/master/webrtc/dist/EMedia_x1v1.js|EMedia_x1v1.js]]不仅提供了对1v1通话的支持,而且提供了多人通话功能。多人实时音视频会议划分了不同的类型,不同类型对应了不同场景,使你能够轻松地将实时音视频功能集成到你的应用或者网站中。本片将介绍多人音视频使用接入。可参照[[https://github.com/easemob/webim|demo]]。 | + | 多人音视频采用的是媒体流发布和订阅的技术架构。发布是指参会者发布媒体流(即发言,包括视频流和音频流)到服务器,其他人收到发布事件然后去订阅拉取媒体流。 |
- | 在创建会议时可以传入以下几种类型: | + | |
- | - Communication:普通通信会议,最多支持参会者6人,会议里的每个参会者都可以自由说话和发布视频,该会议类型在服务器不做语音的再编码,音质最好,适用于远程医疗,在线客服等场景; | + | 多人音视频里有管理员,主播和观众三种角色。 |
- | - Large Communication:大型通信会议,最多参会者30人,会议里的每个参会者都可以自由说话,最多支持6个人发布视频,该会议模式在服务器做混音处理,支持更多的人说话,适用于大型会议等场景; | + | * 管理员拥有最高权限,可以发布媒体流,订阅媒体流,设定其他人是主播还是观众 |
- | - Live:互动视频会议,会议里支持最多6个主播和600个观众,观众可以通过连麦与主播互动,该会议类型适用于在线教育,互动直播等场景。 | + | |
+ | * 主播可以发布媒体流,订阅媒体流 | ||
- | ==== 产品特性 ==== | + | * 观众只有订阅媒体流权限 |
+ | |||
+ | 环信多人音视频有2种比较常见的使用模式:多人音视频会议和多人音视频互动直播。2种模式使用的是相同的技术架构,开发者可以根据业务场景设置不同的参数,主要区别是: | ||
+ | |||
+ | * 多人音视频会议场景中,在创建会议时指定默认角色为主播,即每个参会者加入会议后都可以发言。开发者也可以根据场景需要,设定一些参会者是以观众角色加入会议。 | ||
+ | |||
+ | * 多人音视频互动直播场景中,在创建会议时指定默认角色为观众,除了管理员(同时也可以是主播)以外,其他人默认是观众。管理员可以设置指定观众成主播实现上麦操作;或设置指定主播为观众,实现下麦操作。 | ||
+ | |||
+ | 多人音视频会议和多人音视频互动直播模式都支持白板、共享桌面。 | ||
+ | |||
+ | ''注意:会议类型将只支持Communication类型,原Large Communication和Live会议类型将弃用。'' | ||
+ | |||
+ | 见[[https://github.com/easemob/webim/tree/master/webrtc/dist/EMedia_x1v1.js|EMedia_x1v1.js]] | ||
+ | ===== 产品特性 ===== | ||
*支持现代浏览器:Chrome/50+、Safari/11+、Firefox; | *支持现代浏览器:Chrome/50+、Safari/11+、Firefox; | ||
行 25: | 行 37: | ||
*依赖https站点 | *依赖https站点 | ||
- | ==== 音视频通信的简要步骤 ==== | + | ===== 音视频通信的简要步骤 ===== |
- | SDK 能够支持音频和视频通信。创建音视频通信的过程简单来说,可以分为以下几步: | + | SDK 能够支持音频和视频通信。创建和操作音视频通信的过程简单来说,可以分为以下几步: |
- | 1. 初始化 SDK,设置监听代理 | + | - 初始化 SDK,设置监听代理 |
- | 2. create: 创建会议 | + | - create: 创建会议 |
- | 3. join: 加入会议 | + | - join: 加入会议 |
- | 4. pub: 发布音视频数据流 | + | - pub: 发布音视频数据流 |
- | 5. sub: 订阅并播放音视频数据流 | + | - sub: 订阅并播放音视频数据流 |
- | 6. leave: 离开会议 | + | - leave: 离开会议 |
- | ==== 基本知识 ==== | + | ===== 基本知识 ===== |
emedia.mgr.ConfrType:多人会议类型 | emedia.mgr.ConfrType:多人会议类型 | ||
- | 1. Communication:普通通信会议,最多支持参会者6人,成员都可以自由说话和发布视频,成员角色Speaker | + | |
+ | 1. Communication:普通通信会议,最多支持参会者9人,成员都可以自由说话和发布视频,成员角色Speaker | ||
2. Large Communication:大型通信会议,最多参会者30人,成员都可以自由说话和发布视频,成员角色Speaker | 2. Large Communication:大型通信会议,最多参会者30人,成员都可以自由说话和发布视频,成员角色Speaker | ||
- | 3. Live:互动视频会议,会议里支持最多6个主播和600个观众 | + | 3. Live:互动视频会议,会议里支持最多9个主播和600个观众 |
<code javascript> | <code javascript> | ||
emedia.mgr.ConfrType = { | emedia.mgr.ConfrType = { | ||
行 53: | 行 66: | ||
TALKER: 3, // 能上传自己的音视频,能观看收听其他主播的音视频,即能发布流和订阅流) | TALKER: 3, // 能上传自己的音视频,能观看收听其他主播的音视频,即能发布流和订阅流) | ||
AUDIENCE: 1 // 观众Audience:只能观看收听音视频,即只能订阅流 | AUDIENCE: 1 // 观众Audience:只能观看收听音视频,即只能订阅流 | ||
+ | }; | ||
+ | </code> | ||
+ | <code javascript> | ||
+ | emedia.mgr.StreamType = { | ||
+ | VIDEO:0,//普通视频 | ||
+ | DESKTOP:1,//共享桌面 | ||
+ | MIXVIDEO:2 //混音视频 | ||
}; | }; | ||
</code> | </code> | ||
行 74: | 行 94: | ||
"id":"MS_X197721744293023744C19M197756407719972865VISITOR", | "id":"MS_X197721744293023744C19M197756407719972865VISITOR", | ||
"globalName":"easemob-demo#chatdemoui_yss000@easemob.com", | "globalName":"easemob-demo#chatdemoui_yss000@easemob.com", | ||
- | "name": "yss000" | + | "name": "yss000", |
+ | "nickName": "yss000" //设置后会生效,不设置默认取name的值 | ||
} | } | ||
</code> | </code> | ||
行 94: | 行 115: | ||
>> 成员如果想改变自己角色,必须想办法通知管理员,只有管理员才能修改 | >> 成员如果想改变自己角色,必须想办法通知管理员,只有管理员才能修改 | ||
- | ===== 多人通信会议功能实现 ===== | + | ===== 多人音视频会议功能实现 ===== |
- | + | ||
- | 如何使用SDK实现多人实时音视频会议 | + | |
- | + | ||
- | Communication和Large Communication除了最大成员数不一样,流程几乎是一样的。以下是从创建会议到离开会议完整的流程讲解: | + | |
+ | 以下是从创建会议到离开会议完整的流程讲解: | ||
+ | ==== 初始化SDK ==== | ||
+ | <code javascript> | ||
+ | // 初始化一些 sdk 的使用功能 | ||
+ | emedia.config({ | ||
+ | restPrefix, //配置服务器域名、必填 比如: 'https://a1-hsb.easemob.com' | ||
+ | appkey, // 配置appkey、必填 | ||
+ | useDeployMore:true //开启多集群部署 | ||
+ | ... 其他的一些配置 | ||
+ | }); | ||
+ | </code> | ||
==== 设置SDK回调 ==== | ==== 设置SDK回调 ==== | ||
+ | |||
+ | 引入SDK | ||
+ | <code javascript> | ||
+ | // 可以使用easemob-webrtc 或者 easemob-emedia | ||
+ | // 使用easemob-webrtc | ||
+ | import webrtc from 'easemob-webrtc' | ||
+ | const emedia = webrtc.emedia | ||
+ | |||
+ | // 使用easemob-emedia | ||
+ | import emedia from 'easemob-emedia' | ||
+ | </code> | ||
进入会议之前,设置SDK回调后,可获知成员加入或离开会议,数据流更新等。 | 进入会议之前,设置SDK回调后,可获知成员加入或离开会议,数据流更新等。 | ||
行 185: | 行 224: | ||
</code> | </code> | ||
+ | <code javascript> | ||
+ | //管理员变更 | ||
+ | emedia.mger.onAdminChanged = admin => {} //admin 管理员信息 | ||
+ | </code> | ||
==== 用户A创建会议 ==== | ==== 用户A创建会议 ==== | ||
+ | confrType: 会议类型;password: 会议密码;rec:是否录制;recMerge:是否合并录制;supportWechatMiniProgram:会议是否支持微信小程序 | ||
<code javascript> | <code javascript> | ||
- | emedia.mgr.createConference(confrType, password).then(function(confr){ | + | emedia.mgr.createConference(confrType, password, rec, recMerge, supportWechatMiniProgram).then(function(confr){ |
+ | console.log(confr.confrId); | ||
}).catch(function(error){ | }).catch(function(error){ | ||
}) | }) | ||
行 203: | 行 246: | ||
}) | }) | ||
+ | </code> | ||
+ | |||
+ | 用户也可以使用下列接口加入房间。可以指定房间的名称,并且在房间不存在时会自动创建。 另外可以在加入会议时指定角色。 | ||
+ | |||
+ | <code javascript> | ||
+ | /** | ||
+ | * 创建房间并加入 | ||
+ | * @method joinRoom | ||
+ | * @param {Object} option | ||
+ | * @param {string} option.roomName - 房间名称 | ||
+ | * @param {string} option.password - 房间密码 | ||
+ | * @param {string} option.role - 进入房间时的角色 | ||
+ | * @param {object} option.config - 扩展能力 可设置以下参数 | ||
+ | * config:{ | ||
+ | nickName,//进入会议的昵称 | ||
+ | ext: {}, //扩展字段 用于自定义 | ||
+ | rec: true, // 开启录制 | ||
+ | recMerge: true, //开启录制合并 | ||
+ | |||
+ | maxTalkerCount:3 //会议最大主播人数 | ||
+ | maxVideoCount:2 //会议最大视频数 | ||
+ | maxAudienceCount:100 //会议最大观众数 | ||
+ | |||
+ | } | ||
+ | */ | ||
+ | |||
+ | |||
+ | |||
+ | try { | ||
+ | const user_room = await emedia.mgr.joinRoom(option); | ||
+ | | ||
+ | user_room: | ||
+ | { | ||
+ | confrId: "IM3U9Z0AHDYQTF8KNDAAD00C147" 会议ID | ||
+ | id: "IM3U9Z0AHDYQTF8KNDAAD00C147" | ||
+ | joinId: "IM3U9Z0AHDYQTF8KNDAAD00C147M2" 在会议中的唯一ID | ||
+ | mixed: false | ||
+ | role: 7 //角色 | ||
+ | roleToken:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJlYXNlbW9iLWRlbW8j..." | ||
+ | ticket: "{\"tktId\":\"IM3U9Z0AHDYQTF8KNDAAD00C147TK1\",..." | ||
+ | type: 10 //会议类型 | ||
+ | } | ||
+ | |||
+ | } catch (error) { | ||
+ | | ||
+ | } | ||
</code> | </code> | ||
==== 管理员A邀请其他人加入会议 ==== | ==== 管理员A邀请其他人加入会议 ==== | ||
行 303: | 行 392: | ||
</code> | </code> | ||
+ | ===== 共享桌面 ===== | ||
+ | 共享桌面,仅支持PC Chrome浏览器或electron平台。 | ||
- | ===== 互动视频会议功能实现 ===== | ||
- | |||
- | 互动视频会议的基本操作(创建、邀请人、发布流、取消发布流、订阅流、取消订阅流、更新发布流程、离开)对应的接口和回调同通信会议是一样的。也可以说 互动视频会议是在通信会议的基础上,增加了角色管理功能,以下着重讲解互动视频会议中的角色管理相关知识点 | ||
- | |||
- | 1. 创建互动视频会议时,接口emedia.mgr.createConference传入的type参数是emedia.mgr.ConfrType.LIVE | ||
- | |||
- | 2. 创建者createAndJoin后的角色是Admin,其他成员第一次调用接口[emedia.mgr.joinConference(confrId, password, ext)]加入直播后的权限是观众Audience,Audience只能订阅数据流 | ||
- | |||
- | 3. 观众Audience如果想发布数据流 即上麦,需要给管理员发申请。SDK没有提供申请接口,你可以自定义。 | ||
- | |||
- | 管理员如果同意Audience上麦,需要调用接口emedia.mgr.grantRole将角色Audience更改为Speaker | ||
- | |||
<code javascript> | <code javascript> | ||
- | emedia.mgr.grantRole(confr, [memberName1, memberName2], emedia.mgr.Role.TALKER) | + | /** |
- | </code> | + | * let params = { |
- | | + | * videoConstaints, |
- | 成员角色改变后,被改变的成员会收到回调 | + | * withAudio, |
+ | * videoTag, | ||
+ | * ext, | ||
+ | * confrId, | ||
+ | * stopSharedCallback | ||
+ | * } | ||
+ | */ | ||
- | <code javascript> | + | /** |
- | emedia.mgr.onRoleChanged = function (role) { | + | * videoConstaints {screenOptions: ['screen', 'window', 'tab']} or true |
+ | * withAudio: true 携带语音,false不携带 | ||
+ | * videoTag 可缺失,如果有 此次publish的媒体数据将会在这个video上显示 将会与stream绑定 | ||
+ | * ext 用户自定义扩展,其他成员可以看到这个字段 | ||
+ | * stopSharedCallback 共享插件 点击【停止共享】的回调函数,做相应的处理(比如删除流...) | ||
+ | */ | ||
+ | // 如果停止共享存在音频的桌面,需自己手动挂断流 执行 emedia.mgr.unpublish(stream) | ||
+ | emedia.mgr.shareDesktopWithAudio(params).then(function(pushedStream){ | ||
+ | //stream 对象 | ||
+ | }).catch(function(error){ | ||
- | }; | + | }); |
+ | |||
+ | //electron平台 默认选择第一个屏幕,如果需要选择其他,需要重写方法 | ||
+ | emedia.chooseElectronDesktopMedia = function(sources, accessApproved){ | ||
+ | var firstSources = sources[0]; | ||
+ | accessApproved(firstSources); | ||
+ | } | ||
</code> | </code> | ||
- | + | ||
- | 4. 角色从Audience变为Speaker,成员就可以发布数据流了 | + | **注意:** |
+ | %%在chrome浏览器中使用时,需要从%%[[https://chrome.google.com/webstore/detail/rtc-share-desktop/ccahbcjalpomijfpjemdgpnbogofnlgl|chrome store]] 或者从[[https://download-sdk.oss-cn-beijing.aliyuncs.com/rtc_desktop_share.zip|环信服务器]] %%中下载插件,解压后在chrome浏览器中输入 chrome://extensions/, 选择“Load unpacked” 选择解压后的文件夹中的1.0_0文件夹,加载插件。%% | ||
===== 其他接口 ===== | ===== 其他接口 ===== | ||
行 342: | 行 444: | ||
==== 销毁会议 ==== | ==== 销毁会议 ==== | ||
<code javascript> | <code javascript> | ||
- | emedia.mgr.destroyConference(confr).then(function(){ | + | emedia.mgr.destroyConference(confrId).then(function(){ |
| | ||
}).catch(function(error){ | }).catch(function(error){ | ||
行 348: | 行 450: | ||
}) | }) | ||
</code> | </code> | ||
- | ==== 踢人 ==== | + | |
+ | ==== 踢人 ==== | ||
<code javascript> | <code javascript> | ||
emedia.mgr.kickMembersById(confr, memberNames).then(function(){ | emedia.mgr.kickMembersById(confr, memberNames).then(function(){ | ||
行 356: | 行 459: | ||
}) | }) | ||
</code> | </code> | ||
+ | |||
+ | ==== 获取会议信息 ==== | ||
+ | 在会议进行中,可以通过selectConfr 方法来查询会议信息,从而可以拿到主播列表,观众人数等信息。 | ||
+ | |||
+ | <code javascript> | ||
+ | // confrId: 会议Id | ||
+ | // password: 会议密码 | ||
+ | emedia.mgr.selectConfr(confrId, password).then(function(){ | ||
+ | | ||
+ | }).catch(function(error){ | ||
+ | |||
+ | }) | ||
+ | </code> | ||
+ | |||
==== 授权 ==== | ==== 授权 ==== | ||
<code javascript> | <code javascript> | ||
行 413: | 行 530: | ||
}); | }); | ||
</code> | </code> | ||
- | |||
- | ==== 共享桌面,仅支持PC Chrome或electron平台 ==== | ||
- | <code javascript> | ||
- | /** | ||
- | * videoConstaints {screenOptions: ['screen', 'window', 'tab']} or true | ||
- | * withAudio: true 携带语音,false不携带 | ||
- | * videoTag 可缺失,如果有 此次publish的媒体数据将会在这个video上显示 将会与stream绑定 | ||
- | * ext 用户自定义扩展,其他成员可以看到这个字段 | ||
- | * | ||
- | */ | ||
- | emedia.mgr.shareDesktopWithAudio(videoConstaints, withAudio, videoTag, ext).then(function(pushedStream){ | ||
- | //stream 对象 | ||
- | }).catch(function(error){ | ||
- | |||
- | }); | ||
- | |||
- | //electron平台 默认选择第一个屏幕,如果需要选择其他,需要重写方法 | ||
- | emedia.chooseElectronDesktopMedia = function(sources, accessApproved){ | ||
- | var firstSources = sources[0]; | ||
- | accessApproved(firstSources); | ||
- | } | ||
- | </code> | ||
- | |||
- | **注意:** | ||
- | %%在chrome浏览器中使用时,需要从%%[[https://chrome.google.com/webstore/detail/rtc-share-desktop/ccahbcjalpomijfpjemdgpnbogofnlgl|chrome store]] 或者从[[https://download-sdk.oss-cn-beijing.aliyuncs.com/rtc_desktop_share.zip|环信服务器]] %%中下载插件,解压后在chrome浏览器中输入 chrome://extensions/, 选择“Load unpacked” 选择解压后的文件夹中的1.0_0文件夹,加载插件。%% | ||
- | |||
==== 取消publish ==== | ==== 取消publish ==== | ||
行 498: | 行 589: | ||
==== 切换摄像头==== | ==== 切换摄像头==== | ||
<code javascript> | <code javascript> | ||
- | emedia.mgr.switchCamera().then(function(){ | + | // 随机切换摄像头 |
+ | emedia.mgr.changeCamera().then(function(){ | ||
+ | // 无参数 | ||
+ | }).catch(function(){ | ||
+ | }) | ||
+ | // 切换手机前后摄像头 | ||
+ | emedia.mgr.switchMobileCamera().then(function(){ | ||
+ | // 无参数 | ||
}).catch(function(){ | }).catch(function(){ | ||
行 649: | 行 747: | ||
</code> | </code> | ||
+ | ==== 支持会议属性 ==== | ||
+ | <code javascript> | ||
+ | // 用来自定义一些属性,广播给会议中的成员 | ||
+ | // 有人设置会议属性,所有的成员都能收到 | ||
+ | let options = { | ||
+ | key:username, | ||
+ | val:'request_tobe_speaker' | ||
+ | } | ||
+ | |||
+ | // a. 设置会议属性 | ||
+ | emedia.mgr.setConferenceAttrs(options) | ||
+ | // b. 删除会议属性 | ||
+ | emedia.mgr.deleteConferenceAttrs(options) | ||
+ | // c. 会议属性变更回调 | ||
+ | emedia.mgr.onConfrAttrsUpdated = attrs => {} //attrs 会议属性集合 Array | ||
+ | </code> | ||
---- | ---- | ||
<WRAP group> | <WRAP group> |