Meeting BaaS Viewer

一个基于 Next.js 构建的视频查看界面，用于查看会议录像、访问并浏览转写内容。

一个基于 Next.js 构建的视频查看界面，用于查看会议录像、访问并浏览转写内容，数据来自你的会议 bot 录像。

概览

这个 Next.js 应用提供了一个功能完整的视频播放器，支持同步显示 Meeting BaaS bot 录制的会议转写内容。主要功能包括：

  • 视频播放，支持标准控件
  • 同步转写显示，使用真实会议数据
  • 当前词高亮显示在转写中
  • 视频导航，点击转写中的词即可跳转
  • 响应式界面，支持可调整大小的分屏视图
  • 实时数据，来自你的会议 bot 录像
  • 身份验证集成，与集中式 auth 应用对接

技术栈

  • 框架： Next.js 15.3.2
  • 语言： TypeScript
  • 样式： Tailwind CSS 4
  • UI 组件： Shadcn
  • 身份验证： 集中式 Auth 应用集成
  • 包管理器： pnpm

主要功能

  • 真实会议数据： 不再使用模拟数据，直接使用来自 Meeting BaaS bot 的实际录像和转写内容
  • 高级视频控件： 完整集成 video.js 并支持自定义控件
  • 交互式转写： 点击任意词即可跳转到视频中对应的时间点
  • 说话人识别： 清晰显示说话人标签和时间戳
  • 响应式设计： 在桌面端和移动端均可流畅使用
  • 身份验证： 安全访问你的会议录像

快速开始

前置条件

  • Node.js（LTS 版本）
  • pnpm 10.6.5 或更高版本

安装步骤

  1. 克隆仓库：

    git clone https://github.com/Meeting-Baas/viewer
cd viewer

  2. 安装依赖：

    pnpm install

  3. 配置环境变量：

    cp .env.example .env

    在 .env 中填写所需的环境变量。每个键的预期值详见 .env.example

  4. 启动开发服务器：

    pnpm dev

应用将在 http://localhost:3000 上运行

工作原理

  1. 身份验证： 用户通过集中式 auth 系统进行身份验证
  2. 选择会议： 浏览并选择已录制的会议
  3. 视频播放： 使用完整的视频控件播放会议录像
  4. 转写导航： 查看同步转写内容，精确到词级别
  5. 交互功能： 点击转写中的词即可在视频时间轴中导航

数据集成

Viewer 直接连接到你的 Meeting BaaS 账户，从 bot 中获取真实的会议录像和转写内容。这消除了对模拟数据的依赖，让你可以立即访问实际的会议内容。

Meeting BaaS Viewer Interface

相关页面