Const// Basic webinar with MediaSFU Cloud
import { MediasfuWebinar } from 'mediasfu-reactnative';
function App() {
return (
<MediasfuWebinar
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
/>
);
}
// Webinar with custom branding and prejoin
import { MediasfuWebinar } from 'mediasfu-reactnative';
import { BrandedPrejoin } from './BrandedPrejoin';
function App() {
return (
<MediasfuWebinar
PrejoinPage={BrandedPrejoin}
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
imgSrc="https://example.com/webinar-logo.png"
containerStyle={{
backgroundColor: '#0a0a0a'
}}
/>
);
}
// Webinar with custom presenter card and controls
import { MediasfuWebinar } from 'mediasfu-reactnative';
import { PresenterVideoCard } from './PresenterVideoCard';
import { WebinarControls } from './WebinarControls';
function App() {
return (
<MediasfuWebinar
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
customVideoCard={(props) => (
<PresenterVideoCard {...props} showNameTag showQualityBadge />
)}
uiOverrides={{
controlButtons: WebinarControls,
mainScreen: CustomMainScreen
}}
/>
);
}
MediasfuWebinar component provides a presenter-focused layout optimized for webinars and large audience events with a prominent host/presenter view and compact participant sidebar.
Key Features
Layout Characteristics
Event Type
Automatically sets
eventType: 'webinar'for presenter-focused mode.