差别
这里会显示出您选择的修订版和当前版本之间的差别。
| 两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
|
im:web:basics:multiuserconference [2019/06/18 10:02] jk [共享桌面,仅支持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://extentions, 选择“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> | ||