/realtime — WebRTC 지원
/realtime — WebRTC 지원 (WebRTC Support)
브라우저/모바일 클라이언트에서 WebRTC를 통해 Realtime API에 연결할 수 있어요. LiteLLM이 인증을 처리하고, 오디오는 OpenAI/Azure로 직접 스트리밍돼요.
공급자 (Providers): OpenAI · Azure
WebRTC vs WebSocket
- WebSocket (
/v1/realtime): 서버 간(server-to-server) - WebRTC (
/v1/realtime/client_secrets+/v1/realtime/calls): 브라우저/모바일, 더 낮은 지연
출처: 문서
본문
동작 원리 (How it works)
LiteLLM은 토큰을 발급하고 SDP를 중계해요. 오디오는 절대 프록시를 통과하지 않아요.
Browser LiteLLM Proxy OpenAI/Azure
| | |
|-- POST client_secrets --->|-- POST sessions -------->|
|<-- encrypted_token -------|<-- ek_... ---------------|
|-- POST calls [SDP+token] ->|-- POST calls ----------->|
|<-- SDP answer ------------|<-- SDP answer -----------|
|===== audio P2P direct ===============================>
프록시 설정 (Proxy Setup)
model_list:
- model_name: gpt-4o-realtime
litellm_params:
model: openai/gpt-4o-realtime-preview-2024-12-17
api_key: os.environ/OPENAI_API_KEY
model_info:
mode: realtime
Azure: model: azure/gpt-4o-realtime-preview, api_key, api_base.
litellm --config /path/to/config.yaml
클라이언트 사용법 (Client Usage)
- 토큰 — LiteLLM 키와
{ model }로POST /v1/realtime/client_secrets호출. - WebRTC —
RTCPeerConnection생성, 마이크 추가, 데이터 채널oai-events생성, SDP offer를Authorization: Bearer <token>헤더와Content-Type: application/sdp로POST /v1/realtime/calls에 전송. - 이벤트 — 데이터 채널로
session.update및 기타 이벤트 전송.
const r = await fetch("http://proxy:4000/v1/realtime/client_secrets", {
method: "POST",
headers: { "Authorization": "Bearer «redacted:sk-…»", "Content-Type": "application/json" },
body: JSON.stringify({ model: "gpt-4o-realtime" }),
});
const token = (await r.json()).client_secret.value;
const pc = new RTCPeerConnection();
const audio = document.createElement("audio");
audio.autoplay = true;
pc.ontrack = (e) => (audio.srcObject = e.streams[0]);
const ms = await navigator.mediaDevices.getUserMedia({ audio: true });
pc.addTrack(ms.getTracks()[0]);
const dc = pc.createDataChannel("oai-events");
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
const sdpRes = await fetch("http://proxy:4000/v1/realtime/calls", {
method: "POST",
headers: { "Authorization": `Bearer ${token}`, "Content-Type": "application/sdp" },
body: offer.sdp,
});
await pc.setRemoteDescription({ type: "answer", sdp: await sdpRes.text() });
dc.send(JSON.stringify({ type: "session.update", session: { instructions: "..." } }));
FAQ
- 401 Token expired — WebRTC offer를 만들기 직전에 새 토큰을 받아요.
/calls에는 어떤 키를 쓰나요? —client_secrets에서 받은 암호화 토큰이에요. 원시 키가 아니에요.model을 전달하나요? — 아니요. 토큰이 라우팅을 인코딩해요.- Azure
api-version—litellm_params에api_version을 설정하고 올바른api_base를 사용해요. - 오디오가 안 나와요 — 마이크 권한을 허용하고,
pc.ontrack이 autoplay 오디오를 설정하는지 확인하며, 방화벽/WebRTC를 점검하고 콘솔을 확인해요.