Get started

// The Relay URL; for a local Relay with a self-signed certificate, also its SHA-256 (Get started).
export const relay = { url: 'https://relay.example/', serverCertificateHashes: [] as string[] };

// Get started: connect with the link in the page's address (page.html#link={id}), publish the
// camera and microphone at {identity}/camera.hang, and play everyone else's.
import { connect, moq, publish, watch } from 'tablebox.io';
import { relay } from './relay.ts';

const link = new URLSearchParams(location.hash.slice(1)).get('link') ?? '';
const connection = await connect({ ...relay, link });
const me = connection.identity!;
connection.status.subscribe(status => {
  document.getElementById('status')!.textContent = `${me}: ${status} over ${connection.transport.peek() ?? '…'}`;
});
addEventListener('pagehide', () => connection.close());

const camera = new publish.Source.Camera();
const microphone = new publish.Source.Microphone();
const video = new publish.Video.Capture({ source: new publish.Signals.Computed(e => e.get(camera.out.source)?.video) });
const audio = new publish.Audio.Capture({ source: new publish.Signals.Computed(e => e.get(microphone.out.source)?.audio) });
const broadcast = new publish.Broadcast({ origin: connection.origin, name: moq.Path.from(`${me}/camera.hang`), display: video.out.display });
new publish.Video.Encoder('video/hd', { broadcast, capture: video });
new publish.Audio.Encoder('audio', { broadcast, capture: audio });

const people = new Map<string, { item: HTMLLIElement; player: watch.Player }>();
for await (const { kind, prefix } of connection.list('')) {
  const who = prefix.slice(0, prefix.indexOf('/'));
  if (!prefix.endsWith('/camera.hang') || who === me) continue;
  if (kind === 'retracted') {
    people.get(who)?.player.close();
    people.get(who)?.item.remove();
    people.delete(who);
  } else if (!people.has(who)) {
    const item = document.getElementById('people')!.appendChild(document.createElement('li'));
    item.textContent = who;
    const canvas = item.appendChild(document.createElement('canvas'));
    people.set(who, { item, player: new watch.Player({ origin: connection.origin, name: prefix, canvas }) });
  }
}

// Signs tokens with a project key, from TABLEBOX_KEY_ID and TABLEBOX_KEY_SECRET (npm install jose).
import { SignJWT } from 'jose';

export interface Rights { root?: string; publish?: string[]; subscribe?: string[] }

/** A token for `sub` with `rights`, valid for ten minutes. */
export function sign(sub: string, rights: Rights): Promise<string> {
  return new SignJWT({ ...rights })
    .setProtectedHeader({ alg: 'HS256', typ: 'JWT', kid: process.env.TABLEBOX_KEY_ID! })
    .setSubject(sub)
    .setIssuedAt()
    .setExpirationTime('10m')
    .sign(new TextEncoder().encode(process.env.TABLEBOX_KEY_SECRET!));
}

// Your backend on port 8000: gives each user a token that publishes under their own name and reads everything.
import { createServer } from 'node:http';
import { sign } from './token.ts';

createServer(async (request, response) => {
  // Decide here who is asking, with your own sign-in; this sample trusts the query.
  const user = new URL(request.url!, 'http://localhost').searchParams.get('user') ?? '';
  if (!/^[\w-]{1,64}$/u.test(user)) return void response.writeHead(400).end();
  response.end(await sign(user, { publish: [`${user}/**`], subscribe: ['**'] }));
}).listen(8000);

// Connects as `user` with a token from your backend, which the SDK asks for before every attempt.
import { connect } from 'tablebox.io';
import { relay } from './relay.ts';

export async function connectAs(user: string) {
  const getToken = () => fetch(`/token?user=${encodeURIComponent(user)}`).then(reply => reply.text());
  const connection = await connect({ ...relay, getToken });
  connection.status.subscribe(status => {
    console.log(`${user}: ${status}`, connection.transport.peek() ?? '', connection.reason.peek()?.name ?? '');
  });
  return connection;
}

// The Relay URL, and for a local Relay its certificate's SHA-256, from the environment.
const hash = process.env.TABLEBOX_RELAY_CERT_SHA256;
export const relay = { url: process.env.TABLEBOX_RELAY_URL!, serverCertificateHashes: hash ? [hash] : [] };