Beta
Tier 1

Just The Basics

Working in minutes
1

Zero-config WebRTC setup

Drop in one script tag (or one ESM import) and call init(). STUN/TURN servers, ICE negotiation, signaling — all handled invisibly. Your app never touches a socket directly.

// Option A — ESM (recommended) import VibeLive from 'https://makedo.com/sdk/makedo-vibelive.esm.min.js'; VibeLive.init({ projectId: 'YOUR_TRIAL_PROJECT_ID' }); // Option B — IIFE (no import needed) // <script src="https://makedo.com/sdk/makedo-vibelive.min.js" onload="initApp()"></script>
2

Anonymous video conferences

Anyone can join with just a name and a room code — no accounts, no passwords, no OAuth flows. Perfect for lightweight embed scenarios and quick prototypes.

VibeLive.init({ projectId: '...' }); await VibeLive.signup('Alice'); // anonymous — no email needed const room = await VibeLive.createRoom('My Room'); // share room.room_code with participants await VibeLive.enterByRoomCode(room.room_code);
3

Go Live / stop streaming

Entering a room puts you in PRE-LIVE — camera preview is available but no WebRTC connection is open yet. Call startLive() when the user is ready to broadcast. The two-step design lets you build waiting rooms, lobby screens, and "ready" confirmations naturally.

VibeLive.startLive(); // connect WebRTC → LIVE VibeLive.stopLive(); // disconnect → back to PRE-LIVE
4

Camera & microphone toggles

One-line on/off for camera and mic. The SDK distinguishes between off (hardware released) and muted (track silenced but still capturing), giving your UI the full signal it needs for accurate indicators.

VibeLive.setVideo(true); // camera on VibeLive.setVideo(false); // camera off (hardware released) VibeLive.setAudio(true); // mic on VibeLive.setAudio(false); // mic off
5

Multi-user concurrent screensharing

Any member — not just the host — can share their screen at the same time. Each screenshare arrives as its own independent stream tile, so multiple screens can be visible simultaneously.

VibeLive.setScreenshare(true); // start sharing your screen VibeLive.setScreenshare(false); // stop sharing // Remote screenshares arrive via: VibeLive.on('remoteStreamStart', (memberId, streamType) => { /* streamType === 'screenshare' */ });
Tier 2

Rooms & Member Awareness

Real-time state, tiles, presence
6

Lobby / PRE-LIVE staging

Members enter a staging area with camera preview before WebRTC connects. Build waiting rooms, "knock to enter" flows, or device-check screens — all without any streaming cost until startLive() is called.

// enterByRoomCode → PRE-LIVE. Camera/mic available, no WebRTC yet. VibeLive.on('channelSelected', (channel) => { showLobbyUI(); // create local tile, show preview }); VibeLive.on('localJoined', () => { showLiveControls(); }); VibeLive.on('localLeft', () => { showLobbyUI(); });
7

Real-time member state

One unified event carries every member's full state — live status, camera, mic, and screenshare — for both local and remote members. Drive all your indicators, placeholders, and visibility from a single event handler. No polling, no duplicated logic.

VibeLive.on('memberStateChange', (memberId, state) => { // state: { live, video: 'ON'|'MUTED'|'OFF', audio: '...', screenVideo: '...' } updateIndicators(memberId, state); }); // Also available synchronously: const state = VibeLive.getMemberState(memberId);
8

Automatic tile lifecycle

Register a tile element once and the SDK handles everything: stream attachment, member exit cleanup, screenshare end, room leave, and kick. Tiles are auto-removed from the DOM — your code never needs a teardown path for remote media.

// Register once after creating your tile element: VibeLive.registerTile(memberId, 'camera', tileElement); VibeLive.registerTile(memberId, 'screenshare', tileElement); // SDK auto-finds <video> inside, attaches srcObject, removes on exit. // Opt-out: keep the element for a fade/exit animation, then clean up manually. VibeLive.init({ projectId, tileAutoRemove: false }); // SDK stops the stream but skips element.remove(). Call unregisterTile() when done.
9

Member directory

Fetch display names and statuses for everyone in the room. Use this to populate a participants list, name labels on tiles, or a roster sidebar — with one async call after entering.

const members = await VibeLive.getMembers(); // → [{ id, displayName, displayStatus }, ...] const one = VibeLive.getMember(memberId); // → { displayName, displayStatus } (synchronous, from local cache)
10

Network quality monitoring

Advanced

Opt-in per-connection quality scoring — good / fair / poor / lost — derived from RTT, jitter, packet loss, and freeze rate. Fires events when quality changes for you or for any remote member. Can auto-render a status bar on affected tiles with no extra code.

VibeLive.init({ projectId: '...', features: { connectionQuality: true, // enable events + getters showMemberQuality: true, // auto-render bar on remote tiles showLocalQuality: true, // auto-render bar on your own tile } }); VibeLive.on('memberQuality', (memberId, s) => { // s: { level: 'poor', reason: 'audio-loss', metrics: { ... } } showQualityBadge(memberId, s.level); });
11

Host can remove members

Advanced

The host can kick any member from the room via the VibeLive console. The SDK surfaces the event cleanly on the removed member's end so your app can show a message and clean up gracefully.

// On the removed member's device: VibeLive.on('kicked', (message) => { alert(message || 'You were removed from this room.'); VibeLive.exitRoom(); // SDK auto-removes all registered tiles });
12

Sound effects on member join / exit

Play chimes, notification sounds, or custom audio cues when members arrive or leave — just hook your own AudioContext into the SDK's presence events.

VibeLive.on('remoteJoined', (memberId) => { playChime('join'); }); VibeLive.on('remoteLeft', (memberId) => { playChime('exit'); });
Tier 3

Communication

Text chat, persistent messages, private DMs
13

Persistent channel text chat

Send messages to the whole room — backed by the database, so history survives after the session ends. Fetch past messages by page and display them in chronological order.

const channelId = VibeLive.channel?.id; await VibeLive.sendMessage(channelId, 'Hello everyone!'); const history = await VibeLive.getMessages(channelId, { count: 20, page: 0 }); // → [{ pid, content, content_type, owner_id, owner_username, // sender_member_id, sender_display_name, // target_type, target_id, uts }, ...] newest-first
14

Real-time message push

Incoming messages from other members arrive instantly over the SDK's WebSocket — no polling required. Register one handler and it fires for both channel-wide messages and private DMs addressed to you.

VibeLive.setOnMessage((msg) => { // msg: { pid, content, content_type, owner_id, owner_username, // sender_member_id, sender_display_name, target_type, target_id, uts } appendToChat(msg); });
15

Private member-to-member DMs

Send and retrieve private messages between two members — scoped to their shared channel. Threads are persistent and paginated, separate from channel-wide chat.

// Send privately to one member: await VibeLive.sendMessage(channelId, 'Hey, just you', memberId); // Fetch the private thread: const thread = await VibeLive.getMessages(channelId, { memberId, count: 20 });
16

Per-tile private DM UI (zero-code)

One flag at room creation injects a complete, ready-made DM interface directly onto every remote camera tile — chat toggle, slide-out input, conversation history, live updates. No additional app code required.

const room = await VibeLive.createRoom('Standup', { enableTileMessaging: true }); // Every remote camera tile now has a 💬 button built-in. // Works alongside your own sendMessage() / setOnMessage() UI — no conflict.
Tier 4

Security

Room codes, session integrity
20

Room codes — private by default

Every room gets a short, shareable code on creation. Only people with the code can enter. Share it however you like — link, QR code, email — and revoke access by rotating the code from your console.

const room = await VibeLive.createRoom('Team Sync'); console.log(room.room_code); // e.g. "XK3B" // Participants join with: await VibeLive.enterByRoomCode('XK3B');
21

Idle member cleanup & liveness checks

The server automatically removes members who go silent for too long (~5 minutes). Your app can intercept the liveness check to prompt the user and keep their session alive.

VibeLive.on('livelinessCheck', () => { // Optional: prompt user, then ack if (confirm('Still there?')) VibeLive.ackLiveliness(); // Safe to omit entirely — server auto-removes after timeout. });
Tier 5

Configuration & Advanced Use

Room options, multi-room, device control, React
26

Room creation options

createRoom() accepts options that control anonymous entry, session end behavior, and the per-tile messaging UI. Room-level settings override project defaults; omit any option to inherit the project default.

const room = await VibeLive.createRoom('My Room', { allowsGuests: true, // allow anonymous (no-email) entry statusOnMeetingEnd: 'closed', // lock room after last member exits enableTileMessaging: true, // inject per-tile DM UI on camera tiles }); // → { id, room_code, title }
30

Independent multi-room instances

Advanced

Run multiple independent room connections on the same page simultaneously — each with its own state, event handlers, and tile set. Useful for monitoring dashboards, sidebars, and multi-feed layouts.

const room1 = VibeLive.createInstance({ projectId: '...' }); const room2 = VibeLive.createInstance({ projectId: '...' }); await room1.signup('Alice'); await room1.enterByRoomCode('AAA1'); await room2.signup('Alice'); await room2.enterByRoomCode('BBB2');
31

Device selection

Advanced

Let users choose which camera and microphone to use from all available devices — essential for multi-camera setups, external mics, and accessibility requirements.

const devices = await VibeLive.getDevices(); // → { cameras: [...], microphones: [...], speakers: [...] } await VibeLive.setCamera(deviceId); await VibeLive.setMicrophone(deviceId);
32

React integration

Advanced

Use the SDK's event model cleanly inside React component lifecycle. Subscribe in useEffect with cleanup, use useRef for video elements instead of registerTile(), and push state into React via useState.

// useEffect event wiring with cleanup: useEffect(() => { VibeLive.on('memberStateChange', handleState); return () => VibeLive.off('memberStateChange', handleState); }, []); // Video elements — use refs, not registerTile(): const videoRef = useRef(null); useEffect(() => { VibeLive.setLocalCamera(videoRef.current); return () => VibeLive.clearLocalCamera(); }, []);
Tier 6

Platform

Capacity & session limits
34

Up to 12 members, up to 24-hour sessions

Rooms support up to 12 concurrent live members and stay active for up to 24 hours without reconnecting. Members can freely join and leave within that window.

// No configuration needed — enforced automatically per project plan.

Implement real-time video chat using VibeLive.

Two-step setup

1
Download AI Guide (REQUIRED)
2
Copy Build Prompt

Project ID: