はじめに
こんにちは！最近、OpenAIが新しく提供を始めたWebRTCでのリアルタイムAPIを試してみたのですが、その応答速度の速さに驚いたので、実装を交えながら紹介したいと思います。
このAPIの特徴は、WebRTCを使ってOpenAIのモデルと直接リアルタイムな双方向通信ができる点です。ChatGPTのWebインターフェースでおなじみのストリーミング応答も、より高速で自然な形で実現されています。
すごいところ
-
応答の即時性
- 通常のChat APIと比べて、最初の応答が格段に速い
- HTTPSのオーバーヘッドがないため、通信が高速
- WebRTCによるUDPベースの低遅延通信
- ストリーミングがより細かい粒度で行われる
- 音声入力にも瞬時に反応
-
双方向性
- テキストと音声の双方向通信が可能
- ユーザーの入力に対してリアルタイムに反応
- 会話の途中でも割り込みが可能
技術的なポイント
RealtimeAPIの面白いところは、WebRTCを使って実装されている点です。WebRTCはビデオチャットなどでよく使用される技術ですが、これをAIとの通信にダイレクトに使用するのは斬新なアプローチだと感じました。
特に注目すべきは通信プロトコルの違いです。通常のREST APIではHTTPS（TCP）を使用するため、毎回のリクエストで接続確立やTLSハンドシェイクなどのオーバーヘッドが発生します。一方、WebRTCはUDPベースの通信を使用し、一度確立された接続を維持して通信を行うため、より低遅延な通信が可能です。これが「爆速」の技術的な理由の一つとなっています。
Next.jsでの実装
実装には、Next.jsを選択しました。理由は以下の通りです：
- ephemeralキーの発行にサーバーサイドの実装が必要
- API Routesで簡単にエンドポイントが作れる
- フロントエンドとバックエンドを1つのプロジェクトで管理可能
セッションの確立
// src/app/api/session/route.ts
export async function GET() {
try {
const response = await fetch(
"https://api.openai.com/v1/realtime/sessions",
{
method: "POST",
headers: {
Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "gpt-4o-realtime-preview-2024-12-17",
voice: "verse",
}),
}
);
const data = await response.json();
return NextResponse.json(data);
} catch (error) {
console.error("Session creation failed:", error);
return NextResponse.json(
{ error: "Failed to create session" },
{ status: 500 }
);
}
}
WebRTC接続の確立
const initializeWebRTC = async () => {
// セッショントークンの取得
const tokenResponse = await fetch("/api/session");
const data = await tokenResponse.json();
const EPHEMERAL_KEY = data.client_secret.value;
// ピアコネクションの作成
const pc = new RTCPeerConnection();
// データチャネルのセットアップ
const dc = pc.createDataChannel("oai-events");
// SDPオファーの作成と送信
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
const baseUrl = "https://api.openai.com/v1/realtime";
const model = "gpt-4o-realtime-preview-2024-12-17";
const sdpResponse = await fetch(`${baseUrl}?model=${model}`, {
method: "POST",
body: offer.sdp,
headers: {
Authorization: `Bearer ${EPHEMERAL_KEY}`,
"Content-Type": "application/sdp",
},
});
const answer = {
type: "answer",
sdp: await sdpResponse.text(),
};
await pc.setRemoteDescription(answer);
};
メッセージの送受信
テキストによるメッセージングでもRealtimeAPIの速さを体感できます：
const sendMessage = async (message: string) => {
// ユーザーメッセージの送信
const userMessage = {
type: "conversation.item.create",
item: {
type: "message",
role: "user",
content: [
{
type: "input_text",
text: message,
},
],
},
};
dataChannel.send(JSON.stringify(userMessage));
// 応答リクエスト
const responseRequest = {
type: "response.create",
response: {
modalities: ["text"],
},
};
dataChannel.send(JSON.stringify(responseRequest));
};
// メッセージの受信処理
dc.onmessage = (e) => {
const realtimeEvent = JSON.parse(e.data);
if (realtimeEvent.type === "response.text.delta") {
// デルタ更新での受信がかなり速い
handleTextDelta(realtimeEvent.delta);
}
};
実装時の注意点
-
セキュリティ
- 標準APIキーは絶対にクライアントサイドで使用しない
- ephemeralキーは1分で失効するため、適切なタイミングで再取得する必要がある
-
接続管理
- WebRTCの接続状態を適切に監視
- ネットワークの切断に備えた再接続処理
-
メッセージング処理
- ストリーミング応答の適切な処理
- 会話履歴の管理
- エラーハンドリング
まとめ
OpenAIのRealtimeAPIは、WebRTCを使用することで、従来のREST APIベースの通信と比べて格段に応答速度が改善されています。特に：
- HTTPSのオーバーヘッドがない低遅延通信
- 最初の応答までの時間が短い
- 確立済みの接続を再利用する効率的な通信
- よりなめらかなストリーミング
- 双方向通信による自然な対話
という点で、より自然なAIとの対話が可能になっています。
Next.jsとの相性も良く、API Routesを使用することで、セキュアでスムーズな実装が可能です。まだベータ版ではありますが、今後のAIアプリケーション開発の可能性を広げる非常に興味深い技術だと感じました。