实现基础功能(Web)

更新时间: 2023/08/14 07:36:28

本文为您介绍如何通过 NEMeetingKit 提供的一套简单易用的接口,快速地将音视频会议基础功能集成至现有应用中。

API 时序图

NEMeetingKit 实现在线会议的主要流程如下图所示。

meeting_flow_chart.jpg

若调用接口失败,您可以通过 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 登录鉴权的状态下,创建并开始一个新的会议。

  1. 配置创建会议相关参数,调用 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更多菜单请参考自定义菜单

  1. 会议成功创建后,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 初始化和销毁相关的事件。

  1. 注册回调接口 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
      },
    })
    
  2. 反注册回调接口 removeGlobalEventListener 停止监听。

    示例代码如下:

    NEMeetingKit.actions.removeGlobalEventListener()
    

销毁 SDK

调用 destroy 方法销毁 SDK,退出会议。

销毁 SDK 后,该节点不会销毁,仍保留一部分样式,不会影响页面结构。

示例代码如下:

NEMeetingKit.actions.destroy()
此文档是否对你有帮助?
有帮助
去反馈
  • API 时序图
  • 初始化 SDK
  • 登录鉴权
  • 创建会议
  • 加入会议
  • 匿名入会
  • 监听成员进出会议房间状态
  • 监听全局事件
  • 销毁 SDK