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 لیں۔ مائیکروفون رسائی کے لیے محفوظ 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) موجودہ رسائی اور قیمت بتاتا ہے۔

یہ 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 request limit اس مثال کا انتخاب ہے۔ 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 میں فعال مائیکروفون، `connected` connection، `session.created` event، سنائی دینے والی آواز اور `response.done` میں completed response دیکھیں۔ **Stop** پر کلک کر کے microphone 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** استعمال کر کے microphone 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۔ مثال چلاتے وقت قیمت اور رسائی دوبارہ دیکھیں۔

## 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 نرخ اور رسائی۔
- [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 انتظام۔