mdm-client-plus

demo运行手册

组件库说明

mdm-client-plus 是一套基于 Vue 3 的会议组件库，当前主要包含：

• 点对点会议 LivePoint
• 多人会议 LiveMulti
• 多人语音会议 LiveAudioMeeting
• 会商组件 LiveConsultation

多人会议能力当前支持通过 meetingFeatures 做增值能力裁剪。该配置默认全开，适用于以下场景：

• 宿主只想保留基础会议能力，隐藏聊天、录制、邀请、应用等高级功能
• 宿主希望按产品版本裁剪功能，而不是维护多套会议组件
• 宿主需要对子组件中的更多菜单、成员管理按钮做细粒度控制

meetingFeatures 目前由 LiveMulti 透传到内部会议组件统一消费：

• roomMode="auto" 时内部走 LiveMultipleMeeting，消费完整的视频会议能力树。
• roomMode="audio" 时内部走 LiveAudioMeeting，消费同一根结构下的“音频安全子集”，主要影响最小化、成员管理、邀请、通讯录、拨号盘以及共享子组件中的更多操作/成员管理按钮。
• 对音频模式不成立的能力项，例如布局切换、自定义布局、屏幕共享、录制、应用菜单等，即使传入也不会生效，这是预期行为。

音频模式下的补充建议：

• subFeatures.moreOption.openCamera
• subFeatures.moreOption.closeCamera
• subFeatures.memberManage.cameraToggle
• subFeatures.memberManage.allCameraClose

以上摄像头相关子项来自视频/音频共用子组件，为了兼容旧版本仍保留在同一配置树中；但在 LiveAudioMeeting 或 LiveMulti + roomMode="audio" 场景下通常不建议使用，建议显式设为 false。

meetingFeatures 快速示例

<template>
	<LiveMulti
		v-model="visible"
		:userData="userData"
		:org="org"
		:baseUrl="baseUrl"
		:token="token"
		:meetingFeatures="meetingFeatures"
	/>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { LiveMulti } from 'mdm-client-plus'

const visible = ref(false)
const baseUrl = ref('https://your-api.example.com')
const token = ref('your-token')
const org = ref('your-org-id')
const userData = reactive({
	userId: 'u001',
	username: 'demo',
	mobile: '13800000000',
	officeName: '示例部门',
})

const meetingFeatures = {
	topBar: {
		customLayout: false,
	},
	controlBar: {
		chat: false,
		application: false,
	},
	subFeatures: {
		moreOption: {
			remove: false,
			setToDeafness: false,
			cancelDeafness: false,
		},
		memberManage: {
			moreButton: false,
			allCameraClose: false,
		},
	},
}
</script>

音频模式示例

<template>
	<LiveMulti
		v-model="visible"
		roomMode="audio"
		:userData="userData"
		:org="org"
		:baseUrl="baseUrl"
		:token="token"
		:meetingFeatures="meetingFeatures"
	/>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { LiveMulti } from 'mdm-client-plus'

const visible = ref(false)
const baseUrl = ref('https://your-api.example.com')
const token = ref('your-token')
const org = ref('your-org-id')
const userData = reactive({
	userId: 'u001',
	username: 'demo',
	mobile: '13800000000',
	officeName: '示例部门',
})

const meetingFeatures = {
	topBar: {
		minimize: true,
	},
	controlBar: {
		memberManage: true,
		invite: true,
		chat: false,
	},
	menu: {
		invite: {
			addressBook: true,
			videoCall: false,
		},
	},
	dialogs: {
		callBoard: false,
	},
	subFeatures: {
		moreOption: {
			openCamera: false,
			closeCamera: false,
		},
		memberManage: {
			cameraToggle: false,
			allCameraClose: false,
		},
	}
</script>

meetingFeatures 使用原则

• 只控制增值能力，不控制基础会议能力。创建会议、加入会议、设备切换、设置、主持人相关基础权限动作保持原有逻辑。
• 默认全开。旧调用方不传该配置时，行为与历史版本一致。
• 配置项只会收窄能力，不会放宽组件内部既有的 host、coHost、platformID 等权限判断。
• 音频模式会复用同一根 meetingFeatures 结构，但只消费自己成立的能力项；未消费的键不会报错，也不会生效。
• 音频模式下的摄像头相关子项仅因共享子组件而保留在配置树中，通常建议显式关闭。
• 当前版本不承诺对“会议进行中运行时频繁修改 meetingFeatures”做完整联动，推荐在打开会议组件前一次性传入稳定配置。

进一步阅读

• 详细参数、capability 清单、完整示例见 MDM会议组件使用手册(vue3).md

使用步骤

1、安装依赖

npm install

2、运行

npm run dev

注意事项

1、demo示例页面文件路径为/src/pages/entry/index.vue

2、liveClient实例初始化代码和基本使用均封装为了hooks，参考/src/pages/entry/hook/liveClient.js

3、hooks中的userData和token均需要联系后端开发开通账号并在平台登录后获取，平台地址 https://10.2.12.103:8443/mdm/#/login

4、在自己的项目中使用组件请结合根目录的使用手册和本demo的代码实现