Const// Basic usage with UI mode
import React from 'react';
import { PreJoinPage } from 'mediasfu-reactjs';
const BasicPreJoin = () => {
const handleAlert = (message: string) => {
alert(message);
};
return (
<PreJoinPage
credentials={{
apiUserName: 'user123',
apiKey: 'your-api-key'
}}
returnUI={true}
parameters={{
showAlert: handleAlert,
updateIsLoadingModalVisible: (visible) => console.log('Loading:', visible),
connectSocket: async ({ socket, apiUserName, apiToken }) => {
// Socket connection logic
},
updateSocket: (socket) => console.log('Socket updated'),
updateValidated: () => console.log('Validated'),
updateApiUserName: (name) => console.log('API User:', name),
updateApiToken: (token) => console.log('Token set'),
updateLink: (link) => console.log('Link:', link),
updateRoomName: (room) => console.log('Room:', room),
updateMember: (member) => console.log('Member:', member),
imgSrc: 'https://example.com/logo.png'
}}
connectMediaSFU={true}
/>
);
};
// Custom styled with branding and validation
import React, { useState } from 'react';
import { PreJoinPage } from 'mediasfu-reactjs';
const BrandedPreJoin = () => {
const [isLoading, setIsLoading] = useState(false);
return (
<PreJoinPage
credentials={{
apiUserName: 'company_user',
apiKey: 'company_api_key'
}}
returnUI={true}
parameters={{
showAlert: (message) => {
console.log('Alert:', message);
},
updateIsLoadingModalVisible: setIsLoading,
connectSocket: async (options) => {},
updateSocket: (socket) => {},
updateValidated: () => {},
updateApiUserName: (name) => {},
updateApiToken: (token) => {},
updateLink: (link) => {},
updateRoomName: (room) => {},
updateMember: (member) => {},
imgSrc: 'https://company.com/logo.svg'
}}
containerProps={{
style: {
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
minHeight: '100vh',
fontFamily: "'Inter', sans-serif"
}
}}
createButtonProps={{
style: {
backgroundColor: '#10b981',
padding: '14px 28px',
borderRadius: '8px',
fontSize: '16px',
fontWeight: '600',
border: 'none',
cursor: 'pointer',
transition: 'all 0.3s'
}
}}
joinButtonProps={{
style: {
backgroundColor: '#3b82f6',
padding: '14px 28px',
borderRadius: '8px',
fontSize: '16px',
fontWeight: '600',
border: 'none',
cursor: 'pointer'
}
}}
renderLogo={({ imgSrc }) => (
<div style={{ textAlign: 'center', marginBottom: '40px' }}>
<img src={imgSrc} alt="Company Logo" style={{ width: '200px' }} />
<h1 style={{ color: 'white', marginTop: '20px' }}>Welcome to Our Platform</h1>
</div>
)}
/>
);
};
// Analytics tracking with event monitoring
import React, { useEffect } from 'react';
import { PreJoinPage } from 'mediasfu-reactjs';
const AnalyticsPreJoin = () => {
useEffect(() => {
analytics.page('Pre-Join Page Viewed');
}, []);
return (
<PreJoinPage
credentials={{
apiUserName: 'analytics_user',
apiKey: 'analytics_key'
}}
returnUI={true}
parameters={{
showAlert: (message) => {
analytics.track('Alert Shown', { message });
alert(message);
},
updateIsLoadingModalVisible: (visible) => {
analytics.track('Loading State Changed', { visible });
},
connectSocket: async (options) => {
analytics.track('Socket Connection Initiated', {
apiUserName: options.apiUserName
});
},
updateValidated: () => {
analytics.track('Connection Validated');
},
updateRoomName: (room) => {
analytics.track('Room Entered', { roomName: room });
},
updateSocket: (socket) => {},
updateApiUserName: (name) => {},
updateApiToken: (token) => {},
updateLink: (link) => {},
updateMember: (member) => {}
}}
renderToggle={({ defaultToggle, isCreateMode, toggle }) => (
<div onClick={() => {
analytics.track('Mode Toggled', {
from: isCreateMode ? 'create' : 'join',
to: isCreateMode ? 'join' : 'create'
});
toggle();
}}>
{defaultToggle}
</div>
)}
createMediaSFURoom={async (options) => {
analytics.track('Room Creation Attempted', {
eventType: options.eventType,
duration: options.duration,
capacity: options.capacity
});
const result = await createRoomOnMediaSFU(options);
analytics.track('Room Created Successfully', {
eventType: options.eventType
});
return result;
}}
joinMediaSFURoom={async (options) => {
analytics.track('Room Join Attempted', {
eventID: options.eventID
});
const result = await joinRoomOnMediaSFU(options);
analytics.track('Room Joined Successfully');
return result;
}}
/>
);
};
// Integration with MediasfuGeneric using uiOverrides
import React, { useState } from 'react';
import { MediasfuGeneric, PreJoinPage } from 'mediasfu-reactjs';
const CustomPreJoin = (props) => (
<PreJoinPage
{...props}
renderContent={({ defaultContent, isCreateMode, error }) => (
<div className="custom-prejoin-wrapper">
<div className="welcome-banner">
<h2>🎥 {isCreateMode ? 'Start Your Meeting' : 'Join the Meeting'}</h2>
<p>Connect with your team in seconds</p>
</div>
{error && (
<div className="error-banner" style={{
backgroundColor: '#fee',
color: '#c00',
padding: '12px',
borderRadius: '6px',
marginBottom: '20px'
}}>
⚠️ {error}
</div>
)}
{defaultContent}
<div className="help-section">
<a href="/help">Need help?</a>
<span> | </span>
<a href="/privacy">Privacy Policy</a>
</div>
</div>
)}
renderCreateForm={({ defaultForm }) => (
<div className="enhanced-create-form">
<div className="form-header">
<h3>Create New Room</h3>
<p>Set up your meeting parameters</p>
</div>
{defaultForm}
<div className="form-footer">
<small>🔒 Your meeting will be secure and encrypted</small>
</div>
</div>
)}
/>
);
const App = () => {
const [credentials] = useState({
apiUserName: 'user123',
apiKey: 'your-api-key'
});
return (
<MediasfuGeneric
credentials={credentials}
uiOverrides={{
PreJoinPage: CustomPreJoin
}}
/>
);
};
PreJoinPage - A comprehensive pre-meeting entry page with dual create/join functionality.
This component provides a complete pre-meeting interface allowing users to either create new meeting rooms or join existing ones. It handles form validation, API integration, socket connections, and supports both UI and headless (no-UI) modes for flexible integration.
Key Features: