Production WebRTC Setup Failing to Connect with OpenAI Real-time API

[Stella_Dreamer]

I’ve been trying to build a real-time communication app using WebRTC that connects to OpenAI’s real-time API through a Cloudflare Workers proxy server. Everything runs perfectly when I test it locally, but once I deploy to production on Cloudflare Workers, the peer connection just won’t establish and eventually times out with a failed status.

Here’s my client-side connection logic:

const rtcConnection = new RTCPeerConnection();
const messageChannel = rtcConnection.createDataChannel('messages');

rtcConnection.createOffer().then((sdpOffer) => {
    rtcConnection.setLocalDescription(sdpOffer);
    fetch('/establish-connection', {
        method: 'POST',
        body: sdpOffer.sdp,
        headers: {
            'Content-Type': 'application/sdp',
        },
    })
    .then((response) => response.text())
    .then((sdpAnswer) => {
        rtcConnection.setRemoteDescription({
            sdp: sdpAnswer,
            type: 'answer',
        });
    })
    .catch((err) => console.error("Connection error:", err));
});

And here’s my worker endpoint that handles the connection:

router.post('/establish-connection', async (context) => {
    const sdpData = await context.req.text();
    const apiUrl = new URL('https://api.openai.com/v1/realtime');
    apiUrl.searchParams.set('model', 'gpt-4o-realtime-preview-2024-12-17');
    apiUrl.searchParams.set('voice', 'coral');
    apiUrl.searchParams.set('instructions', SYSTEM_PROMPT);

    const apiResponse = await fetch(apiUrl.toString(), {
        method: 'POST',
        body: sdpData,
        headers: {
            Authorization: `Bearer ${context.env.OPENAI_KEY}`,
            'Content-Type': 'application/sdp',
        },
    });

    if (!apiResponse.ok) {
        const errorMessage = await apiResponse.text();
        console.error('API Error:', errorMessage);
        return context.text(errorMessage, 500);
    }
    
    const answerSdp = await apiResponse.text();
    return context.body(answerSdp, {
        headers: {
            'Content-Type': 'application/sdp',
        },
    });
});

Any ideas what could be causing this production vs local environment difference?

[Alex_Thunder]

yeah, that’s def a CORS issue. cloudflare workers are stricter than local. make sure to add Access-Control-Allow-Origin and Access-Control-Allow-Headers to ur worker’s response. also, check if ur plan supports WebRTC!