CaptionCast

OBS配信向けリアルタイム字幕生成アプリケーション。ローカルで動作するWhisper.cppを使用して音声をリアルタイムで書き起こし、OBSのブラウザソースで表示できる字幕を生成します。

機能

• リアルタイム書き起こし: whisper.cppによる高精度な音声認識
• OBS連携: ブラウザソースで簡単に字幕をオーバーレイ表示
• 字幕スタイル設定: フォント、サイズ、色、縁取り、影、文字間などをカスタマイズ
• プリセット保存: 複数のスタイルプリセットを保存・切り替え
• リアルタイムスタイル反映: スタイル変更が即座にOBS画面に反映
• 書き起こし履歴: セッションごとのログ保存・閲覧
• エクスポート: SRT、JSON、TXT形式での書き出し

必要環境

• Node.js 18+
• whisper.cpp (ビルド済み)
• Whisperモデルファイル (推奨: large-v3)

セットアップ

1. whisper.cpp のインストール

# whisper.cpp をクローン
git clone https://github.com/ggerganov/whisper.cpp.git
cd whisper.cpp

# ビルド
cmake -B build
cmake --build build --config Release

# モデルをダウンロード (large-v3 推奨)
./models/download-ggml-model.sh large-v3

2. プロジェクトのセットアップ

# 依存関係をインストール
yarn install

# 環境変数を設定
cp .env.example .env
# .env を編集して whisper.cpp のパスを設定

3. データベースのセットアップ

# Prismaマイグレーションを実行
npx prisma migrate dev

4. 開発サーバーを起動

yarn dev

http://localhost:3000 を開いてください。

環境変数

変数名	説明	例
DATABASE_URL	SQLiteデータベースのパス	file:./prisma/dev.db
WHISPER_PATH	whisper-cliバイナリのパス	/path/to/whisper.cpp/build/bin/whisper-cli
WHISPER_MODEL	Whisperモデルファイルのパス	/path/to/whisper.cpp/models/ggml-large-v3.bin

使い方

基本的な流れ

1. ダッシュボード (/dashboard) でマイクを選択
2. 開始ボタンで書き起こし開始
3. 字幕URL をOBSのブラウザソースに設定

OBSでの設定

1. OBSで「ソース」→「ブラウザ」を追加
2. URLに http://localhost:3000/caption を入力
3. 幅: 1920、高さ: 1080 (配信解像度に合わせて調整)
4. 「カスタムCSS」は空のままでOK

字幕スタイルのカスタマイズ

ダッシュボードの「字幕スタイル設定」で以下を調整できます:

• フォント (Noto Sans JP, M PLUS 1p, Kosugi Maru, Keifont)
• フォントサイズ
• 文字色
• 縁取り (色・太さ)
• 影 (色・ぼかし・オフセット)
• 文字間

スタイルを変更すると、OBS画面にリアルタイムで反映されます。

プリセット

• 新規保存: 現在のスタイルを名前をつけて保存
• 上書き: 選択中のプリセットを更新
• デフォルト: 次回起動時に自動適用されるプリセットを設定

履歴

/history で過去の書き起こしセッションを閲覧できます。

ローカルフォントの追加

1. フォントファイル (.ttf, .otf) を public/fonts/ に配置

2. src/app/globals.css に @font-face を追加:

   @font-face {
     font-family: "フォント名";
     src: url("/fonts/フォントファイル.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }

3. src/components/RecordingPanel.tsx の fonts 配列に追加

技術スタック

• フレームワーク: Next.js 16 (App Router)
• データベース: SQLite + Prisma 7
• リアルタイム通信: Server-Sent Events (SSE)
• 音声認識: whisper.cpp (ローカル実行)
• スタイリング: Tailwind CSS

ライセンス

このソフトウェアは独自ライセンスの下で提供されています。詳細は LICENSE を参照してください。

• 個人利用・学習目的での使用: 許可
• 商用利用: 禁止 (著作権者の書面による許可が必要)
• 再配布・改変版の配布: 禁止