Markdown সংস্করণ

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

# OpenAI Realtime দিয়ে স্থানীয় ব্রাউজারে কণ্ঠের কথোপকথন তৈরি করুন

> WebRTC-তে OpenAI Realtime দিয়ে ব্রাউজারের মাইক্রোফোনের স্থানীয় কথোপকথন তৈরি করুন। সম্পূর্ণ সার্ভার ও পেজ কোড 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 সার্ভারে থাকে। মডেলে প্রবেশাধিকার ও billing-সহ OpenAI API project চাই; ChatGPT subscription API ব্যবহারের খরচ দেয় না। BIG CHANGE বর্তমান নথি ও নমুনা কোড পরীক্ষা করেছে, কিন্তু অর্থপ্রদত্ত session খোলেনি বা উত্তর শোনেনি।

## বড় পরিবর্তন

- **কী বদলেছে:** OpenAI সরাসরি Realtime কথোপকথনের জন্য ব্রাউজার WebRTC পথ নথিভুক্ত করেছে। স্থানীয় সার্ভার project key রেখে ব্রাউজারের connection offer-এর বদলে answer আনে।
- **কেন গুরুত্বপূর্ণ:** বড় কণ্ঠপণ্য তৈরির আগে ডেভেলপার স্থানীয় পেজে মাইক্রোফোন থেকে কথিত উত্তর পর্যন্ত পুরো পথ পরীক্ষা করতে পারেন। Project মালিক key নিয়ন্ত্রণ করেন এবং API খরচ দেন।
- **যা খেয়াল রাখতে হবে:** স্থানীয় বিনিময় চললেই production প্রস্তুতি প্রমাণ হয় না। শেয়ার করা ব্যবস্থায় caller authentication ও খরচ নিয়ন্ত্রণ চাই; বাতিল বা timeout request ইতিমধ্যে OpenAI পৌঁছে যেতে পারে।

## শুরুর আগে

Node.js 22.6 বা পরের version এবং কাজ করে এমন মাইক্রোফোন ও speaker-সহ বর্তমান ব্রাউজার নিন। মাইক্রোফোনে প্রবেশে নিরাপদ context চাই; `http://localhost` এই স্থানীয় উদাহরণে উপযুক্ত। `gpt-realtime-2.1` access এবং billing চালু করা OpenAI API project key নিন। আগে rate ও spend limits দেখুন। মডেল পেজ 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) বিশ্বস্ত সার্ভারের বিনিময় নথিভুক্ত করে; [মডেল পেজ](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-তে রাখুন। কোড Node-এর নিজস্ব `fetch`, `FormData` ও `AbortSignal.timeout` ব্যবহার করে; পরীক্ষিত ব্যবস্থায় Node.js 22.6 বা পরের version চাই।

2. নিচেরটি `server.mjs` নামে রাখুন। এটি ব্রাউজারের SDP offer (প্রস্তাবিত WebRTC connection-এর বর্ণনা) গ্রহণ করে Realtime session settings-সহ OpenAI পাঠায়। সাধারণ API key শুধু সার্ভারেই পড়া হয়।

```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"));
```

সার্ভার `127.0.0.1:3000`-এ bind হয়ে শুধু স্থানীয় পেজের host ও POST origin গ্রহণ করে এবং SDP answer ফেরায়। 25 সেকেন্ড upstream deadline এই উদাহরণের সিদ্ধান্ত। Timeout বা ব্রাউজার বিচ্ছিন্ন হওয়া মানে OpenAI request নেয়নি নয়; অনিশ্চিত সূচনা পুনরাবৃত্তির আগে ব্যবহার দেখুন।

3. নিচেরটি `index.html` নামে রাখুন। পেজ **Start voice**-এর পরে মাইক্রোফোন অনুমতি চায়, স্থানীয় সার্ভারে 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 ব্যর্থতা এবং পেজ ছাড়লেও ব্রাউজার session বন্ধ করে। Stop বা timeout-এর পরে অনুমতি আসতে পারে; দেরির track বন্ধ হয়। Status line `response.done` ও তার ঘোষিত অবস্থা দেখায়। শুধু এই event উত্তর শোনা গেছে বা বাতিল/ব্যর্থ response সফল হয়েছে প্রমাণ করে না।

4. দুই ফাইলের directory থেকে সার্ভার চালান; তার 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** ক্লিক করে microphone indicator নিভেছে নিশ্চিত করুন। এই পরীক্ষা আপনার করার; BIG CHANGE অর্থপ্রদত্ত browser session চালায়নি।

## যাচাই ব্যর্থ হলে

মাইক্রোফোন অনুমতি না পেলে বা device না দেখলে browser permission ও device দেখুন, তারপর স্থানীয় `localhost` URL বা HTTPS নিন। পেজ `/session` failure দেখালে server HTTP status, key, project model access, billing, rate limits ও endpoint দেখুন। সার্ভার ইচ্ছাকৃতভাবে key বা OpenAI response body ছাপে না। 502 নেটওয়ার্ক ব্যর্থতা বা 25 সেকেন্ড deadline-ও বোঝাতে পারে; অনিশ্চিত upstream request গৃহীত হয়েছে কি না জানায় না।

Signaling সফল কিন্তু connection ব্যর্থ হলে page status, network restriction ও ফেরত SDP answer দেখুন। সংযোগ সচল কিন্তু নীরব হলে 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-সহ। ব্যবহারের আগে [মডেলের মূল্য ও সীমা](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 চলাকালে মাইক্রোফোনের audio OpenAI যায়। পাঠানোর অধিকার আছে এমন কথা বলুন; ব্যক্তিগত বা তৃতীয় পক্ষের audio এড়ান। স্থানীয় পেজে sign-in বা প্রতি ব্যবহারকারীর budget control নেই। শেয়ার করা সেবায় authenticated, rate-limited `/session` access ও server-derived safety identifier চাই; স্থানীয় Host ও Origin পরীক্ষা যথেষ্ট নয়। উদাহরণ বাইরের tools বা phone call করে না। 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` মডেল পেজ](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 মডেল](https://developers.openai.com/api/docs/models/gpt-realtime-2.1) — মডেলভিত্তিক 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 ব্যবস্থা।
Markdown সংস্করণ

প্রতিবেদন খুঁজুন।

BIG CHANGE ঘুরে দেখুন।

প্রতিবেদন খুঁজুন।

BIG CHANGE ঘুরে দেখুন।

Markdown সংস্করণ

বড় ছবিটা। আপনার গতিতে।

আপনার গোপনীয়তা, আপনার পছন্দ।

আপনার গোপনীয়তা, আপনার পছন্দ।
