A full-featured, framework-portable Angular LiveKit room UI. Drop <mj-livekit-room> into any Angular
app (MemberJunction or not), give it a server URL + access token, and you get a complete conferencing
surface: participant grid/spotlight/split/audio-only layouts, A/V/screen controls, data-channel chat,
device pickers, a PreJoin lobby, active-speaker rings, per-tile audio meters, an agent-state visualizer,
cloud noise-filter/background-blur toggles, recording control, and end-to-end encryption.
Built on the pure-TS @memberjunction/livekit-room-core. Themed with MJ design
tokens with fallbacks, so it looks right inside MemberJunction and still works standalone.
For the MemberJunction experience (auto-minted tokens, agent room sessions via the realtime bridge), use
@memberjunction/ng-mj-livekit-room, which wraps this component.
npm install @memberjunction/ng-livekit-room @memberjunction/livekit-room-core livekit-client
<mj-livekit-room
[ServerUrl]="'wss://livekit.myorg.com'"
[Token]="accessToken"
[DisplayName]="'Amith'"
[Layout]="'spotlight'"
[ShowChat]="true"
[ShowAgentState]="true"
[EnableNoiseFilter]="true"
(Connected)="onConnected($event)"
(BeforeDisconnect)="confirmLeave($event)"
></mj-livekit-room>
All components are standalone — import the ones you need.
@InputCompose exactly the experience you want — a voice-only widget, a full conferencing surface, an embedded co-agent panel — without forking the component. Public members are PascalCase (MJ convention).
| Area | Inputs |
|---|---|
| Connection | ServerUrl, Token, DisplayName, AutoConnect, StartWithMicrophone, StartWithCamera |
| Layout | Layout (grid / spotlight / split / audio-only), EnableLayoutSwitcher, EnablePinning |
| Chrome | ShowHeader, Title, ShowParticipantCount, ShowSelfView, ShowConnectionOverlay |
| Tiles | ShowAudioMeters, ShowActiveSpeakerHighlight, ShowConnectionQuality, ShowNameBadges, AgentAvatarUrl |
| Controls | ShowControlBar, EnableMicrophoneControl, EnableCameraControl, EnableScreenShareControl, EnableDeviceSettings, EnableLeaveControl, ShowRecordingControl |
| Panels | ShowChat, ShowParticipantsPanel, ChatOpenByDefault |
| PreJoin | ShowPreJoin |
| Agent | ShowAgentState |
| Whiteboard | ShowWhiteboard — collaborative board (reuses @memberjunction/ng-whiteboard), synced over the data channel; agents co-author via the same topic |
| Cloud / security | EnableNoiseFilter, EnableBackgroundEffects, E2EEPassphrase + E2EEWorker |
The core's cancelable events surface as @Output()s. Before-events are emitted synchronously, so a
handler can set $event.Cancel = true to veto (or mutate the payload):
<mj-livekit-room
(BeforeDisconnect)="$event.Cancel = !confirm('Leave?')"
(BeforeSendData)="$event.Text = sanitize($event.Text)"
(Connected)="..." (Disconnected)="..." (ParticipantJoined)="..." (DataReceived)="..." (ErrorOccurred)="..."
></mj-livekit-room>
Cancelable: BeforeConnect, BeforeDisconnect, BeforeMediaToggle, BeforeSendData, BeforeDeviceSwitch.
Notifications: Connected, Disconnected, Reconnecting, Reconnected, ParticipantJoined,
ParticipantLeft, ActiveSpeakersChanged, DataReceived, LocalMediaChanged, StateChanged,
ChatMessage, ToggleRecording, LayoutChange, ErrorOccurred.
grid) — equal tiles, responsive.spotlight) — one large tile (active speaker / pinned / agent) + a filmstrip.split) — a draggable splitter between the active screen-share and the speaker.A built-in layout switcher (gated by EnableLayoutSwitcher) lets users change live.
LiveKitRoomComponent, LiveKitParticipantTileComponent, LiveKitControlBarComponent,
LiveKitChatPanelComponent, LiveKitDeviceMenuComponent, LiveKitParticipantsPanelComponent,
LiveKitConnectionOverlayComponent, LiveKitAudioMeterComponent, LiveKitPreJoinComponent,
LiveKitAgentStateComponent, LiveKitWhiteboardSurfaceComponent.
ISC © MemberJunction.com