Const// Basic MediaSFU Cloud connection
import { MediasfuGeneric } from 'mediasfu-reactnative';
function App() {
return (
<MediasfuGeneric
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
/>
);
}
// Community Edition with custom video cards
import { MediasfuGeneric } from 'mediasfu-reactnative';
import { CustomVideoCard } from './CustomVideoCard';
function App() {
return (
<MediasfuGeneric
localLink="http://localhost:3000"
connectMediaSFU={false}
customVideoCard={(props) => (
<CustomVideoCard {...props} borderColor="#00ff00" />
)}
/>
);
}
// Testing with seed data and UI overrides
import { MediasfuGeneric } from 'mediasfu-reactnative';
import { CustomMainGrid } from './CustomMainGrid';
function App() {
const seedData = {
member: 'John Doe',
host: 'Jane Smith',
eventType: 'conference',
participants: [
{ name: 'Jane Smith', audioID: 'audio1', videoID: 'video1' },
{ name: 'John Doe', audioID: 'audio2', videoID: '' }
]
};
return (
<MediasfuGeneric
useSeed
seedData={seedData}
useLocalUIMode
uiOverrides={{
mainGrid: CustomMainGrid
}}
containerStyle={{ backgroundColor: '#1a1a1a' }}
/>
);
}
MediasfuGeneric component provides a flexible foundation for building real-time media collaboration experiences. It supports audio/video conferencing, screen sharing, chat, polls, breakout rooms, and recording capabilities with full WebRTC/Mediasoup integration.
Key Features
Connection Modes
connectMediaSFU: truewith credentialslocalLinkpointing to self-hosted serveruseLocalUIMode: truefor offline testingCustomization Options
customVideoCard: Custom render function for video participantscustomAudioCard: Custom render function for audio-only participantscustomMiniCard: Custom render function for minimized cardsuiOverrides: Replace entire UI components (modals, grids, controls)PrejoinPage: Custom prejoin/welcome screen