@applooma/uikit-react

Drop-in live streaming, voice room and 1-to-1 call screens for React (and plain JavaScript), built on AppLooma RTC.

npm install @applooma/uikit-react

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

// YOUR server returns { token, wsUrl } — the API secret never reaches the browser.
const 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());

const kit = { appId: 'YOUR_APP_ID', user: { id: me.id, name: me.name }, tokenProvider };

<div style={{ width: 420, height: 760 }}>
  <LiveStream {...kit} room="show-42" role="host" onLeave={() => navigate('/')} />
</div>
<VoiceRoom {...kit} room="party-7" seats={8} onLeave={…} />
<Call {...kit} room="call-abc" video onLeave={…} />

Not using React? mountLiveStream(el, options), mountVoiceRoom and mountCall take the same options and return an unmount function.

| Component | Options | |---|---| | LiveStream | role?: 'host' \| 'audience' — leave out to let the user choose | | VoiceRoom | seats?: number (2–16, default 8) | | Call | video?: boolean (default true) |

All share appId, user, tokenProvider, room, onLeave, engine?. Each screen fills its container. Put { name } in the token metadata so others see the user's name.

MIT © AppLooma LLC