UIKit

Three finished screens you drop into your app — live streaming, a voice room and a 1-to-1 call (voice or video) — on every platform, with the same design and the same three inputs: your App ID, the signed-in user, and a function that gets a token from your server.

Packages#

Platform	Package	Screens
React / plain JS	`@applooma/uikit-react`	`LiveStream` `VoiceRoom` `Call` · `mount…()` for non-React
React Native	`@applooma/uikit-react-native`	`LiveStream` `VoiceRoom` `Call`
Flutter	`applooma_uikit`	`AppLoomaLiveStream` `AppLoomaVoiceRoom` `AppLoomaCall`
Android (Compose)	`com.applooma:uikit-android`	`AppLoomaLiveStream` `AppLoomaVoiceRoom` `AppLoomaCall`
iOS (SwiftUI)	`AppLoomaUIKit` in the iOS package	`AppLoomaLiveStreamView` `AppLoomaVoiceRoomView` `AppLoomaCallView`

What each screen does#

Live streaming — go live or watch; host camera full screen, viewer count, comments, floating hearts, gift banners; mic, camera and flip for the host. Pass a role to skip the chooser.
Voice room — up to 16 seats (8 by default), a crown for the first speaker, green speaking rings, mute badges and room chat. Seat order is join order, agreed between devices over messages — no server state.
Call — voice: pulsing avatar and timer; video: full-screen remote picture and a draggable self-view. Mute, camera, flip, end. Both people open the same room; the second one connects the call.

The token provider#

Every screen asks your server for a token when it joins. Your server calls the AppLooma token API with your API key and secret — which never ship inside an app — and returns { token, wsUrl }. Put the user's display name in the token metadata as name; the screens show it to everyone else. See Authentication.

Roles the screens ask for

The live host asks for host, viewers for audience, voice-room speakers for cohost, and both sides of a call for host. Your server decides whether to grant them.

Usage#

App.tsx

import { LiveStream } from '@applooma/uikit-react';

const kit = {
  appId: 'YOUR_APP_ID',
  user: { id: me.id, name: me.name },
  tokenProvider: (room, role, user) =>
    fetch('/api/rtc-token', { method: 'POST', body: JSON.stringify({ room, role, identity: user.id, name: user.name }) })
      .then((r) => r.json()),
};

<div style={{ height: '100vh' }}>
  <LiveStream {...kit} room="show-42" role="host" onLeave={() => navigate('/')} />
</div>

Sample apps#

Complete apps with all four screens for Web, Flutter, React Native and Android, plus a small token server, are at github.com/AppLooma-RTC/Samples. They ship with no App ID or keys — add your own from the console.