Browser Voice Agent

import { Voice } from "@clutchcall/sdk/voice";
import { captureMicrophone, OpusPlayer } from "@clutchcall/sdk/moqt";

// A publishable, voice-scoped token your backend hands the page — never the
// server API key. See the backend section.
async function mintSession(): Promise<{ sid: string; token: string }> {
  const res = await fetch("/api/voice/session", { method: "POST" });
  if (!res.ok) throw new Error(`session mint failed: ${res.status}`);
  return res.json();
}

async function startAgentCall() {
  const { sid, token } = await mintSession();

  const v = new Voice({
    baseUrl:   "https://engine.clutchcall.dev",
    apiKey:    token,            // browser-scoped, short-lived
    orgId:     "org_abc",
    relayHost: "relay.clutchcall.dev",
  });

  // 1. Playback graph. Opus decodes at 48 kHz mono. Create + start() inside the
  //    click handler so the AudioContext is allowed to produce sound.
  const ctx    = new AudioContext();
  const player = new OpusPlayer(ctx, { sampleRate: 48000, channels: 1 });
  await player.start();

  // 2. Attach as the caller: subscribe the downlink (agent → user), publish the
  //    uplink (user mic → agent). onDownlink is (frame, tsUs); player.push is
  //    (tsUs, frame) — note the argument order flips.
  const bridge = await v.audioBridge.attachCaller(sid, {
    codec:      "opus",
    onDownlink: (frame, tsUs) => player.push(tsUs, frame),
  });

  // 3. Capture the mic. captureMicrophone writes encoded frames to an
  //    AudioPublication; adapt the bridge's publishUplink to that shape.
  const mic = await captureMicrophone(
    { write: (tsUs, frame) => bridge.publishUplink(frame, tsUs) } as any,
    {
      audioConstraints: {
        echoCancellation: true,   // the browser's AEC — the engine has none
        autoGainControl:  true,
        noiseSuppression: true,
      },
    },
  );

  // 4. Teardown. Stop capture and playback, then close the bridge (which drops
  //    both tracks and the transport).
  async function hangUp() {
    mic.stop();
    player.close();
    await ctx.close();
    await bridge.close();
  }

  return { sid, hangUp };
}

// Wire it to a button. The first click starts the call; the AudioContext and
// getUserMedia both need this user gesture.
const btn = document.querySelector<HTMLButtonElement>("#talk")!;
let session: { sid: string; hangUp: () => Promise<void> } | null = null;

btn.addEventListener("click", async () => {
  if (session) {
    await session.hangUp();
    session = null;
    btn.textContent = "Talk to the agent";
    return;
  }
  btn.disabled = true;
  session = await startAgentCall();
  btn.disabled = false;
  btn.textContent = "Hang up";
});