Browser calling (WebRTC)

npm install livekit-client

ONCORE_API_KEY=your_tenant_api_key
ONCORE_PHONE_NUMBER=+15555550123

export const dynamic = "force-dynamic";

type WebRtcConnection = {
  token: string;
  url: string;
  room: string;
};

export async function POST() {
  const apiKey = process.env.ONCORE_API_KEY;
  const phoneNumber = process.env.ONCORE_PHONE_NUMBER;

  if (!apiKey || !phoneNumber) {
    return Response.json({ error: "WebRTC is not configured" }, { status: 500 });
  }

  const upstream = await fetch("https://core-api.heysadie.ai/webrtc-call/connect", {
    method: "POST",
    headers: {
      Authorization: `ApiKey ${apiKey}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ phoneNumber }),
    cache: "no-store",
  });

  if (!upstream.ok) {
    return Response.json(
      { error: "Could not start the browser call" },
      { status: upstream.status },
    );
  }

  const connection = (await upstream.json()) as WebRtcConnection;
  return Response.json(connection, {
    headers: { "Cache-Control": "no-store" },
  });
}

"use client";

import { useEffect, useRef, useState } from "react";
import { Room, RoomEvent, Track } from "livekit-client";

type CallState = "idle" | "connecting" | "connected" | "reconnecting";
type WebRtcConnection = { token: string; url: string; room: string };

export function OnCoreCallButton() {
  const roomRef = useRef<Room | null>(null);
  const audioRootRef = useRef<HTMLDivElement>(null);
  const [state, setState] = useState<CallState>("idle");
  const [error, setError] = useState<string | null>(null);
  const [audioBlocked, setAudioBlocked] = useState(false);

  function removeAudioElements() {
    audioRootRef.current?.replaceChildren();
  }

  async function endCall() {
    const room = roomRef.current;
    roomRef.current = null;
    if (room) await room.disconnect(true);
    removeAudioElements();
    setAudioBlocked(false);
    setState("idle");
  }

  async function startCall() {
    if (roomRef.current) return;
    setError(null);
    setState("connecting");

    const room = new Room();
    roomRef.current = room;

    room.on(RoomEvent.TrackSubscribed, (track) => {
      if (track.kind !== Track.Kind.Audio || !audioRootRef.current) return;
      const element = track.attach();
      element.autoplay = true;
      audioRootRef.current.appendChild(element);
    });
    room.on(RoomEvent.TrackUnsubscribed, (track) => {
      for (const element of track.detach()) element.remove();
    });
    room.on(RoomEvent.AudioPlaybackStatusChanged, (playing) => {
      setAudioBlocked(!playing);
    });
    room.on(RoomEvent.Reconnecting, () => setState("reconnecting"));
    room.on(RoomEvent.Reconnected, () => setState("connected"));
    room.on(RoomEvent.Disconnected, () => {
      if (roomRef.current === room) roomRef.current = null;
      removeAudioElements();
      setAudioBlocked(false);
      setState("idle");
    });

    try {
      const response = await fetch("/api/oncore-session", { method: "POST" });
      if (!response.ok) {
        const body = await response.json().catch(() => ({}));
        throw new Error(body.error ?? `Could not start call (${response.status})`);
      }

      const { url, token } = (await response.json()) as WebRtcConnection;
      await room.connect(url, token);
      await room.localParticipant.setMicrophoneEnabled(true);
      setAudioBlocked(!room.canPlaybackAudio);
      setState("connected");
    } catch (cause) {
      await room.disconnect(true);
      if (roomRef.current === room) roomRef.current = null;
      removeAudioElements();
      setState("idle");

      const micDenied = cause instanceof DOMException && cause.name === "NotAllowedError";
      setError(
        micDenied
          ? "Microphone access was denied. Allow it in browser settings and try again."
          : cause instanceof Error
            ? cause.message
            : "Could not start the call.",
      );
    }
  }

  async function resumeAudio() {
    const room = roomRef.current;
    if (!room) return;
    await room.startAudio();
    setAudioBlocked(!room.canPlaybackAudio);
  }

  useEffect(() => {
    return () => {
      void roomRef.current?.disconnect(true);
      roomRef.current = null;
    };
  }, []);

  const active = state !== "idle";

  return (
    <div>
      <button onClick={active ? endCall : startCall} disabled={state === "connecting"}>
        {state === "idle" && "Talk to us"}
        {state === "connecting" && "Connecting..."}
        {state === "connected" && "End call"}
        {state === "reconnecting" && "Reconnecting..."}
      </button>

      {audioBlocked && <button onClick={resumeAudio}>Play call audio</button>}
      <p aria-live="polite">{error}</p>
      <div ref={audioRootRef} aria-hidden="true" />
    </div>
  );
}

{
  "token": "eyJhbGciOi...",
  "url": "wss://example.livekit.cloud",
  "room": "webrtc-<uuid>"
}