VibeLive SDK — Hello World Series

App 1

helloworld

The baseline

The smallest complete VibeLive app: two people on live video in about 55 lines, including all CSS. The first visitor becomes the host and a room is created automatically; guests join by opening the same link (the room code is carried in the URL). This app establishes the lifecycle every later app builds on.

1

Load and initialize the SDK

A single ESM import plus init() with your project ID is the only configuration required. STUN/TURN, ICE negotiation, and signaling are all handled invisibly — your app never touches a socket.

import VibeLive from 'https://makedo.com/sdk/makedo-vibelive.esm.min.js'; VibeLive.init({ projectId: 'YOUR_TRIAL_PROJECT_ID' });

2

Sign up, create or join a room, then enter

signup() creates an anonymous identity — no email or password. The host calls createRoom() to get a shareable room_code; everyone enters the same room with enterByRoomCode(), which fires channelSelected once you are safely inside.

await VibeLive.signup('Self'); // anonymous if (!code) { // no ?code= → this visitor hosts const room = await VibeLive.createRoom('Hello World'); code = room.room_code; // share this with guests } await VibeLive.enterByRoomCode(code); // → fires channelSelected

3

Go live inside `channelSelected`

Always do setup in channelSelected, not after enterByRoomCode(). Camera and mic are off by default: you must call setVideo(true) / setAudio(true), then startLive() to open the WebRTC connection.

VibeLive.on('channelSelected', async () => { addTile(VibeLive.memberId, 'Self', 'camera'); // your own tile first await VibeLive.setVideo(true); // camera on await VibeLive.setAudio(true); // mic on await VibeLive.startLive(); // connect WebRTC → LIVE });

4

Render remote video with `registerTile()`

A tile is a plain <div> holding a <video>. registerTile() wires the stream to it — without that call nothing renders. The SDK auto-removes the tile when the member exits, so there's no teardown code. One addTile() helper serves both remoteJoined and remoteStreamStart; an id guard makes double-calls safe.

VibeLive.on('remoteJoined', (id) => { addTile(id, 'Guest', 'camera'); }); VibeLive.on('remoteStreamStart', (id, type) => { addTile(id, 'Guest', type); }); function addTile(id, name, streamType) { const tileId = `tile--`; if (document.getElementById(tileId)) return; // never create twice const tile = document.createElement('div'); tile.id = tileId; tile.className = 'tile'; tile.innerHTML = `<video autoplay playsinline></video>`; document.getElementById('grid').appendChild(tile); VibeLive.registerTile(id, streamType, tile); // ← wires stream to <video> }

5

Exit and rejoin

exitRoom() leaves the room and releases the camera; the SDK removes every registered tile for you. To rejoin, just call enterByRoomCode() again — it re-fires channelSelected, so the same setup handler runs and you're back live. One button toggles between the two.

btnExit.onclick = async () => { if (btnExit.textContent === 'Exit') { VibeLive.exitRoom(); // leave + release camera btnExit.textContent = 'Rejoin'; } else { await VibeLive.enterByRoomCode(code); // re-fires channelSelected btnExit.textContent = 'Exit'; } };

App 2

helloworld-media

Toggles & screen share

▶ Open the app View source Builds on → helloworld

Adds camera/mic on-off controls and screen share. Button labels reflect live SDK state (Cam: ON / Mic: MUTED / Screen: OFF), and the layout splits into a screenshare stage plus a camera strip whenever someone is sharing. The key new idea: read media state from the SDK, don't track it yourself.

1

Toggle camera, mic, and screen share

Each toggle reads the current value off VibeLive.mediaState / VibeLive.screenState and flips it. No local boolean to keep in sync — the SDK is the single source of truth.

<button onclick="VibeLive.setVideo(!VibeLive.mediaState.video)">Cam</button> <button onclick="VibeLive.setAudio(!VibeLive.mediaState.audio)">Mic</button> <button onclick="VibeLive.setScreenshare(!VibeLive.screenState.video)">Screen</button>

2

Drive button labels from `memberStateChange`

memberStateChange fires for any member whose media state changes — including yourself. Update your button labels here so they always match reality, even when a toggle takes a moment to apply. Values are 'ON', 'MUTED', or 'OFF'.

VibeLive.on('memberStateChange', (id, state) => { if (id === VibeLive.memberId) { // my own state → relabel buttons btnCam.textContent = `Cam: `; btnMic.textContent = `Mic: `; btnScreen.textContent = `Screen: `; } });

3

Screen share is a second stream type

A member can publish both 'camera' and 'screenshare' streams. Register each in its own tile. Show or hide the screenshare tile based on state.screenVideo, and listen for remoteStreamEnd to re-flow the layout when a share stops. getMemberState(id) lets you catch a share that started before its state event arrived.

// pre-create a hidden screenshare tile for self; shown by memberStateChange addTile(VibeLive.memberId, 'Self', 'screenshare'); VibeLive.on('memberStateChange', (id, state) => { const tile = document.getElementById(`tile--screenshare`); if (tile) tile.style.display = state.screenVideo !== 'OFF' ? '' : 'none'; }); VibeLive.on('remoteStreamEnd', (id, type) => { /* re-flow layout */ });

New API	Purpose
setScreenshare(bool)	Start or stop publishing your screen
mediaState	Live `{ video, audio }` state for self
screenState	Live `{ video }` screenshare state for self
memberStateChange	Fires when any member's media state changes
remoteStreamEnd	A remote camera or screenshare stream stopped
getMemberState(id)	Read a member's current media state on demand

App 3

helloworld-members

Roster & presence

▶ Open the app View source Builds on → helloworld

Adds a member-list sidebar showing each person's live status, and replaces the automatic go-live with explicit Go Live / Stop Live buttons — so members sit in PRE-LIVE until they choose to broadcast. The roster is seeded once, then kept current by presence events.

1

Enter PRE-LIVE, go live on demand

Skip startLive() in channelSelected — turn the camera on but stay in PRE-LIVE. The user clicks Go Live (calls startLive()) or Stop Live (calls stopLive()). Track readiness with VibeLive.isLive plus the localJoined / localLeft events.

VibeLive.on('channelSelected', async () => { addTile(VibeLive.memberId, myName, 'camera'); await VibeLive.setVideo(true); await VibeLive.setAudio(true); // no startLive() — user clicks [Go Live] }); VibeLive.on('localJoined', updateButtons); VibeLive.on('localLeft', updateButtons);

2

Seed the roster with `getMembers()`

Once inside the room, getMembers() returns everyone currently present. Each member carries a displayName and a displayStatus — a friendly label: LIVE, PRE-LIVE, or EXITED.

const list = await VibeLive.getMembers(); for (const m of list) members.set(m.id, { displayName: m.displayName, status: m.displayStatus }); renderMembers();

3

Keep the roster current with presence events

memberStateChange updates a member's status (and signals new arrivals); memberUpdate signals a renamed member — re-read it with getMember(id). Re-render on each event and the sidebar always matches the room.

VibeLive.on('memberStateChange', (id, state) => { if (members.has(id)) members.get(id).status = state.status; else members.set(id, { displayName: VibeLive.getMember(id)?.displayName, status: state.status }); renderMembers(); }); VibeLive.on('memberUpdate', (id) => { // displayName changed members.get(id).displayName = VibeLive.getMember(id)?.displayName; renderMembers(); });

New API	Purpose
getMembers()	Snapshot of everyone currently in the room
getMember(id)	Look up one member's current record
displayStatus	Friendly status: `LIVE` / `PRE-LIVE` / `EXITED`
startLive() / stopLive()	Enter or leave LIVE without leaving the room
isLive	Whether you are currently broadcasting
memberUpdate	A member's profile (e.g. name) changed
localJoined / localLeft	Your own connection went live / dropped

App 4

helloworld-chat

Messaging & DMs

▶ Open the app View source Builds on → helloworld

Adds a text-chat panel with both room-wide messages and private direct messages. A [DM] button on each remote tile opens a one-to-one thread. The same sendMessage() call serves both — the difference is one optional argument.

1

Load history, then listen for new messages

Inside channelSelected, fetch recent messages with getMessages(channelId, { count }) (newest-first — reverse for display), then register setOnMessage() for everything that arrives afterward. The channel id is VibeLive.channel.id.

const channelId = VibeLive.channel.id; const history = await VibeLive.getMessages(channelId, { count: 30 }); [...(history || [])].reverse().forEach(m => appendMsg(m)); VibeLive.setOnMessage(msg => appendMsg(msg)); // incoming, live

2

Room message vs. direct message

sendMessage(channelId, text) broadcasts to the room. Add a memberId third argument and the same call becomes a private DM to that member. The app stores a dmTarget; clearing it returns to room-wide.

// room-wide broadcast await VibeLive.sendMessage(channelId, text); // private DM to one member await VibeLive.sendMessage(channelId, text, memberId);

3

Route incoming messages by `target_type`

Each incoming message reports a target_type: 'channel' for room messages, 'member' for DMs. Combine that with sender_member_id to label each line (To Room / PRIVATE to … / From …). De-dupe with the message pid and always escape text before rendering.

function appendMsg(msg) { if (msg.pid && seenPids.has(msg.pid)) return; // de-dupe seenPids.add(msg.pid); const isDM = msg.target_type === 'member'; // 'channel' = room const isSelf = msg.sender_member_id === selfId; // …build a label, escape msg.content, append to the log… }

New API	Purpose
getMessages(channelId, opts)	Fetch recent history (newest-first)
setOnMessage(cb)	Register a handler for incoming messages
sendMessage(ch, text)	Broadcast a room-wide message
sendMessage(ch, text, id)	Send a private DM to one member
channel.id	The active channel id, used by all message calls
target_type	Incoming routing: `'channel'` or `'member'`

App 5

helloworld-sessions

Past sessions & AI summaries

▶ Open the app View source Builds on → helloworld

Adds a left-hand panel that lists every past session in the room — each one is a single member's stretch of time inside, with an AI-generated summary and tags. Click a session to see its full detail, then load the room transcript on request. A session and its summary are produced automatically a couple of minutes after a member leaves, so the list fills in as people come and go.

1

List past sessions with summaries and tags

Inside channelSelected, call getSessions(channelId). Each returned object carries title, summary, tags, start_time, duration_seconds and the other_users who were present. Visibility is requestor-aware on the server — hosts see every session, members see only the ones they were in.

const channelId = VibeLive.channel.id; const sessions = await VibeLive.getSessions(channelId); // alias: getSummaries() for (const s of sessions) { s.title; s.summary; s.tags; s.start_time; s.other_users; // render a row }

2

Refresh when a new summary is ready

A session's summary is generated asynchronously, shortly after a member exits. Subscribe to sessionSummaryReady and re-fetch the list when it fires — no polling. Until the AI finishes, a fresh session shows up with its summary still pending.

VibeLive.on('sessionSummaryReady', () => loadSessions()); // re-fetch, live

3

Load the transcript on request

The summary is the headline; the full transcript is fetched only when asked, with getTranscript(channelId). It returns { status, text, segments }. Note the transcript is retrieved per room (it covers the whole channel), while summaries and tags are per session.

const t = await VibeLive.getTranscript(channelId); out.textContent = t.text || (t.segments || []).join('\n');

New API	Purpose
getSessions(channelId)	List past sessions with summary + tags (requestor-aware)
getSummaries(channelId)	Alias for `getSessions`
getTranscript(channelId)	Fetch the room transcript on request
sessionSummaryReady	Event — a new session summary is ready to load
session.summary / .tags	AI-generated headline and topic labels per session
session.other_users	The other members present during that session

Build it up,
one feature at a time.

helloworld

Load and initialize the SDK

Sign up, create or join a room, then enter

Go live inside `channelSelected`

Render remote video with `registerTile()`

Exit and rejoin

helloworld-media

Toggle camera, mic, and screen share

Drive button labels from `memberStateChange`

Screen share is a second stream type

helloworld-members

Enter PRE-LIVE, go live on demand

Seed the roster with `getMembers()`

Keep the roster current with presence events

helloworld-chat

Load history, then listen for new messages

Room message vs. direct message

Route incoming messages by `target_type`

helloworld-sessions

List past sessions with summaries and tags

Refresh when a new summary is ready

Load the transcript on request

Where to go next

helloworld

Load and initialize the SDK

Sign up, create or join a room, then enter

Go live inside channelSelected

Render remote video with registerTile()

Exit and rejoin

helloworld-media

Toggle camera, mic, and screen share

Drive button labels from memberStateChange

Screen share is a second stream type

helloworld-members

Enter PRE-LIVE, go live on demand

Seed the roster with getMembers()

Keep the roster current with presence events

helloworld-chat

Load history, then listen for new messages

Room message vs. direct message

Route incoming messages by target_type

helloworld-sessions

List past sessions with summaries and tags

Refresh when a new summary is ready

Load the transcript on request

Where to go next

Go live inside `channelSelected`

Render remote video with `registerTile()`

Drive button labels from `memberStateChange`

Seed the roster with `getMembers()`

Route incoming messages by `target_type`