OpenAIのRealtimeAPIが爆速だった話

## はじめに

こんにちは！最近、OpenAIが新しく提供を始めたWebRTCでのリアルタイムAPIを試してみたのですが、その応答速度の速さに驚いたので、実装を交えながら紹介したいと思います。

https://github.com/yonaka15/openai-rtc-demo

このAPIの特徴は、WebRTCを使ってOpenAIのモデルと直接リアルタイムな双方向通信ができる点です。ChatGPTのWebインターフェースでおなじみのストリーミング応答も、より高速で自然な形で実現されています。

## すごいところ

1. **応答の即時性**
   - 通常のChat APIと比べて、最初の応答が格段に速い
   - HTTPSのオーバーヘッドがないため、通信が高速
   - WebRTCによるUDPベースの低遅延通信
   - ストリーミングがより細かい粒度で行われる
   - 音声入力にも瞬時に反応

2. **双方向性**
   - テキストと音声の双方向通信が可能
   - ユーザーの入力に対してリアルタイムに反応
   - 会話の途中でも割り込みが可能

## 技術的なポイント

RealtimeAPIの面白いところは、WebRTCを使って実装されている点です。WebRTCはビデオチャットなどでよく使用される技術ですが、これをAIとの通信にダイレクトに使用するのは斬新なアプローチだと感じました。

特に注目すべきは通信プロトコルの違いです。通常のREST APIではHTTPS（TCP）を使用するため、毎回のリクエストで接続確立やTLSハンドシェイクなどのオーバーヘッドが発生します。一方、WebRTCはUDPベースの通信を使用し、一度確立された接続を維持して通信を行うため、より低遅延な通信が可能です。これが「爆速」の技術的な理由の一つとなっています。

### Next.jsでの実装

実装には、Next.jsを選択しました。理由は以下の通りです：

1. ephemeralキーの発行にサーバーサイドの実装が必要
2. API Routesで簡単にエンドポイントが作れる
3. フロントエンドとバックエンドを1つのプロジェクトで管理可能

### セッションの確立

```typescript
// 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接続の確立

```typescript
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の速さを体感できます：

```typescript
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);
  }
};
```

## 実装時の注意点

1. **セキュリティ**
   - 標準APIキーは絶対にクライアントサイドで使用しない
   - ephemeralキーは1分で失効するため、適切なタイミングで再取得する必要がある

2. **接続管理**
   - WebRTCの接続状態を適切に監視
   - ネットワークの切断に備えた再接続処理

3. **メッセージング処理**
   - ストリーミング応答の適切な処理
   - 会話履歴の管理
   - エラーハンドリング

## まとめ

OpenAIのRealtimeAPIは、WebRTCを使用することで、従来のREST APIベースの通信と比べて格段に応答速度が改善されています。特に：

- HTTPSのオーバーヘッドがない低遅延通信
- 最初の応答までの時間が短い
- 確立済みの接続を再利用する効率的な通信
- よりなめらかなストリーミング
- 双方向通信による自然な対話

という点で、より自然なAIとの対話が可能になっています。

Next.jsとの相性も良く、API Routesを使用することで、セキュアでスムーズな実装が可能です。まだベータ版ではありますが、今後のAIアプリケーション開発の可能性を広げる非常に興味深い技術だと感じました。

## 参考リンク

- [ソースコード](https://github.com/yonaka15/openai-rtc-demo)
- [OpenAI Realtime API Documentation](https://platform.openai.com/docs/guides/realtime-webrtc)
- [WebRTC API ドキュメント](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)