300ms 초저지연 양방향 실시간 대화: WebRTC 기반 OpenAI Realtime Voice API 풀스택 구현

// Next.js 클라이언트 WebRTC Realtime Voice 훅
export async function startRealtimeVoiceSession(onTrack: (stream: MediaStream) => void) {
  // 1. 서버리스 API로부터 일회용 Ephemeral Key 발급 (API Key 브라우저 노출 방지)
  const tokenResponse = await fetch("/api/voice/session");
  const data = await tokenResponse.json();
  const EPHEMERAL_KEY = data.client_secret.value;

  // 2. WebRTC Peer Connection 생성
  const pc = new RTCPeerConnection();

  // 3. AI 음성 수신 트랙 연결
  pc.ontrack = (e) => onTrack(e.streams[0]);

  // 4. 로컬 마이크 오디오 트랙 추가
  const localStream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } });
  pc.addTrack(localStream.getTracks()[0]);

  // 5. SDP Offer 생성 및 OpenAI Realtime 엔드포인트 전송
  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 answerSdp = await sdpResponse.text();
  await pc.setRemoteDescription({ type: "answer", sdp: answerSdp });
  return pc;
}