Laravel 12｜OpenAI Realtime API 超低遅延なAI音声対話の検証

namespace App\Http\Controllers;

use Illuminate\Support\Facades\Http;

class RealtimeController extends Controller
{
    public function index() {
        return view('realtime.index');
    }

    public function token() {
        $apiKey = env('OPENAI_API_KEY');

        // OpenAIにセッション開始をリクエスト
        $response = Http::withHeaders([
            'Authorization' => 'Bearer ' . $apiKey,
            'Content-Type' => 'application/json',
        ])->post('https://api.openai.com/v1/realtime/sessions', [
            'model' => 'gpt-4o-mini-realtime-preview-2024-12-17',
            'voice' => 'alloy', // 声のタイプ
            'instructions' => 'あなたは親切なAIアシスタントです。日本語で自然に会話してください。',
        ]);

        return $response->json();
    }
}

async function startConversation() {
    // 1. 自前サーバーから一時トークンを取得
    const response = await fetch('/realtime/token');
    const data = await response.json();
    const EPHEMERAL_KEY = data.client_secret.value;

    // 2. WebRTCの準備
    const pc = new RTCPeerConnection();

    // AIからの音声が届いたら再生する設定
    const audioEl = document.createElement('audio');
    audioEl.autoplay = true;
    pc.ontrack = (e) => audioEl.srcObject = e.streams[0];

    // 自分のマイクを追加
    const localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    pc.addTrack(localStream.getTracks()[0]);

    // 3. OpenAIとSDP（接続情報）を交換
    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);

    const sdpResponse = await fetch("https://api.openai.com/v1/realtime?model=gpt-4o-mini-realtime-preview-2024-12-17", {
        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);
}