Markdown பதிப்பு

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

# OpenAI Realtime மூலம் உள்ளூர் உலாவி குரல் உரையாடலை உருவாக்குங்கள்

> WebRTC-இல் OpenAI Realtime கொண்டு உள்ளூர் உலாவி மைக்ரோஃபோன் உரையாடலை உருவாக்குங்கள். முழு server, page code API key-ஐ server-இல் வைத்து, ஒலி சோதனை, மைக் நிறுத்தம், தோல்வி கையாளுதல் காட்டுகிறது.

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** setup நடக்கும்போதும் connection மூடி microphone tracks நிறுத்துகிறது. 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 என்பது network தோல்வி அல்லது 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-இல் மைக் audio 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 முறைகள்.