リアルタイム音声認識付きビデオ会議システム

🎯 プロジェクト概要

WebRTCとVosk音声認識エンジンを組み合わせた、リアルタイム字幕表示機能付きビデオ会議システムを開発しました。特にスマートフォンでの音声認識に焦点を当て、デバイス間の制約を克服したマルチプラットフォーム対応システムです。

主要機能

• リアルタイムビデオ通話（WebRTC）
• 音声認識による自動字幕生成（Vosk + Gemini API）
• レスポンシブデザイン（PC/スマートフォン対応）
• リアルタイム字幕表示（オーバーレイ + サイドバー）

🛠️ 技術スタック

フロントエンド

• HTML5/CSS3/JavaScript（ES6+）
• WebRTC API（P2Pビデオ通話）
• MediaRecorder API（音声収録）
• Socket.IO（リアルタイム通信）
• Bootstrap 5（レスポンシブUI）

バックエンド

• Python Flask（Webサーバー）
• Flask-SocketIO（WebSocket通信）
• Vosk（オフライン音声認識エンジン）
• Google Gemini API（音声認識フォールバック）
• FFmpeg（音声形式変換）

インフラ・ツール

• ngrok（HTTPS開発環境）
• Git（バージョン管理）

🎨 システム構成図

[スマートフォン] ←→ [WebRTC P2P] ←→ [PC]
        ↓                                ↓
[音声収録] → [サーバー] ← [音声収録]
        ↓         ↓         ↓
   [Vosk処理] [FFmpeg] [Vosk処理]
        ↓         ↓         ↓
   [字幕生成] → [配信] ← [字幕生成]

🔧 技術的な挑戦と解決

1. スマートフォンでの音声認識問題

課題: Android/iOSブラウザでWeb Speech APIが制限的

// 解決策: デバイス判定によるサーバーベース処理
if (deviceInfo.supportsSpeechAPI && !deviceInfo.isMobile) {
    await startWebSpeechAPI();
} else {
    await startServerBasedTranscription(); // Vosk使用
}

成果: スマートフォンでも安定した音声認識を実現

2. 音声データの形式変換

課題: WebM（Opus）からWAV（PCM）への変換が必要

# FFmpegによる高品質変換
cmd = [
    ffmpeg_path, '-f', 'webm', '-i', input_path,
    '-ar', '16000', '-ac', '1', '-f', 'wav',
    '-acodec', 'pcm_s16le',
    '-af', 'highpass=f=80,lowpass=f=8000',  # 音声帯域フィルタ
    output_path
]

成果: 音質を保ちながら確実にVoskで処理可能な形式に変換

3. 低音量音声の認識向上

課題: スマートフォンマイクの音量が低く認識精度が低下

def amplify_audio(audio_pcm_data, amplification_factor=4.0):
    for i in range(0, len(audio_pcm_data), 2):
        sample = int.from_bytes(audio_pcm_data[i:i+2], 'little', signed=True)
        amplified_sample = int(sample * amplification_factor)
        amplified_sample = max(-32768, min(32767, amplified_sample))  # クリッピング防止

成果: 0.3%の極低音量でも認識可能に

4. WebRTC接続の安定化

課題: 複数のシグナリング状態エラーで接続失敗

// 解決策: 厳密な状態管理とクリーンアップ
async function startCall() {
    if (peerConnection) {
        peerConnection.close();
        peerConnection = null;
    }
    peerConnection = new RTCPeerConnection(iceServers);
    // ... 接続処理
}

成果: PC↔スマートフォン間で安定したビデオ通話を実現

📊 性能・品質指標

🎥 デモ・スクリーンショット

PC画面

- デュアルビデオ表示
- リアルタイム字幕ログ
- 直感的なコントロールパネル

スマートフォン画面

- レスポンシブデザイン
- タッチ操作対応
- オーバーレイ字幕表示

🚀 今後の拡張可能性

機能面

• 多人数会議対応（SFUサーバー導入）
• 多言語音声認識（Vosk多言語モデル）
• リアルタイム翻訳（Google Translate API連携）
• 議事録自動生成（要約AI機能）

技術面

• WebAssembly版Vosk（クライアントサイド処理）
• Docker化（開発・デプロイ効率化）
• クラウド展開（AWS/GCP対応）
• 負荷分散（Redis + 複数サーバー）

💡 学んだこと

技術的知見

1. クロスプラットフォーム開発の複雑さと解決アプローチ
2. WebRTCの詳細な仕様とトラブルシューティング手法
3. 音声処理技術（サンプリング、圧縮、増幅）
4. リアルタイム通信の設計パターン

問題解決スキル

• デバイス固有の制約を分析し、適切な技術選択を行う能力
• 複雑なシステムを段階的にデバッグする手法
• ユーザビリティとパフォーマンスのバランス調整

🔗 関連リンク

• GitHub Repository: [プロジェクトURL]
• Live Demo: [デモサイトURL]
• 技術ブログ: [詳細解説記事URL]

📝 開発期間・体制

• 開発期間: 2週間
• 開発体制: 個人開発
• 主要工数:
• 要件定義・設計: 2日
• 基本機能実装: 5日
• 音声認識最適化: 4日
• デバッグ・調整: 3日

このプロジェクトを通じて、フルスタック開発、リアルタイム通信、音声処理技術の実践的なスキルを習得しました。