@fanson/meeting-video

方讯视频会议核心组件 — 评标专家实时视频展示，基于 mediasoup + Vue 3 + Element Plus。仅支持 Electron 环境。

安装

npm install @fanson/meeting-video

peerDependencies（使用方项目必须安装）

{
  "vue": "^3.5.0",
  "pinia": "^3.0.0",
  "element-plus": "^2.10.0"
}

快速开始（2 步）

1. 注册插件

// 渲染进程 main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { MeetingVideoPlugin } from '@fanson/meeting-video'
import '@fanson/meeting-video/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(createPinia())
app.use(MeetingVideoPlugin)
app.mount('#app')

2. 使用组件

只需传 3 个参数：房间号、用户账号、用户密码。组件内部自动完成：

• 双服务器地址检测 → 确定 API 地址
• 登录 → 获取 token
• 获取用户信息 → 获取房间服务器信息
• 建立 mediasoup 连接 → 进入会议

<template>
  <MeetingVideo
    meet-code="ROOM123"
    user-number="zhangsan"
    user-pwd="***"
    role-manager="expert"
    title="评标会议"
  />
</template>

麦克风、摄像头、共享、视图切换按钮全部内嵌在视频区顶部工具栏，不会与父页面的控制栏冲突。

Props

| Prop | 类型 | 必填 | 说明 | |------|------|------|------| | meetCode | String | ✅ | 房间号 | | userNumber | String | ✅ | 用户账号 | | userPwd | String | ✅ | 用户密码 | | roleManager | String | — | expert / manager / supplier / supervise / ordinary | | title | String | — | 顶部标题 | | loudspeakerCode | String | — | 扬声器设备编码 |

Events

| 事件 | 参数 | 说明 | |------|------|------| | state-change | state | connecting / connected / disconnected / closed | | closed | — | 会议关闭 | | error | — | 连接或登录失败 | | peers-update | peers | 参会人员列表 | | vote-notify | notify | 投票通知 | | signin-notify | signInInfo | 签到通知 | | share-change | state | 共享状态变化 |

preload.js

组件通过 window.electron 使用以下方法（使用方需要在 Electron preload 中暴露）：

• closeMeetingWindow() — 关闭会议窗口
• getShareSource() — 获取屏幕共享源（Promise）
• showShareWindow() — 打开共享窗口
• showShareBoard() — 打开白板
• showDocument() — 打开文档

内置 API 地址

组件内置两个 API 地址，自动检测可用服务器：

1. http://10.141.28.146:4443/meet-app-api
2. http://36.112.25.159:4443/meet-app-api

目录结构

src/
├── components/
│   ├── MeetingVideo.vue      ← 主入口（含顶部工具栏）
│   ├── ExpertGrid.vue        ← 专家视频网格
│   ├── ManagerGrid.vue       ← 项目经理视图
│   ├── SuperviseGrid.vue     ← 监督人视图
│   ├── WindowShare.vue       ← 屏幕共享
│   ├── VideoView.vue         ← 单路视频渲染
│   ├── AudioVolume.vue       ← 音量指示
│   ├── AudioView.vue         ← 音频播放
│   └── JessibucaPlayer.vue   ← 监控播放器
├── store/meetRoom.js          ← Pinia store
├── utils/
│   ├── connect.js             ← 登录 + 连接流程
│   ├── request.js             ← HTTP 客户端
│   ├── share.js
│   └── jessibucaLibrary.js
├── meeting-sdk/               ← mediasoup SDK
├── plugin.js
└── index.js