OpenAI Realtime API を Vonage Voice で実装した話

#webrtcmeetup OpenAI Realtime API を Vonage Voice で実装した話 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup

⾃⼰紹介
{
"jobs": [
{
"company_name": "
株式会社KDDI ウェブコミュニケーションズ",
"division": "
コミュニケーションDX 本部",
"title": "
エバンジェリスト",
},
"company_name": "
グローバル・インターネット・ジャパン株式会社",
"title": "CEO",
}
],
"name": "
高橋克己（Katsumi Takahashi
）",
"nickname": "□
い芸人",
"hobbies": ["
料理"],
"social": {
"x": "@_katsumi",
"facebook": "katsumi.takahashi",
},
}

ちなみに、このスライドはMarpで作っています

2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup OpenAI Realtime API とは 2024年10⽉にリリースされた、低遅延でマルチモーダルな会話体験（チャ ットと⾳声）を構築するためのAPI 同時マルチモーダル出⼒ Function Callingのサポート WebSocketによるリアルタイム通信 ⾳声⼊⼒と出⼒のサポート 低遅延な⾳声合成 ⾃然で操作可能な⾳声 開発者向けのサンプルコードとツールの提供 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup 電話を使った利⽤例 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup WebSocketの活⽤ ⾳声系のAI連携で重要なのは会話の間（ま） 半⼆重通信から全⼆重通信へ（送受信が同時に可能） ハンドリングが重要 CPaaSとAIがそれぞれWebSocket（Stream）に対応 WebSocketサーバー同⼠の仕様の調整が必要 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup そもそも WebSocket とは 双⽅向通信: クライアントとサーバーがリアルタイムでデータを送受信 低遅延: 接続が持続するため、各メッセージの送受信時に新たな接続 を確⽴する必要がなく遅延が少ない 軽量なヘッダー: HTTPに⽐べてヘッダー情報が少なく、通信オーバー ヘッドを削減（とはいえTCPを利⽤） 標準的なAPI: 多くのプログラミング⾔語やフレームワークでサポート されており、実装が容易 リアルタイムアプリケーションに最適: チャット、オンラインゲーム、 株価情報など、リアルタイム性が求められるアプリケーション向き 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup 利⽤する場合のチェックポイント イベント（データ以外の制御信号など）の通知⽅法 ⾳声データコーデック（アナログとデジタルの変換）の 違い ペイロード周期（どのタイミングでパケットを⽣成する のか） 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup OpenAI の場合 イベントの通知⽅法 イベント系の通知は、JSON形式で送信（データがJSONかどうかでイベン トか⾳声かを判定） ⾳声データのコーデック pcm16 、 g711_ulaw 、 g711-alaw のいずれか pcm16 の場合は、16bit リニアPCM でサンプリング24khzのモノラル ペイロード周期 200ms〜2s（4800〜48000バイト）で不定 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup 【参考】PCMエンコード パルス符号変調（Pulse Code Modulation）⽅式 OpenAIは、符号化が16bit、サンプリング周波数が24khz、⾮圧縮 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup Vonage Voice の WebSocket仕様 イベントの通知⽅法 初回のみJSONで仕様を通知、その後の通知はWebhook ⾳声データのコーデック リニアPCM 16bit符号化、サンプリング周波数8khz or 16khz ペイロード周期 20ms固定 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup 相互通信のための仕様決定 PCMとG.711のコーデック変換は技術的には可能だが、そもそもの仕様が 異なるのでPCM同⼠での変換を採⽤ ⽅向 Vonage → OpenAI OpenAI → Vonage コーデック PCM 16khz → 24khz ※ PCM 24khz → 16khz ペイロード 20msをそのまま透過 20msに調整 ※OpenAIの受け取りPCMは16khz サンプリングだったことが判明 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup サンプリング周波数のコンバート ⽅式はいくつか考えられる 単純間引き（8khzのフレーム3つのうち、1つを間引く） 線形補間法（隣接する2つのサンプル間を直線で補間） シンク関数補間法（シンク関数を利⽤し、⾼精度で補間） そもそもが電話⾳声なので、それほど違いはありません 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup デモンストレーション 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup 料⾦（gpt-4o-realtime-preview） データタイプ 項⽬ ⾳声 料⾦（100万トークンあたり） ⼊⼒ $40.00 キャッシュされた⼊⼒ $2.50 出⼒ $80.00 2分間会話（⼊⼒、出⼒ともに1分）をした場合、約30円 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup 料⾦（gpt-4o-mini-realtime-preview） データタイプ 項⽬ ⾳声 料⾦（100万トークンあたり） ⼊⼒ $10.00 キャッシュされた⼊⼒ $0.30 出⼒ $20.00 2分間会話（⼊⼒、出⼒ともに1分）をした場合、約4.5円 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup まとめ OpenAI Realtime APIは実利⽤に耐えうるレスポンスタイムを提供 ⼊⼒よりも出⼒のほうがコストが⾼い 割り込み処理がやや難しい（タイムラグのコントロール） WebSocketで⾳声を扱う場合、コーデックなどの基礎知識が必要 ⾳声アプリはデバッグがめちゃくちゃ⼤変 RAGを利⽤することで実⽤化も可能（だと思う） 2025-03-10 @WebRTC Meetup Tokyo #29

#webrtcmeetup ご清聴ありがとうございました 本⽇のデモプログラムはGitHub にて公開しています。 https://github.com/mobilebiz/web socket-openai 2025-03-10 @WebRTC Meetup Tokyo #29

• https://github.com/mobilebiz/web