@mufconnect/webinar

@mufconnect/webinar

Drop-in WebRTC webinar SDK for the web. Powers the host / co-host / audio-guest / viewer flows for multi-party live events on top of MUF.

Built for webinar-shaped products: a small panel of hosts + co-hosts publishing video & audio, optional audio-only guests, and viewers who watch — with chat, recording, screen share, and adaptive quality bundled.

Status: 0.1.0-alpha.0 — initial split-out from the shared multi-host runtime. Public API is stable but the broadcaster cap + audio-guest tier ship in subsequent alpha drops. Pin a specific version in production.

Install

npm install @mufconnect/webinar

No peer dependencies — runs in any modern browser with WebSocket + RTCPeerConnection.

Quickstart — host

import { MufWebinarManager, WebinarEvent } from '@mufconnect/webinar';

const manager = new MufWebinarManager({
    orgId:       'your-org-id',
    orgKey:      'your-org-key',
    displayName: 'Saad',
});

manager.on(WebinarEvent.LOCAL_STREAM, ({ stream }) => {
    document.getElementById('local-video').srcObject = stream;
});

manager.on(WebinarEvent.VIEWER_COUNT, ({ count }) => {
    document.getElementById('viewer-count').textContent = String(count);
});

manager.on(WebinarEvent.SHARE_LINK, ({ url }) => {
    console.log('Share this with viewers:', url);
});

await manager.startBroadcast({
    title:    'Q3 product launch',
    category: 'business',
});

Quickstart — viewer

import { MufWebinarManager, WebinarEvent } from '@mufconnect/webinar';

const manager = new MufWebinarManager({
    orgId:       'your-org-id',
    orgKey:      'your-org-key',
    displayName: 'Audience Member',  // shown in chat
});

manager.on(WebinarEvent.REMOTE_STREAM, ({ peerId, kind, stream }) => {
    if (kind === 'video') {
        const tile = createTileFor(peerId);
        tile.querySelector('video').srcObject = stream;
    }
});

await manager.joinAsViewer(roomId, {
    displayName: 'Audience Member',
    hostPeerId,    // anchors which host's audience scope to join
});

Quickstart — co-host (panelist)

import { MufWebinarManager } from '@mufconnect/webinar';

const manager = new MufWebinarManager({ orgId, orgKey, displayName: 'Panelist 2' });
await manager.joinAsCoBroadcaster(coHostInviteToken, {
    displayName: 'Panelist 2',
});
// Now publishing video + audio on the same stage as the host.

What's in the SDK

• Host + up to 8 co-hosts, all publishing video + audio.
• Audio-only guest tier — promoted attendees can speak without publishing video (Q&A flow).
• Receive-only viewers — watch + chat + react, no upstream media.
• Server-side recording — host-initiated, presigned URLs.
• In-call chat with typing indicators and host moderation (mute / block).
• Adaptive video quality — auto / low / medium / high, bandwidth driven.
• Cohost invitations with signed tokens + 30-second accept/reject.
• Slot system for custom UI widgets in the prebuilt pages — see SLOT_CONTRACT.md.

Slot system

The prebuilt pages (broadcaster.html, viewer.html) include named DOM mount points where you plug in your own widgets. The slot names are part of the public API and won't be renamed without a major-version bump.

Three layers depending on your stack:

// Layer 1 — static config (simplest)
manager.fillSlot('header.actionPill', '<button>+ Follow</button>');
manager.fillSlot('actionBar.bottomRight', myCustomElement);

// Layer 2 — events + reactive components
manager.on('SLOT_RENDER', ({ name, mount, ctx }) => {
    if (name === 'header.actionPill') {
        ReactDOM.render(<FollowBtn ctx={ctx} />, mount);
    }
});

// Layer 3 — imperative escape hatch
const node = manager.getSlotMount('header.actionPill');
if (node) node.appendChild(myCustomElement);

See SLOT_CONTRACT.md for the full slot taxonomy.

Standalone deployment (no MUF App API backend)

If you have your own user database / billing / auth, you can deploy just the real-time services and mint your own JWTs:

import jwt from 'jsonwebtoken';

const token = jwt.sign({
    room_id:      roomId,
    role:         'host',
    room_type:    'webinar',
    display_name: 'Saad',
    host_peer_id: hostPeerId,
    exp:          Math.floor(Date.now() / 1000) + 86400,
}, process.env.JWT_SECRET);

See STANDALONE_DEPLOYMENT.md for the full guide.

Docs

• Quickstart: docs.mufconnect.com
• Product page: mufconnect.com/webinar-sdk
• Repository: github.com/MufConnect/muf-engine

License

Proprietary. 2026 MUF. All rights reserved.