` for proper styling. - `LocalUserChoices` — Interface returned by PreJoin onSubmit: `{ username, videoEnabled, audioEnabled, videoDeviceId, audioDeviceId }` - `Chat` — Pre-built chat UI (requires `canPublishData: true` in token grant) - `GridLayout` — Grid layout for participant tiles - `ParticipantTile` — Single participant video/audio tile (auto-shows name placeholder when camera is off) - `ControlBar` — Mic, camera, screen share, leave buttons. Props: - `variation`: `"minimal" | "verbose" | "textOnly"` — controls button label display - `controls`: `{ microphone?: boolean, camera?: boolean, chat?: boolean, screenShare?: boolean, leave?: boolean }` — show/hide individual controls - `RoomAudioRenderer` — Renders all audio tracks (required for hearing remote participants) - `useTracks` — Hook to get tracks by source - `useChat` — Hook for custom chat UI: `{ chatMessages, send }`. Note: `send` may be `undefined` before the room connection is established. Use optional chaining: `send?.('message')`. - `useParticipants` — Hook to get all participants (local + remote) - `useLocalParticipant` — Hook to get the local participant: `{ localParticipant }` - `useRemoteParticipants` — Hook to get only remote participants - `useRoomContext` — Hook to access the Room object directly - `useConnectionState` — Hook to get connection state Always import styles when using React components: ```typescript import '@dtelecom/components-styles'; ``` ## Theming: data-lk-theme `` automatically applies the `data-lk-theme` attribute to its container. Components rendered outside `` (e.g., ``) must be manually wrapped: ```tsx

``` Available themes: `"default"`, `"huddle"`. ## CSS Custom Properties Override these CSS custom properties to customize the look and feel: | Property | Description | |----------|-------------| | `--lk-bg` | Primary background color | | `--lk-bg2` | Secondary background color | | `--lk-fg` | Foreground / text color | | `--lk-accent-bg` | Accent background (buttons, highlights) | | `--lk-danger` | Danger/error color (leave button, errors) | | `--lk-border-radius` | Border radius for UI elements | | `--lk-grid-gap` | Gap between grid tiles | | `--lk-control-bar-height` | Height of the control bar | Example: ```css [data-lk-theme="default"] { --lk-bg: #1a1a2e; --lk-accent-bg: #e94560; --lk-border-radius: 8px; } ``` When creating an AccessToken, use `.addGrant()` with these fields: | Field | Type | Description | |-------|------|-------------| | roomJoin | bool | Permission to join a room | | room | string | Room name (required when roomJoin is true) | | canPublish | bool | Can publish audio/video tracks | | canSubscribe | bool | Can subscribe to others' tracks | | canPublishData | bool | Can send data messages (required for chat) | | roomCreate | bool | Can create rooms (admin tokens) | | roomAdmin | bool | Can moderate rooms (admin tokens) | For a standard participant joining a call: ```typescript at.addGrant({ roomJoin: true, room: roomName, canPublish: true, canSubscribe: true, canPublishData: true }); ``` dTelecom sends webhooks as HTTP POST with JSON body and an `Authorization` header containing a signed JWT with a SHA-256 body hash. The webhook URL is configured per-token via the `webHookURL` option on `AccessToken` — there is no dashboard configuration. The SFU node reads the URL from the JWT and sends events there. In dTelecom's decentralized network, webhooks are signed by the **SFU node** with its own Ed25519 key (not your app's key). `WebhookReceiver` automatically validates the node via the Solana registry, verifies the signature, and checks the body hash. `receive()` is **async**. ```typescript // Set webhook URL when creating the token const at = new AccessToken(apiKey, apiSecret, { identity: 'user-1', webHookURL: process.env.WEBHOOK_URL, // e.g. https://my-app.example.com/api/webhook }); ``` Events: `room_started`, `room_finished`, `participant_joined`, `participant_left` Each event contains a `room` object. Participant events also contain a `participant` object. During development, use cloudflared (`cloudflared tunnel --url http://localhost:3000`) to expose localhost since SFU nodes can't reach `localhost` directly. - Use Markdown code blocks with language identifiers - For full-stack examples, provide separate blocks for: 1. Environment variables (`.env.local`) 2. Server code (API route) 3. Client code (React page) 4. Install command - Always output complete files, never partial updates or diffs This is the canonical reference for a minimal working dTelecom conference app. For a full-featured version with PreJoin, Chat, host controls (kick/mute), and screen sharing, see the complete blueprint: https://github.com/dTelecom/docs/blob/main/CONFERENCE_APP_PLAN.md ## Install ```bash npx create-next-app@latest my-conference --app --typescript cd my-conference npm install @dtelecom/server-sdk-js @dtelecom/livekit-client @dtelecom/components-react @dtelecom/components-styles ``` ## .env.local ``` API_KEY= API_SECRET= SOLANA_CONTRACT_ADDRESS=E2FcHsC9STeB6FEtxBKGAwMTX7cbfYMyjSHKs4QbBAmh SOLANA_NETWORK_HOST_HTTP=https://api.mainnet-beta.solana.com SOLANA_REGISTRY_AUTHORITY=6KVRs6Yr2oYzddepFdtWrFmVq8sgELcXzbUy7apwuQX4 ``` ## Server: app/api/join/route.ts ```typescript import { AccessToken } from '@dtelecom/server-sdk-js'; import { NextRequest, NextResponse } from 'next/server'; export async function POST(req: NextRequest) { const { room, identity } = await req.json(); if (!room || !identity) { return NextResponse.json({ error: 'room and identity are required' }, { status: 400 }); } const at = new AccessToken( process.env.API_KEY!, process.env.API_SECRET!, { identity, name: identity, webHookURL: process.env.WEBHOOK_URL } ); at.addGrant({ roomJoin: true, room, canPublish: true, canSubscribe: true, }); const token = at.toJwt(); const clientIp = (req.headers.get('x-forwarded-for') ?? '127.0.0.1').split(',')[0].trim(); const wsUrl = await at.getWsUrl(clientIp); return NextResponse.json({ token, wsUrl }); } ``` ## Client: app/page.tsx ```tsx 'use client'; import { LiveKitRoom, VideoConference } from '@dtelecom/components-react'; import '@dtelecom/components-styles'; import { useState } from 'react'; export default function Home() { const [room, setRoom] = useState(''); const [identity, setIdentity] = useState(''); const [token, setToken] = useState(''); const [wsUrl, setWsUrl] = useState(''); async function joinRoom() { const res = await fetch('/api/join', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ room, identity }), }); const data = await res.json(); setToken(data.token); setWsUrl(data.wsUrl); } function leaveRoom() { setToken(''); setWsUrl(''); } if (!token || !wsUrl) { return (

Join a Conference

setRoom(e.target.value)} /> setIdentity(e.target.value)} /> Join

); } return ( ); } ``` For non-React usage with the Room class directly: ```typescript import { Room, RoomEvent, RemoteTrack, RemoteTrackPublication, RemoteParticipant } from '@dtelecom/livekit-client'; async function joinRoom(wsUrl: string, token: string) { const room = new Room(); room.on(RoomEvent.TrackSubscribed, (track: RemoteTrack, pub: RemoteTrackPublication, participant: RemoteParticipant) => { const element = track.attach(); document.getElementById('video-container')!.appendChild(element); }); room.on(RoomEvent.TrackUnsubscribed, (track: RemoteTrack) => { track.detach().forEach((el) => el.remove()); }); room.on(RoomEvent.Disconnected, () => { console.log('Disconnected from room'); }); await room.connect(wsUrl, token); await room.localParticipant.setCameraEnabled(true); await room.localParticipant.setMicrophoneEnabled(true); return room; } ``` For custom React layouts instead of the pre-built `VideoConference`: ```tsx import { LiveKitRoom, GridLayout, ParticipantTile, useTracks, RoomAudioRenderer, ControlBar, } from '@dtelecom/components-react'; import { Track } from '@dtelecom/livekit-client'; import '@dtelecom/components-styles'; function MyConference() { const tracks = useTracks( [ { source: Track.Source.Camera, withPlaceholder: true }, { source: Track.Source.ScreenShare, withPlaceholder: false }, ], { onlySubscribed: false } ); return (

); } export default function Page({ token, wsUrl }: { token: string; wsUrl: string }) { return ( ); } ``` For a pre-join page with camera/mic preview before entering the room: ```tsx 'use client'; import { PreJoin, LocalUserChoices } from '@dtelecom/components-react'; import '@dtelecom/components-styles'; export default function PreJoinPage() { async function handleSubmit(choices: LocalUserChoices) { // choices: { username, videoEnabled, audioEnabled, videoDeviceId, audioDeviceId } const res = await fetch('/api/join', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ room: 'my-room', identity: choices.username }), }); const { token, wsUrl } = await res.json(); // Navigate to room page with token, wsUrl, and device settings } return (

console.error(err.message)} defaults={{ username: '', videoEnabled: true, audioEnabled: true }} />

); } ``` For in-room chat using the built-in component (requires `canPublishData: true` in token grant): ```tsx import { Chat } from '@dtelecom/components-react'; // Inside a — renders a complete chat UI ``` For custom chat UI: ```tsx import { useChat } from '@dtelecom/components-react'; function CustomChat() { const { chatMessages, send } = useChat(); return (

{chatMessages.map((msg) => (

{msg.from?.name}: {msg.message}

))}

{ e.preventDefault(); send?.('message'); }}>

); } ``` Note: `send` from `useChat()` may be `undefined` before the room connection is established. Always use optional chaining: `send?.('msg')`. For host controls (kick/mute), embed role in token metadata and verify server-side. IMPORTANT: Do NOT use `getParticipant()` to verify the caller — it is a local read that only checks the current node's in-memory store. In dTelecom's decentralized network, the caller may be on a different node, causing a 404. Instead, pass `callerRole` from the client (the role was set in the JWT by your own server, so it is trustworthy). ```typescript // 1. Server: embed role in token metadata const metadata = JSON.stringify({ role: 'host' }); // or 'guest' const at = new AccessToken(apiKey, apiSecret, { identity, name, metadata }); at.addGrant({ roomJoin: true, room, canPublish: true, canSubscribe: true, canPublishData: true }); // 2. Client: read role from metadata (for UI only), pass callerRole to backend import { useLocalParticipant } from '@dtelecom/components-react'; const { localParticipant } = useLocalParticipant(); const meta = JSON.parse(localParticipant.metadata || '{}'); const isHost = meta.role === 'host'; // When calling kick/mute API, pass callerRole: meta.role // 3. Backend: verify callerRole before privileged actions const { room, identity, callerRole } = await req.json(); if (callerRole !== 'host') { return NextResponse.json({ error: 'Forbidden' }, { status: 403 }); } // Write operations (removeParticipant, mutePublishedTrack) broadcast via P2P — they work from any node const client = await getRoomService(); await client.removeParticipant(room, identity); // kick // or: await client.mutePublishedTrack(room, identity, trackSid, true); // mute ``` Key architecture notes: - Write operations (RemoveParticipant, MutePublishedTrack, SendData) broadcast via P2P — call any node. - Read operations (ListRooms, ListParticipants, GetParticipant) are LOCAL to a single node's in-memory store. - Never rely on `getParticipant()` for cross-node verification. For server-side room management: ```typescript import { AccessToken, RoomServiceClient } from '@dtelecom/server-sdk-js'; // Create an admin token for room management const adminToken = new AccessToken(process.env.API_KEY!, process.env.API_SECRET!, { identity: 'server-admin', }); adminToken.addGrant({ roomCreate: true, roomAdmin: true }); // Obtain the API URL dynamically — do not hardcode const apiUrl = await adminToken.getApiUrl(); // Initialize room service client const roomService = new RoomServiceClient( apiUrl, process.env.API_KEY!, process.env.API_SECRET! ); // Create a room const room = await roomService.createRoom({ name: 'meeting-123', emptyTimeout: 600, maxParticipants: 50, metadata: JSON.stringify({ createdBy: 'admin', topic: 'Team standup' }), }); // List all active rooms const rooms = await roomService.listRooms(); // List participants in a room const participants = await roomService.listParticipants('meeting-123'); // Remove a participant await roomService.removeParticipant('meeting-123', 'disruptive-user'); // Send a message to all participants const encoder = new TextEncoder(); const data = encoder.encode(JSON.stringify({ type: 'announcement', text: 'Meeting ends in 5 minutes' })); await roomService.sendData('meeting-123', data, 0); // 0 = RELIABLE // Delete a room await roomService.deleteRoom('meeting-123'); ``` For handling dTelecom webhooks in Next.js. The webhook URL is set per-token via `webHookURL` in AccessToken options. Webhooks are signed by SFU nodes; `receive()` is async: ```typescript import { WebhookReceiver } from '@dtelecom/server-sdk-js'; import { NextRequest, NextResponse } from 'next/server'; const receiver = new WebhookReceiver(process.env.API_KEY!, process.env.API_SECRET!); export async function POST(req: NextRequest) { const body = await req.text(); // raw body needed for SHA-256 verification const authToken = req.headers.get('Authorization') ?? ''; try { const event = await receiver.receive(body, authToken); switch (event.event) { case 'room_started': console.log('Room started:', event.room?.name); break; case 'room_finished': console.log('Room finished:', event.room?.name); break; case 'participant_joined': console.log('Participant joined:', event.participant?.identity, 'in', event.room?.name); break; case 'participant_left': console.log('Participant left:', event.participant?.identity, 'from', event.room?.name); break; } return NextResponse.json({ received: true }); } catch (e) { return NextResponse.json({ error: 'Invalid webhook' }, { status: 400 }); } } ``` Avoid these frequent errors: 1. WRONG: `serverUrl="wss://some-fixed-url.com"` → There is no fixed URL. Use the dynamic `wsUrl` from `getWsUrl()`. 2. WRONG: `import { connect } from '@dtelecom/livekit-client'` → The `connect()` function is deprecated. Use `new Room()` then `room.connect()`. 3. WRONG: `import { ... } from '@dTelecom/client-sdk-js'` → Wrong package name. Use `@dtelecom/livekit-client`. 4. WRONG: `import { ... } from 'livekit-client'` → Missing the `@dtelecom/` scope. 5. WRONG: Creating tokens client-side → Tokens MUST be created server-side to protect API_SECRET. 6. WRONG: Calling `getWsUrl()` client-side → It requires the server SDK and API credentials. 7. WRONG: Omitting `@dtelecom/components-styles` import → React components will render without any styling. 8. WRONG: Passing `'127.0.0.1'` as clientIp in production → Extract real IP from `x-forwarded-for` for proper geographic node selection. 9. WRONG: Building a custom chat from scratch with `publishData` → Use the built-in `` component or `useChat` hook from `@dtelecom/components-react`. 10. WRONG: Calling `RoomServiceClient` from frontend code → Server SDK must only be used server-side (API routes). The frontend should call your API routes, which then call the server SDK. 11. WRONG: Hardcoding an API host URL for `RoomServiceClient` → Use `getApiUrl()` to dynamically obtain the `https://` endpoint.