Const// Basic two-person video chat
import { MediasfuChat } from 'mediasfu-reactnative';
function App() {
return (
<MediasfuChat
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
/>
);
}
// Chat with custom video cards and branding
import { MediasfuChat } from 'mediasfu-reactnative';
import { ChatVideoCard } from './ChatVideoCard';
function App() {
return (
<MediasfuChat
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
customVideoCard={(props) => (
<ChatVideoCard {...props} showNameAlways roundedCorners />
)}
imgSrc="https://example.com/chat-icon.png"
containerStyle={{
backgroundColor: '#f5f5f5'
}}
/>
);
}
// Chat with custom prejoin and UI overrides
import { MediasfuChat } from 'mediasfu-reactnative';
import { SimplePrejoin } from './SimplePrejoin';
import { MinimalControls } from './MinimalControls';
function App() {
return (
<MediasfuChat
PrejoinPage={SimplePrejoin}
credentials={{
apiUserName: 'your-api-username',
apiKey: 'your-api-key'
}}
uiOverrides={{
controlButtons: MinimalControls,
messagesModal: CustomChatOverlay
}}
/>
);
}
MediasfuChat component provides a simple two-person video chat experience optimized for one-on-one conversations with side-by-side video layout.
Key Features
Layout Characteristics
Event Type
Automatically sets
eventType: 'chat'for two-person video chat mode.Use Cases