实现基础功能(Web)
更新时间: 2024/08/07 16:14:03
本文为您介绍如何通过 NEMeetingKit 提供的一套简单易用的接口,快速地将音视频会议基础功能集成至现有应用中。
API 时序图
NEMeetingKit 实现在线会议的主要流程如下图所示。
若调用接口失败,您可以通过 callback 输出进行错误排查。示例代码如下:
const obj = {
nickName: '', //人员昵称,长度最大为 20 字符
meetingNum: '', //要加入会议ID
video: 1, // 1开启2关闭(匿名加入房间需要)
audio: 1, // 1开启2关闭(匿名加入房间需要)
}
function callback(e) {
if(e) console.log(e.name, e.message) // 有参数时证明方法异常
}
NEMeetingKit.actions.join(obj, callback)
初始化 SDK
初始化会议 Web 组件,设置页面宽高。
调用 init
方法完成初始化操作。
示例代码如下:
const config = {
appKey: '', //网易会议appkey
meetingServerDomain: '', //会议服务器地址。若为非私有化项目,则不用填写
}
/* 初始化
* @param width:宽度(px),为0则表示100%,宽高建议比例4:3
* @param height:高度(px),为0则表示100%,宽高建议比例4:3
* @param config:项目配置
* @param callback: 初始化完成回调
*/
NEMeetingKit.actions.init(800, 600, config, callback)//宽,高,配置项, 初始化成功回调 宽高单位是px,
- 请不要重复初始化,否则 SDK 会报错。
- 若您在初始化组件时传入了 appKey 和 meetingServerDomain,则后续在调用其他方法时无需传入这些参数。
- 配置 meetingServerDomain 参数时,请使用 https 协议。若为非协议地址,比如 xxx.xxx.com,则地址默认为
https://xxx.xxx.com
。 - 若您希望全屏展示会议界面,请参考如下代码补充样式:
html, body { height: 100%; }
登录鉴权
请求 SDK 进行登录鉴权,您只有完成 SDK 登录鉴权才可以创建会议。
使用账号 ID(accountId)和 Token(accountToken)登录,账号信息需要从网易会议服务端获取,由您自行实现相关业务逻辑。
已登录的用户若在其他页面再次登录、创建会议或加入会议,会影响当前已登录的页面,造成互踢。
示例代码如下:
const obj = {
accountId: '', //账号ID
accountToken: '', //账号Token
}
NEMeetingKit.actions.login(obj, callback)
创建会议
在已经完成 SDK 登录鉴权的状态下,创建并开始一个新的会议。
- 配置创建会议相关参数,调用
create
方法创建会议并进行回调处理。
示例代码如下:
const obj = {
nickName: '', //人员昵称,长度最大为 20 字符
meetingNum: '', //会议号。登录后可以通过NEMeetingKit.actions.accountInfo.meetingNum获取个人会议号,如果为空则是随机会议
video: 1, // 1开启2关闭
audio: 1, // 1开启2关闭
roleBinds: {
'userUuid': 'cohost'
}, //指定用户角色类型,key为用户id, value可以设置为 host,cohost,member
meetingIdDisplayOptions: 0, // 0 都展示 1 展示长号,2 展示短号 默认为 0
toolBarList: [], // 主区按钮自定义设置
moreBarList: [], // 更多区按钮自定义排列
noRename: false, // 是否开启会中改名,默认为false(开启)
defaultWindowMode: 1, // 入会时模式,1 常规(默认), 2白板
noCloudRecord: false, // 开启会议录制,false(默认)开启,true 关闭
noSip: true, //开启 SIP 用户入会, true(默认)不开启, false 开启
memberTag: '', // 成员自定义tag
attendeeVideoOff: 0, // 成员入会后全体关闭视频,且不允许自主打开,默认允许打开
attendeeAudioOff: 0, // 成员入会后全体静音,且不允许自主打开,默认允许打开
showMaxCount: false, // 是否显示会议应进最大人数,需配合extraData字段设置
showSubject: false, // 是否显示会议主题
showMemberTag: false, // 是否显示成员标签
enableFileMessage: true //是否允许发送/接收文件消息,默认为 true
enableImageMessage: true; //是否允许发送/接收图片消息,默认为 true
enableUnmuteBySpace: false; // 是否开启长按空格解除静音功能,默认为 false
extraData: '', // 扩展字段,格式为json字符串,如果showMaxCount字段设置为true,且该字段传{maxCount: 100},会议应进最大人数为100
showMeetingRemainingTip: false, // 是否显示会议剩余时间提醒(可选),默认为false 关闭
}
NEMeetingKit.actions.create(obj, callback)
具体如何自定义 Toolbar 和更多菜单请参考自定义菜单。
- 会议成功创建后,SDK 会拉起会议界面并接管会议逻辑:创建会议的用户会直接加入会议并自动成为该会议的主持人,可以进行相关的会议控制操作;其他用户可以通过该会议号入会。
加入会议
在已经完成 SDK 登录鉴权的状态下,加入一个当前正在进行中的会议。
配置加入会议相关参数,调用 join
方法加入会议并进行回调处理。
示例代码如下:
//
const obj = {
nickName: '', //人员昵称,长度最大为 20 字符
meetingNum: '', //要加入的会议ID,此处应传调用服务端创建会议接口时返回的 meetingNum
video: 1, // 1开启2关闭(匿名加入房间需要)
audio: 1, // 1开启2关闭(匿名加入房间需要)
password: '', // 加入预约会议时可使用
meetingIdDisplayOptions: 0, // 0 都展示 1 展示长号,2 展示短号 默认为 0
appkey: '', //网易会议appkey(匿名加入房间需要,初始化传入则暂不需要)
meetingServerDomain: '', //会议服务器地址,支持私有化部署, 为空则默认为云信线上服务器(匿名加入房间需要,初始化传入则暂不需要)
toolBarList: [], // 主区按钮自定义设置
moreBarList: [], // 更多区按钮自定义排列
noRename: false, // 是否开启会中改名,默认为false(开启)
defaultWindowMode: 1, // 入会时模式,1 常规(默认), 2白板
noSip: true, //开启 SIP 用户入会, true(默认)不开启, false 开启
memberTag: '', // 成员自定义tag
showMaxCount: false, // 是否显示会议应进最大人数
showSubject: false, // 是否显示会议主题
showMemberTag: false, // 是否显示成员标签
enableFileMessage: true //是否允许发送/接收文件消息,默认为 true
enableImageMessage: true; //是否允许发送/接收图片消息,默认为 true
enableUnmuteBySpace: false; // 是否开启长按空格解除静音功能,默认为 false
}
NEMeetingKit.actions.join(obj, callback)
具体如何自定义 Toolbar 和更多菜单请参考自定义菜单。
匿名入会
在已完成初始化的状态下,匿名加入一个当前正在进行中的会议。
配置加入会议相关参数,调用 anonymousJoinMeeting
方法匿名加入会议并进行回调处理。
示例代码如下:
//
const obj = {
nickName: '', //人员昵称,长度最大为 20 字符
meetingNum: '', //要加入会议ID
video: 1, // 1开启2关闭(匿名加入房间需要)
audio: 1, // 1开启2关闭(匿名加入房间需要)
password: '', // 加入预约会议时可使用
meetingIdDisplayOptions: 0, // 0 都展示 1 展示长号,2 展示短号 默认为 0
appkey: '', //网易会议appkey(匿名加入房间需要,初始化传入则暂不需要)
meetingServerDomain: '', //会议服务器地址,支持私有化部署, 为空则默认为云信线上服务器(匿名加入房间需要,初始化传入则暂不需要)
toolBarList: [], // 主区按钮自定义设置
moreBarList: [], // 更多区按钮自定义排列
noRename: false, // 是否开启会中改名,默认为false(开启)
defaultWindowMode: 1, // 入会时模式,1 常规(默认), 2白板
memberTag: '', // 成员自定义tag
showMaxCount: false, // 是否显示会议应进最大人数
showSubject: false, // 是否显示会议主题
showMemberTag: false, // 是否显示成员标签
showMeetingRemainingTip: false, // 是否显示会议剩余时间提醒(可选),默认为false 关闭
}
NEMeetingKit.actions.anonymousJoinMeeting(obj, callback)
具体如何自定义 Toolbar 和更多菜单请参考自定义菜单。
监听成员进出会议房间状态
通过注册成员进出会议房间状态回调接口,监听成员进出会议房间状态的变更通知,从而实现会议界面上实时更新当前会议状态,包括参会人的加入或离开。
示例代码如下:
NEMeetingKit.actions.on('peerJoin', function(uid) {
console.log('成员加入', uid);
})
NEMeetingKit.actions.on('peerLeave', function(uid) {
console.log('成员离开', uid);
})
监听全局事件
通过注册全局事件回调接口,获取相应事件通知,目前支持监听 RTC 初始化和销毁相关的事件。
-
注册回调接口
addGlobalEventListener
开始监听。示例代码如下:
NEMeetingKit.actions.addGlobalEventListener({ // rtc engine 初始化前回调 beforeRtcEngineInitialize(meetingId) { // todo }, // rtc engine 初始化后回调 afterRtcEngineInitialize(meetingId, rtcWrapper) { // 获取rtc client const client = rtcWrapper.rtcEngine.client }, // rtc engine 销毁前回调 beforeRtcEngineRelease(meetingId, rtcWrapper) { // 获取rtc client const client = rtcWrapper.rtcEngine.client }, })
-
反注册回调接口
removeGlobalEventListener
停止监听。示例代码如下:
NEMeetingKit.actions.removeGlobalEventListener()
销毁 SDK
调用 destroy
方法销毁 SDK,退出会议。
销毁 SDK 后,该节点不会销毁,仍保留一部分样式,不会影响页面结构。
示例代码如下:
NEMeetingKit.actions.destroy()