LiveKit & WebRTC: voice calls in the browser

Browser voice is the third channel after phone and chat. It's a WebRTC session — your user clicks a button on your site, their browser talks to the agent in real time, no phone number, no telephony charges.

How it works

1. Your backend asks Call2Me for a LiveKit token, scoped to one user and one agent
2. Your frontend uses the LiveKit JS SDK to join the room
3. The agent joins the same room
4. Both sides speak; the platform handles STT/LLM/TTS in between

The token controls who can join and what room they land in.

Getting a token

Copycurl -X POST https://api.call2me.app/v1/livekit/token \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "agent_id": "agent_abc123",
    "user_identity": "user_4521",
    "metadata": { "user_email": "alice@example.com" }
  }'

Returns:

Copy{
  "url": "wss://livekit.call2me.app",
  "token": "eyJ...",
  "room_name": "agent_abc123_user_4521_session_xyz"
}

Hand url and token to your frontend. Don't expose your Call2Me API key to the browser — issue tokens from your backend.

Frontend embed

Copy<script type="module">
import { Room, RoomEvent } from 'https://esm.sh/livekit-client@latest';

const r = await fetch('/your-backend/livekit-token', { method: 'POST' });
const { url, token } = await r.json();

const room = new Room();
room.on(RoomEvent.TrackSubscribed, (track) => {
  if (track.kind === 'audio') track.attach(document.getElementById('agent-audio'));
});

await room.connect(url, token);
await room.localParticipant.setMicrophoneEnabled(true);
</script>

<audio id="agent-audio" autoplay></audio>
<button onclick="endCall()">End</button>

That's the whole client. The SDK handles getUserMedia, the WebRTC handshake, the audio routing.

Token lifetime

Tokens are short-lived — typically valid for 60 minutes from issue. For long sessions, your backend should reissue when the token nears expiry. The SDK fires a disconnected event with reason token-expired; your code reissues and reconnects.

For one-shot demos (like the "call me from my browser" button on a marketing page), 60 minutes is more than enough.

Receiving the transcript

LiveKit publishes transcripts as data messages on the same room:

Copyroom.on(RoomEvent.DataReceived, (payload, participant) => {
  const msg = JSON.parse(new TextDecoder().decode(payload));
  if (msg.type === 'transcript') {
    console.log(`${msg.speaker}: ${msg.text}`);
  }
});

This is how the dashboard's live-transcript view works. Use the same pattern in your own UI.

Comparing channels

Browser is faster because there's no telephony hop. Phone is universal. Chat is cheapest. Pick per use case, run them side by side.

What's next

• Voice — STT/TTS/latency that applies to both phone and browser
• Agents — agent definitions are channel-agnostic
• Chats — the text variant