Virtual Rooms for Video Conferencing on Website

Virtual Rooms Development for Video Conferencing

Virtual rooms are permanent spaces with unique URLs where participants can join and leave anytime, like physical conference rooms. Unlike regular calls, rooms exist permanently, not tied to specific events, storing settings and history.

Data Model

CREATE TABLE virtual_rooms (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  slug VARCHAR(100) UNIQUE NOT NULL,   -- /room/team-standup
  name VARCHAR(255) NOT NULL,
  owner_id UUID REFERENCES users(id),
  organization_id UUID,
  access_type VARCHAR(50) DEFAULT 'invite_only',
  -- 'public' | 'organization' | 'invite_only'
  password_hash TEXT,
  max_participants INTEGER DEFAULT 20,
  enable_waiting_room BOOLEAN DEFAULT false,
  enable_recording BOOLEAN DEFAULT false,
  lobby_message TEXT,
  last_active_at TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT now()
);

CREATE TABLE room_members (
  room_id UUID REFERENCES virtual_rooms(id),
  user_id UUID REFERENCES users(id),
  role VARCHAR(50) DEFAULT 'member',  -- 'host' | 'moderator' | 'member'
  can_always_join BOOLEAN DEFAULT true,
  PRIMARY KEY (room_id, user_id)
);

Permanent Room in LiveKit

async function getOrCreateVirtualRoom(slug: string): Promise<string> {
  const roomName = `virtual-${slug}`;

  try {
    await svc.getRoom(roomName);
    return roomName;
  } catch {
    // Create with long timeout
    await svc.createRoom({
      name: roomName,
      emptyTimeout: 24 * 60 * 60,  // 24 hours
      maxParticipants: 50,
    });
    return roomName;
  }
}

Lobby with Approval Waiting

const lobbyParticipants = new Map<string, {
  userId: string;
  displayName: string;
  roomSlug: string;
  resolve: (allowed: boolean) => void;
}>();

app.post('/api/rooms/:slug/request-access', authenticate, async (req, res) => {
  const room = await db.virtualRooms.findBySlug(req.params.slug);
  if (!room) return res.status(404).end();

  const isMember = await db.roomMembers.isMember(room.id, req.user.id);

  if (!room.enable_waiting_room || isMember) {
    const token = generateRoomToken(req.params.slug, req.user);
    return res.json({ status: 'admitted', token });
  }

  const permission = await new Promise<boolean>((resolve) => {
    lobbyParticipants.set(req.user.id, {
      userId: req.user.id,
      displayName: req.user.name,
      roomSlug: req.params.slug,
      resolve,
    });

    io.to(`room-host-${room.id}`).emit('lobby_request', {
      userId: req.user.id,
      displayName: req.user.name,
    });

    setTimeout(() => resolve(false), 120_000);
  });

  if (permission) {
    const token = generateRoomToken(req.params.slug, req.user);
    res.json({ status: 'admitted', token });
  } else {
    res.json({ status: 'denied' });
  }
});

// Host approves/rejects
app.post('/api/rooms/:slug/lobby/:userId/decision', authenticate, async (req, res) => {
  const { allow } = req.body;
  const entry = lobbyParticipants.get(req.params.userId);
  if (!entry) return res.status(404).end();

  entry.resolve(allow);
  lobbyParticipants.delete(req.params.userId);
  res.json({ ok: true });
});

React Virtual Room Component

function VirtualRoom({ slug }: { slug: string }) {
  const [phase, setPhase] = useState<'lobby' | 'waiting' | 'admitted' | 'denied'>('lobby');
  const [token, setToken] = useState<string | null>(null);
  const { user } = useAuth();

  const requestAccess = async () => {
    setPhase('waiting');

    const { status, token: t } = await fetch(
      `/api/rooms/${slug}/request-access`,
      { method: 'POST' }
    ).then(r => r.json());

    if (status === 'admitted') {
      setToken(t);
      setPhase('admitted');
    } else {
      setPhase('denied');
    }
  };

  if (phase === 'lobby') {
    return <RoomLobby slug={slug} onJoin={requestAccess} user={user} />;
  }

  if (phase === 'waiting') {
    return (
      <div className="text-center py-20">
        <div className="animate-pulse text-4xl mb-4">⌛</div>
        <p className="text-lg text-gray-700">Waiting for host approval...</p>
      </div>
    );
  }

  if (phase === 'denied') {
    return <p className="text-center text-red-600 py-20">Access denied.</p>;
  }

  return (
    <LiveKitRoom token={token!} serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL} video audio>
      <ConferenceLayout roomSlug={slug} />
    </LiveKitRoom>
  );
}

Timeline

Virtual rooms with permanent URL, lobby, participant management—1–1.5 weeks.