本文介绍如何在 Web 平台上使用网易会议组件 NEMeetingKit 进行菜单定制。

功能介绍

NEMeetingKit 支持通过 NEMeetingOptions 对会议界面中的菜单项进行自定义，包括工具栏菜单、更多菜单和成员操作菜单。

菜单的自定义包括修改文本、定制图标、菜单排序、菜单新增与删除等操作。

菜单类型分为两种：

• 单状态菜单：只有一个固定状态，单击后执行相应操作（例如：打开设置）。
• 多状态菜单：有多个状态，单击后可在不同状态间切换（例如：麦克风开/关、摄像头开/关）。

自定义工具栏菜单

工具栏菜单位于会议界面底部和顶部的主要控制区域。

示例代码如下：

TypeScript// 通过 startMeeting 或 joinMeeting options 传入
const neMeetingKit = NEMeetingKit.getInstance()
const meetingService = neMeetingKit.getMeetingService()

const param = {
    displayName: '入会昵称',
    // 会议号
    meetingNum: '123456',
}

const options = {
    // 工具栏菜单
    fullToolbarMenuItems: [
        {
        // 自定义菜单需要 ID 大于 100
        itemId: 101,
        // visibility - 菜单显示条件
        visibility: NEMenuVisibility.VISIBLE_ALWAYS,
        singleStateItem: {
            // 注意：建议准备两套图标，分别用于浅色模式和深色模式。如果未传入则使用icon字段
            icon: 'https://xxx.png',
            darkIcon: 'https://xxx.png',
            lightIcon: 'https://xxx.png',
            // 按钮文案
            text: '',
        },
        },
    ],

}

meetingService.joinMeeting(param, options)

自定义菜单 ID 应避免与 NEMenuIDs 中定义的内置菜单 ID 冲突。使用大于 100 的整数值作为自定义菜单 ID。如需修改或管理内置菜单，则应使用相应的内置菜单 ID 常量。

自定义更多菜单

更多菜单是指单击会议界面底部 更多 按钮后显示的菜单项。

示例代码如下：

TypeScript// 通过 startMeeting 或 joinMeeting opts 传入
    const neMeetingKit = NEMeetingKit.getInstance()
    const meetingService = neMeetingKit.getMeetingService()

    const param = {
    displayName: '入会昵称',
    // 会议号
    meetingNum: '123456',
    }

    const opts = {
    // 更多菜单
    fullMoreMenuItems: [
        {
        // 自定义菜单需要 ID 大于 100
        itemId: 102,
        visibility: NEMenuVisibility.VISIBLE_ALWAYS,
        singleStateItem: {
            // 注意：建议准备两套图标，分别用于浅色模式和深色模式。如果未传入则使用icon字段
            icon: 'https://xxx.png',
            darkIcon: 'https://xxx.png',
            lightIcon: 'https://xxx.png',
            // 按钮文案
            text: '',
        },
        },
    ]
    }
    meetingService.joinMeeting(param，opts)

自定义成员上下文菜单

成员上下文菜单是指单击 管理参会者 图表后在管理参会者的页面中，单击某个成员后弹出的操作菜单。

示例代码如下：

TypeScript// 通过 startMeeting 或 joinMeeting opts 传入
    const neMeetingKit = NEMeetingKit.getInstance()
    const meetingService = neMeetingKit.getMeetingService()

    const param = {
    displayName: '入会昵称',
    // 会议号
    meetingNum: '123456',
    }

    const opts = {
    // 更多菜单
    memberActionMenuItems: [
        {
        // 自定义菜单需要 ID 大于 100
        itemId: 102,
        visibility: NEMenuVisibility.VISIBLE_ALWAYS,
        singleStateItem: {
             // 注意：建议准备两套图标，分别用于浅色模式和深色模式。如果未传入则使用icon字段
            icon: 'https://xxx.png',
            darkIcon: 'https://xxx.png',
            lightIcon: 'https://xxx.png',
            // 按钮文案
            text: '',
        },
        },
    ]
    }
    meetingService.joinMeeting(param，opts)

主动更新自定义菜单

在会议过程中，可以调用 updateInjectedMenuItem 根据需要实时更新已添加的自定义菜单。

示例代码如下：

JavaScriptconst neMeetingKit = NEMeetingKit.getInstance()
const meetingService = neMeetingKit.getMeetingService()

// 创建一个单状态的菜单，使用已存在的菜单 ID 进行更新
// 菜单 ID 说明:
// 1. 对于内置菜单项，应使用 NEMenuIDs 中定义的常量，如 NEMenuIDs.MIC_MENU_ID
// 2. 对于自定义菜单项，必须使用之前添加到会议中的菜单 ID
// 3. 更新菜单时，必须使用已添加到会议中的菜单 ID，否则更新将无效
const menuItem = {
  itemId: 102,
  text: '新文案',
  lightIcon: ''
  darkIcon: '',
}

// 更新相同菜单 ID 的菜单项
// callback 用于接收更新结果
meetingService.updateInjectedMenuItem(menuItem).then(() => {
    // 更新成功
}).catch((error) => {
    // 更新失败
});

监听菜单单击事件

要响应自定义菜单的单击事件，您需要设置菜单单击监听器。

示例代码如下：

TypeScriptconst neMeetingKit = NEMeetingKit.getInstance()
const meetingService = neMeetingKit.getMeetingService()

const meetingOnInjectedMenuItemClickListener = {
    onInjectedMenuItemClick(clickInfo, meetingInfo) {
        // 菜单单击回调
        switch (clickInfo.itemId) {
            // 根据不同id处理逻辑
        }
    },
}
// 重要：设置菜单单击事件监听器，需要在加入会议前设置
// 如果在加入会议后设置，可能无法接收到菜单单击事件
meetingService.setOnInjectedMenuItemClickListener(
    meetingOnInjectedMenuItemClickListener
)

自定义菜单 ID 应避免与 NEMenuIDs 中定义的内置菜单 ID 冲突。使用大于 100 的整数值作为自定义菜单 ID。如需修改或管理内置菜单，则应使用相应的内置菜单 ID 常量。

相关参考

相关 API

类/接口	说明
NEMenuVisibility	菜单项可见性的枚举值。
NEMenuItemInfo	自定义菜单项的 UI 展示。自定义一个标题与图标。
NEMeetingMenuItem	菜单项抽象基类。自定义菜单 ID 与菜单可见性，无法实例化。
NESingleStateMenuItem	单状态菜单项实现类。此类菜单始终展示相同的标题与图标。
NECheckableMenuItem	双状态菜单项实现类。此类菜单包括选中和非选中两个状态，单击后可切换状态，并展示与当前状态对应的 UI。

菜单图标规格说明

添加自定义菜单项时，建议图标资源的尺寸大小为 24px*24px。

SDK 内置菜单项

NEMeetingKit 目前内置了以下菜单项，您可根据需要调整内置菜单项的位置、标题、图标和可见性。

TypeScript// 内置菜单
enum NEMenuIDs { // 菜单项 ID
  mic = 0,
  camera = 1,
  screenShare = 2,
  participants = 3,
  invite = 20,
  chat = 21,
  whiteBoard = 22,
  live = 25,
  security = 26,
  record = 27,
  setting = 28,
  notification = 29,
  interpretation = 31,
  annotation = 30,
  caption = 32,
  transcription = 33,
  feedback = 34,
}

菜单项	菜单 ID	是否允许在 Toolbar 菜单中显示	是否允许在 更多 展开菜单中显示
音频	NEMenuIDs.mic	是	是
视频	NEMenuIDs.camera	是	是
屏幕共享	NEMenuIDs.screenShare	是	是
参会者	NEMenuIDs.participants	是	是
邀请	NEMenuIDs.invite	是	是
聊天	NEMenuIDs.chat	是	是
白板	NEMenuIDs.whiteBoard	是	是
录制	NEMenuIDs.record	是	是
设置	NEMenuIDs.setting	是	是
通知	NEMenuIDs.notification	是	是
同声传译	NEMenuIDs.interpretation	是	是
批注	NEMenuIDs.annotation	是	是
字幕	NEMenuIDs.caption	是	是
转写	NEMenuIDs.transcription	是	是
反馈	NEMenuIDs.feedback	是	是