Function PreJoinPage

PreJoinPage - Room creation/join interface with media preview

PreJoinPage is a React Native component that provides the entry point for creating new meeting rooms or joining existing ones. It offers two modes:

1. UI Mode: Full interface with room configuration options
2. Headless Mode: Programmatic room creation/join without UI

Key Features:

• Create new rooms with custom settings (duration, capacity, event type)
• Join existing rooms by event ID
• Media device preview (camera/microphone)
• Recording configuration options
• Waiting room and secure code settings
• Local (Community Edition) and cloud (MediaSFU) server support
• Headless/programmatic mode for automated workflows
• Input validation and error feedback
• Persistent storage of preferences

Room Configuration Options:

• Event type (chat, broadcast, webinar, conference)
• Duration (up to 24 hours)
• Participant capacity
• Recording parameters (videoParticipants, videoOptions, etc.)
• Waiting room enable/disable
• Secure access codes

UI Customization: The PreJoinPage layout and styling are fixed but can be customized by creating a custom pre-join component and using it instead of this default one.

// Basic usage with UI
import React, { useState } from 'react';
import { PreJoinPage } from 'mediasfu-reactnative-expo';
import { connectSocket } from './sockets/SocketManager';

function App() {
  const [socket, setSocket] = useState(null);
  const [validated, setValidated] = useState(false);

  const parameters = {
    imgSrc: 'https://example.com/logo.png',
    showAlert: ({ message, type }) => alert(message),
    updateIsLoadingModalVisible: setLoading,
    connectSocket: connectSocket,
    updateSocket: setSocket,
    updateValidated: setValidated,
    updateApiUserName: setApiUserName,
    updateApiToken: setApiToken,
    updateLink: setLink,
    updateRoomName: setRoomName,
    updateMember: setMember,
  };

  const credentials = {
    apiUserName: 'your-api-username',
    apiKey: 'your-api-key',
  };

  if (validated) {
    return <MeetingRoom socket={socket} />;
  }

  return (
    <PreJoinPage
      parameters={parameters}
      credentials={credentials}
      connectMediaSFU={true}
    />
  );
}
Copy

// Headless mode - programmatic room creation
const headlessOptions = {
  action: 'create',
  capacity: 50,
  duration: 60, // minutes
  eventType: 'webinar',
  userName: 'Host Name',
  recordingParams: {
    recordingVideoParticipantsFullRoomSupport: true,
    recordingAllParticipantsSupport: false,
  },
};

return (
  <PreJoinPage
    parameters={parameters}
    credentials={credentials}
    returnUI={false}
    noUIPreJoinOptions={headlessOptions}
  />
);
Copy

// Community Edition (local server)
return (
  <PreJoinPage
    parameters={parameters}
    localLink="http://localhost:3000"
    connectMediaSFU={false}
  />
);


export default App;
Copy