Meeting BaaS Viewer
Next.jsで構築されたビデオビューアインターフェースで、ミーティングの録画を視聴し、文字起こしにアクセスしてナビゲートできます。
Next.jsで構築されたビデオビューアインターフェースで、ミーティングの録画を視聴し、実際のミーティングbot録画データを使用して文字起こしにアクセス・ナビゲートできます。
概要
このNext.jsアプリケーションは、Meeting BaaS botによってキャプチャされたミーティング録画に対して、文字起こしの同期表示を備えた包括的なビデオプレーヤーを提供します。主な機能は以下のとおりです：
- ビデオ再生（標準コントロール付き）
- 同期文字起こし表示（実際のミーティングデータを使用）
- 現在の単語のハイライト表示（文字起こし内）
- ビデオナビゲーション（文字起こしの単語をクリック）
- レスポンシブインターフェース（リサイズ可能な分割ビュー）
- リアルタイムデータ（ミーティングbot録画から取得）
- 認証統合（集中管理された認証アプリとの連携）
技術スタック
- フレームワーク: Next.js 15.3.2
- 言語: TypeScript
- スタイリング: Tailwind CSS 4
- UIコンポーネント: Shadcn
- 認証: 集中管理された認証アプリとの統合
- パッケージマネージャー: pnpm
主な機能
- 実際のミーティングデータ: モックデータは不要 - Meeting BaaS botの実際の録画と文字起こしを使用
- 高度なビデオコントロール: カスタムコントロールを備えたvideo.jsのフル統合
- インタラクティブな文字起こし: 任意の単語をクリックしてビデオ内の該当箇所へジャンプ
- 話者識別: 明確な話者ラベルとタイムスタンプ
- レスポンシブデザイン: デスクトップとモバイルデバイスでシームレスに動作
- 認証: ミーティング録画へのセキュアなアクセス
はじめに
前提条件
- Node.js（LTSバージョン）
- pnpm 10.6.5以降
インストール
-
リポジトリをクローンします：
git clone https://github.com/Meeting-Baas/viewer cd viewer -
依存関係をインストールします：
pnpm install -
環境変数を設定します：
cp .env.example .env.envに必要な環境変数を入力してください。各キーに期待される値の詳細は.env.exampleに記載されています。 -
開発サーバーを起動します：
pnpm dev
アプリケーションはhttp://localhost:3000で利用可能になります。
動作の仕組み
- 認証: ユーザーは集中管理された認証システムを通じて認証します
- ミーティングの選択: 録画済みミーティングを閲覧・選択します
- ビデオ再生: 全ビデオコントロールでミーティング録画をストリーミング再生します
- 文字起こしナビゲーション: 単語レベルの精度で同期された文字起こしを表示します
- インタラクティブ機能: 文字起こしの単語をクリックしてビデオのタイムラインをナビゲートします
データ統合
ビューアはMeeting BaaSアカウントに直接接続し、botから実際のミーティング録画と文字起こしを取得します。これによりモックデータが不要になり、実際のミーティングコンテンツに即座にアクセスできます。
