Markdown आवृत्ती

AI-translated from English; not yet reviewed by a fluent editor.

# OpenAI Realtime वापरून स्थानिक ब्राउझरमध्ये आवाजातील संभाषण तयार करा

> WebRTC वर OpenAI Realtime वापरून स्थानिक ब्राउझर माइक संभाषण तयार करा. पूर्ण server व page code API key सर्व्हरवर ठेवतो आणि आवाज तपासणे, माइक थांबवणे व त्रुटी हाताळणे दाखवतो.

By BIG CHANGE Editorial

Published: 2026-10-19T19:20:34.863Z
Updated: 2026-10-19T19:20:34.863Z
Canonical: https://bigchange.ai/blog/openai-realtime-browser-voice-webrtc-guide

![Conceptual charcoal illustration of a desktop microphone beside a blank browser on a monitor and a small speaker.](https://bigchange.ai/api/media/file/realtime-browser-voice-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no actual OpenAI interface, browser test or heard reply is depicted.

OpenAI चे Realtime API ब्राउझरला WebRTC ने माइकचा आवाज पाठवून बोललेले उत्तर वाजवू देते. हे मार्गदर्शन `gpt-realtime-2.1` वापरून एक स्थानिक संभाषण बनवते. API key आपल्या संगणकाच्या Node server मध्ये राहते. Model access व billing असलेला OpenAI API project हवा; ChatGPT subscription API खर्च देत नाही. BIG CHANGE ने वर्तमान दस्तऐवज व नमुना code तपासला; paid session उघडले नाही किंवा उत्तर ऐकले नाही.

## मोठा बदल

- **काय बदलले:** OpenAI ने live Realtime संभाषणासाठी browser WebRTC मार्ग दिला आहे. स्थानिक server project key ठेवून browser connection offer बदल्यात answer आणतो.
- **हे महत्त्वाचे का:** मोठे आवाज उत्पादन बनवण्याआधी developer एका स्थानिक page मध्ये माइकपासून बोललेल्या उत्तरापर्यंत पूर्ण मार्ग तपासू शकतो. Project मालक key नियंत्रित करतो व API खर्च भरतो.
- **कशाकडे लक्ष द्यावे:** स्थानिक देवाणघेवाण चालणे production तयारीचे प्रमाण नाही. सामायिक सेवेला caller authentication व खर्च नियंत्रण लागते; cancelled किंवा timeout request आधीच OpenAI कडे गेलेली असू शकते.

## सुरुवातीपूर्वी

Node.js 22.6 किंवा नंतरची version आणि कार्यरत माइक व speaker असलेला आधुनिक browser वापरा. माइक access साठी सुरक्षित context हवा; `http://localhost` या स्थानिक उदाहरणात योग्य आहे. `gpt-realtime-2.1` access व billing enabled असलेली OpenAI API project key घ्या. आधी rate आणि spend limits पाहा. Model page Free tier समर्थित नसल्याचे सांगतो. नेहमीचा secret manager किंवा स्थानिक shell मांडणीने key server process environment मध्ये ठेवा. ती `index.html` मध्ये ठेवू नका, `.env` फाइलमध्ये commit किंवा transcript मध्ये paste करू नका. [OpenAI WebRTC मार्गदर्शन](https://developers.openai.com/api/docs/guides/voice-webrtc) विश्वासू server देवाणघेवाण स्पष्ट करते; [model page](https://developers.openai.com/api/docs/models/gpt-realtime-2.1) वर्तमान access व किंमती देतो.

हा Realtime API चा unified `/v1/realtime/calls` route आहे. WebRTC मार्गदर्शन `/v1/live/sessions` द्वारे GPT-Live देखील सांगते, पण session protocol वेगळा आहे. खाली route व payload एकत्र ठेवा. उदाहरण आपल्या संगणकापुरते आहे; स्थानिक Host व Origin तपासणी सामायिक सेवेत वापरकर्त्यांचे authentication करत नाही.

1. डेमोसाठी रिकामी directory तयार करून त्यातून Express install करा:

```bash
npm init -y
npm install express
```

Installation `package.json` बनवते आणि web-server dependency जोडते. पुढील दोन फायली एकाच directory मध्ये ठेवा. Code Node मधील अंगभूत `fetch`, `FormData` व `AbortSignal.timeout` वापरतो; तपासलेल्या व्यवस्थेस Node.js 22.6 किंवा नंतरची version हवी.

2. पुढील मजकूर `server.mjs` म्हणून जतन करा. तो browser चा SDP offer (प्रस्तावित WebRTC connection चे वर्णन) घेऊन Realtime session settings सह OpenAI ला पाठवतो. सामान्य API key फक्त या server वर वाचली जाते.

```javascript
import express from "express";

const app = express();
// This demo accepts only the local page, including protection against DNS rebinding.
app.use((req, res, next) => {
  const hosts = ["localhost:3000", "127.0.0.1:3000"];
  if (!hosts.includes(req.get("host"))) return res.status(403).send("Local host required");
  if (req.method === "POST" && req.get("origin") !== `http://${req.get("host")}`) {
    return res.status(403).send("Same-origin local page required");
  }
  next();
});
app.use(express.text({ type: "application/sdp", limit: "64kb" }));

app.get("/", (_req, res) => res.sendFile("index.html", { root: process.cwd() }));

app.post("/session", async (req, res) => {
  if (!process.env.OPENAI_API_KEY) return res.status(500).send("Server API key missing");
  if (typeof req.body !== "string" || !req.body.startsWith("v=")) {
    return res.status(400).send("Expected an SDP offer");
  }

  const form = new FormData();
  form.set("sdp", req.body);
  form.set("session", JSON.stringify({
    type: "realtime",
    model: "gpt-realtime-2.1",
    output_modalities: ["audio"],
    audio: { output: { voice: "marin" } },
    instructions: "Be a concise, helpful voice assistant. Do not claim access to external tools."
  }));

  try {
    const upstream = await fetch("https://api.openai.com/v1/realtime/calls", {
      method: "POST",
      headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}` },
      body: form,
      signal: AbortSignal.timeout(25000)
    });
    const answer = await upstream.text();
    if (!upstream.ok) {
      console.error("Realtime session rejected", upstream.status);
      return res.status(502).send(`OpenAI session request failed (${upstream.status})`);
    }
    res.type("application/sdp").send(answer);
  } catch (error) {
    console.error("Realtime session network failure", error.name);
    res.status(502).send("Could not reach the Realtime API");
  }
});

app.listen(3000, "127.0.0.1", () => console.log("Open http://localhost:3000"));
```

Server `127.0.0.1:3000` ला bind होतो, स्थानिक page चा host व POST origin एवढेच स्वीकारतो आणि SDP answer परत देतो. 25 सेकंद upstream deadline हा उदाहरणाचा निर्णय आहे. Timeout किंवा browser तुटणे म्हणजे OpenAI ने request स्वीकारली नाही असा पुरावा नाही; अनिश्चित सुरुवात पुन्हा करण्याआधी वापर पाहा.

3. पुढील मजकूर `index.html` म्हणून जतन करा. Page **Start voice** नंतर माइक परवानगी मागतो, स्थानिक server ला offer पाठवतो आणि आलेला audio वाजवतो. **Stop** connection बंद करून microphone tracks थांबवतो, setup सुरू असतानाही. 30 सेकंद setup timer हेही उदाहरणाचे निवडलेले मूल्य आहे, API guarantee नाही.

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Local Realtime voice check</title>
<button id="start">Start voice</button>
<button id="stop" disabled>Stop</button>
<p id="status" role="status">Idle</p>
<audio id="reply" autoplay controls></audio>
<script type="module">
  const start = document.querySelector("#start");
  const stop = document.querySelector("#stop");
  const status = document.querySelector("#status");
  const reply = document.querySelector("#reply");
  let current;

  function closeSession(session = current, message = "Stopped") {
    if (!session) return;
    session.closed = true;
    clearTimeout(session.timer);
    session.abort.abort();
    session.mic?.getTracks().forEach(track => track.stop());
    if (session.pc) session.pc.onconnectionstatechange = null;
    session.dc?.close();
    session.pc?.close();
    if (current === session) {
      current = null;
      reply.srcObject = null;
      start.disabled = false;
      stop.disabled = true;
      status.textContent = message;
    }
  }

  start.onclick = async () => {
    const session = { abort: new AbortController(), closed: false };
    current = session;
    start.disabled = true;
    stop.disabled = false;
    status.textContent = "Requesting microphone";
    session.timer = setTimeout(() => closeSession(session, "Setup timed out; microphone stopped"), 30000);
    try {
      const mic = await navigator.mediaDevices.getUserMedia({ audio: true });
      if (session.closed) { mic.getTracks().forEach(track => track.stop()); return; }
      session.mic = mic;
      const pc = session.pc = new RTCPeerConnection();
      pc.ontrack = event => { if (!session.closed) reply.srcObject = event.streams[0]; };
      pc.onconnectionstatechange = () => {
        if (session.closed) return;
        status.textContent = `Connection: ${pc.connectionState}`;
        if (pc.connectionState === "connected") clearTimeout(session.timer);
        if (["failed", "closed", "disconnected"].includes(pc.connectionState)) {
          closeSession(session, "Connection ended; microphone stopped. Start a new session.");
        }
      };
      pc.addTrack(mic.getAudioTracks()[0], mic);
      const dc = session.dc = pc.createDataChannel("oai-events");
      dc.onmessage = message => {
        if (session.closed) return;
        try {
          const event = JSON.parse(message.data);
          if (event.type === "session.created") status.textContent = "Session ready: speak when connected";
          if (event.type === "response.done") {
            status.textContent = `Response status: ${event.response?.status || "unknown"}; verify audible playback`;
          }
          if (event.type === "error") closeSession(session, `Realtime error: ${event.error?.message || "unknown"}; stopped`);
        } catch { closeSession(session, "Invalid event; stopped"); }
      };
      dc.onclose = () => { if (!session.closed) closeSession(session, "Event channel closed; stopped"); };
      dc.onerror = () => closeSession(session, "Event channel failed; stopped");
      const offer = await pc.createOffer();
      await pc.setLocalDescription(offer);
      if (session.closed) return;
      // The official WebRTC example submits the generated offer directly.
      const response = await fetch("/session", {
        method: "POST",
        headers: { "Content-Type": "application/sdp" },
        body: offer.sdp,
        signal: session.abort.signal
      });
      if (!response.ok) throw new Error(await response.text());
      const answer = await response.text();
      if (session.closed) return;
      await pc.setRemoteDescription({ type: "answer", sdp: answer });
      if (!session.closed && pc.connectionState !== "connected") status.textContent = "Signaling complete; waiting for connection";
    } catch (error) {
      if (!session.closed) closeSession(session, `Start failed: ${error.message}`);
    }
  };
  stop.onclick = () => closeSession();
  window.addEventListener("pagehide", () => closeSession());
</script>
</html>
```

Peer किंवा event-channel त्रुटी व page सोडतानाही browser session बंद करतो. Stop किंवा timeout नंतर परवानगी येऊ शकते; उशिराचा track थांबवला जातो. Status line `response.done` आणि त्याची नोंदवलेली स्थिती दाखवते. फक्त हा event उत्तर ऐकू आले किंवा cancelled/failed response यशस्वी झाला हे सिद्ध करत नाही.

4. दोन्ही फायलींच्या directory मधून server सुरू करा; त्या process environment मध्ये `OPENAI_API_KEY` आधीपासून set असावे:

```bash
node server.mjs
```

उघडा: `http://localhost:3000`. आपल्याला **Start voice**, **Stop**, **Idle** स्थिती व audio player दिसला पाहिजे. **Start voice** क्लिक करून माइक परवानगी द्या व छोटा असंवेदनशील प्रश्न बोला. OpenAI चे [Realtime conversations मार्गदर्शन](https://developers.openai.com/api/docs/guides/realtime-conversations) सांगते की default voice activity detection बोलण्यानंतरच्या विरामाने उत्तर सुरू करू शकते. स्वतःचा run यशस्वी आहे का पाहा: माइक सक्रिय, connection `connected` पर्यंत, `session.created` event, ऐकू येणारी वाणी आणि `response.done` मध्ये completed response. **Stop** क्लिक करून माइक indicator बंद झाला पाहा. या तपासण्या आपण करायच्या आहेत; BIG CHANGE ने हा paid browser session चालवला नाही.

## तपासणी अयशस्वी झाल्यास

माइक परवानगी नाकारली किंवा device नसेल तर browser permission व device पाहा, मग स्थानिक `localhost` URL किंवा HTTPS वापरा. Page `/session` failure दाखवत असेल तर server HTTP status, key, project model access, billing, rate limits आणि endpoint तपासा. Server मुद्दाम key किंवा OpenAI response body छापत नाही. 502 नेटवर्क त्रुटी किंवा 25 सेकंद deadline देखील असू शकतो; अनिश्चित upstream request स्वीकारली का हे सांगत नाही.

Signaling यशस्वी पण connection अयशस्वी असल्यास page status, network restrictions व SDP answer पाहा. सक्रिय connection शांत असेल तर mic input व निवडलेला output पाहा. Autoplay रोखलेला असू शकतो: audio control मधील **Play** क्लिक करा, मग गरज असल्यास थांबवून नवे session सुरू करा. प्रत्येक त्रुटीत **Stop** वापरा आणि माइक indicator बंद असल्याची खात्री करा. Request चा निकाल अनिश्चित असल्यास वारंवार सुरू करण्यापूर्वी project usage पाहा.

## खर्च, गोपनीयता आणि मर्यादा

OpenAI नुसार `gpt-realtime-2.1` च्या noncached text input/output किंमती **प्रति दहा लाख tokens $4/$24** आणि audio input/output **प्रति दहा लाख tokens $32/$64** आहेत; 19 ऑक्टोबर 2026 रोजी तपासले. खर्च वापरलेल्या tokens वर असतो, पुढील turns मध्ये आधीच्या conversation context सह. वापरण्याआधी [model किंमती व मर्यादा](https://developers.openai.com/api/docs/models/gpt-realtime-2.1) आणि स्वतःचा project usage पाहा; फक्त कालावधीवरून session bill काढता येत नाही. [Realtime conversations मार्गदर्शन](https://developers.openai.com/api/docs/guides/realtime-conversations) जास्तीत जास्त session 60 मिनिटे सांगते.

Session मध्ये माइकचा आवाज OpenAI कडे जातो. पाठवण्याचा अधिकार असलेली वाणी वापरा; खासगी किंवा तिसऱ्यांचा audio टाळा. स्थानिक page मध्ये sign-in किंवा प्रति वापरकर्ता budget control नाही. सामायिक सेवेला authenticated, rate-limited `/session` access आणि server-derived safety identifier हवा; स्थानिक Host व Origin तपासणी पुरेशी नाही. उदाहरण बाह्य tools किंवा phone calls करत नाही. Latency, विश्वासार्हता, वाणीचा दर्जा, बचत किंवा production deployment परिणाम मोजलेला नाही.

## स्रोत आणि पुढील वाचन

- [OpenAI WebRTC मार्गदर्शन](https://developers.openai.com/api/docs/guides/voice-webrtc): unified Realtime server exchange, browser audio path व वेगळा GPT-Live protocol.
- [OpenAI Realtime conversations मार्गदर्शन](https://developers.openai.com/api/docs/guides/realtime-conversations): session events, turn behavior, response status व कालमर्यादा.
- [OpenAI `gpt-realtime-2.1` model page](https://developers.openai.com/api/docs/models/gpt-realtime-2.1): model access, token किंमती व rate limits. उदाहरण चालवताना किंमती व access पुन्हा तपासा.

## Sources

- [OpenAI WebRTC मार्गदर्शन](https://developers.openai.com/api/docs/guides/voice-webrtc) — Realtime unified calls interface, trusted key, SDP, browser audio व वेगळा GPT-Live protocol.
- [OpenAI Realtime संभाषणे](https://developers.openai.com/api/docs/guides/realtime-conversations) — Session events, VAD, response status आणि 60 मिनिटे कालावधी.
- [OpenAI gpt-realtime-2.1 model](https://developers.openai.com/api/docs/models/gpt-realtime-2.1) — Model च्या token किंमती व access.
- [OpenAI आवाज खर्च अनुकूलन](https://developers.openai.com/api/docs/guides/voice-latency-cost) — Context व प्रति response वापर.
- [OpenAI API आणि ChatGPT billing](https://help.openai.com/en/articles/9039756-managing-billing-for-chatgpt-and-the-api-platform) — वेगवेगळी billing व्यवस्था.