Const// Basic live broadcast
import { MediasfuBroadcast } from 'mediasfu-reactnative';
function App() {
return (
<MediasfuBroadcast
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
/>
);
}
// Branded broadcast with custom host card
import { MediasfuBroadcast } from 'mediasfu-reactnative';
import { BroadcastHostCard } from './BroadcastHostCard';
function App() {
return (
<MediasfuBroadcast
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
customVideoCard={(props) => (
<BroadcastHostCard {...props} showViewerCount showLiveIndicator />
)}
imgSrc="https://example.com/broadcast-logo.png"
containerStyle={{
backgroundColor: '#000'
}}
/>
);
}
// Broadcast with custom controls and chat overlay
import { MediasfuBroadcast } from 'mediasfu-reactnative';
import { BroadcastControls } from './BroadcastControls';
import { ChatOverlay } from './ChatOverlay';
function App() {
return (
<MediasfuBroadcast
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
uiOverrides={{
controlButtons: BroadcastControls,
messagesModal: ChatOverlay
}}
/>
);
}
MediasfuBroadcast component provides a one-to-many streaming solution where only the host can broadcast audio/video to a large audience. Ideal for live streams, announcements, and one-way presentations.
Key Features
Layout Characteristics
Event Type
Automatically sets
eventType: 'broadcast'for one-to-many streaming mode.Use Cases