Tutorial: build a video call

mkdir livqeno-call && cd livqeno-call
npm init -y
npm install express

livqeno config set apiUrl https://api.livqeno.com   # once: the CLI defaults to localhost
livqeno login
livqeno projects create my-first-call               # prints the project ID
livqeno projects use <project-id>                   # the ID it just printed
livqeno keys create --name local-dev --environment development

export LIVQENO_API_KEY="rvk_dev_8Kd2nQxwYtLm.aG9wZXlvdWFyZWhhdmluZ2Fsb3ZlbHlkYXk"
export LIVQENO_API_URL="https://api.livqeno.com"

import express from 'express';
import { Livqeno } from '@livqeno/server';
 
const app = express();
app.use(express.json());
app.use(express.static('public'));
 
const livqeno = new Livqeno({
  apiKey: process.env.LIVQENO_API_KEY,
  baseUrl: process.env.LIVQENO_API_URL, // https://api.livqeno.com
});
 
// Create the room once at startup. In a real app you'd create rooms in
// response to something — a meeting being scheduled, a support chat
// opening — and store the id alongside whatever that thing is.
let roomId;
app.listen(3000, async () => {
  const room = await livqeno.rooms.create({ name: 'tutorial-room', getOrCreate: true });
  roomId = room.id;
  console.log('Ready on http://localhost:3000');
});
 
app.post('/api/token', async (req, res) => {
  // In a real app, `identity` comes from YOUR session — req.user.id, a
  // decoded JWT, a database lookup. Never from the request body, which
  // is exactly what the client controls. Taking it from the body here
  // is the tutorial's one shortcut, and it is not safe in production.
  const identity = req.body.identity;
 
  if (!identity) {
    return res.status(400).json({ error: 'identity is required' });
  }
 
  const token = await livqeno.tokens.create({
    room: roomId,
    identity,
    permissions: { join: true, publish: true, subscribe: true },
    expiresIn: 3600,
  });
 
  // Forward the whole response — token, endpoint, and iceServers are
  // all needed by the browser, and iceServers especially must never be
  // hand-constructed.
  res.json(token);
});

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Livqeno call</title>
    <style>
      body { font-family: system-ui; max-width: 800px; margin: 2rem auto; }
      video { width: 320px; background: #000; border-radius: 8px; margin: 0.5rem; }
      button { padding: 0.5rem 1rem; margin-right: 0.5rem; }
    </style>
  </head>
  <body>
    <h1>Livqeno call</h1>
 
    <p>
      <input id="name" placeholder="Your name" />
      <button id="join">Join</button>
      <button id="leave" disabled>Leave</button>
    </p>
    <p>Status: <strong id="status">not joined</strong></p>
 
    <div>
      <h2>You</h2>
      <div id="local"></div>
      <h2>Others</h2>
      <div id="remote"></div>
    </div>
 
    <script type="module" src="/bundle.js"></script>
  </body>
</html>

import { createRTCClient } from '@livqeno/rtc';
 
const statusEl = document.getElementById('status');
const localEl = document.getElementById('local');
const remoteEl = document.getElementById('remote');
 
let client;
let room;
 
document.getElementById('join').onclick = async () => {
  const identity = document.getElementById('name').value.trim();
  if (!identity) return alert('Enter a name first');
 
  // 1. Ask YOUR server for a token. The browser never talks to Livqeno's
  //    control plane directly, and never holds an API key.
  const res = await fetch('/api/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ identity }),
  });
  const auth = await res.json();
 
  // 2. Build a client from exactly what the server returned.
  client = createRTCClient({
    token: auth.token,
    endpoint: auth.endpoint,
    iceServers: auth.iceServers,
  });
 
  // 3. Join. Events live on the room, not the client — wire them up
  //    immediately after, before doing anything else.
  room = await client.join(auth.roomName);
 
  room.on('connectionStateChanged', (state) => {
    statusEl.textContent = state;
  });
 
  room.on('error', (error) => {
    console.error(error.code, error.message);
  });
 
  // Someone else's track arrived — attach it to a <video>.
  room.on('trackSubscribed', (track, participant) => {
    const el = track.attach();
    el.id = `track-${participant.identity}-${track.kind}`;
    remoteEl.appendChild(el);
  });
 
  room.on('trackUnsubscribed', (track) => {
    track.detach().forEach((el) => el.remove());
  });
 
  room.on('participantLeft', (participant) => {
    // Clean up anything still on screen for them.
    remoteEl
      .querySelectorAll(`[id^="track-${participant.identity}-"]`)
      .forEach((el) => el.remove());
  });
 
  // 4. Anyone already in the room when you joined won't fire
  //    trackSubscribed — they're available synchronously instead.
  for (const participant of room.remoteParticipants) {
    for (const track of participant.tracks) {
      remoteEl.appendChild(track.attach());
    }
  }
 
  // 5. Publish your own camera and mic.
  const camera = await room.enableCamera();
  await room.enableMicrophone();
 
  if (camera) {
    const el = camera.attach();
    el.muted = true; // never play your own audio back at yourself
    localEl.appendChild(el);
  }
 
  document.getElementById('join').disabled = true;
  document.getElementById('leave').disabled = false;
};
 
document.getElementById('leave').onclick = async () => {
  await room?.leave();
  localEl.innerHTML = '';
  remoteEl.innerHTML = '';
  statusEl.textContent = 'not joined';
  document.getElementById('join').disabled = false;
  document.getElementById('leave').disabled = true;
};

npx esbuild public/call.js --bundle --format=esm --outfile=public/bundle.js

node server.js