mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
327 lines (326 loc) • 10.7 kB
TypeScript
import React from "react";
import { Socket } from "socket.io-client";
import { ConnectSocketType, ShowAlert, ConnectLocalSocketType, RecordingParams, MeetingRoomParams, CreateMediaSFURoomOptions, JoinMediaSFURoomOptions } from "../../@types/types";
import { CreateRoomOnMediaSFUType, JoinRoomOnMediaSFUType } from "../../methods/utils/joinRoomOnMediaSFU";
/**
* Interface defining the parameters for joining a local event room.
*/
export interface JoinLocalEventRoomParameters {
eventID: string;
userName: string;
secureCode?: string;
videoPreference?: string | null;
audioPreference?: string | null;
audioOutputPreference?: string | null;
}
/**
* Interface defining the options for joining a local event room.
*/
export interface JoinLocalEventRoomOptions {
joinData: JoinLocalEventRoomParameters;
link?: string;
}
/**
* Interface defining the response structure when creating or joining a local room.
*/
export interface CreateLocalRoomParameters {
eventID: string;
duration: number;
capacity: number;
userName: string;
scheduledDate: Date;
secureCode: string;
waitRoom?: boolean;
recordingParams?: RecordingParams;
eventRoomParams?: MeetingRoomParams;
videoPreference?: string | null;
audioPreference?: string | null;
audioOutputPreference?: string | null;
mediasfuURL?: string;
}
/**
* Interface defining the response structure when joining a local room.
*/
export interface CreateLocalRoomOptions {
createData: CreateLocalRoomParameters;
link?: string;
}
/**
* Interface defining the response structure when creating or joining a local room.
*/
export interface CreateJoinLocalRoomResponse {
success: boolean;
secret: string;
reason?: string;
url?: string;
}
/**
* Configuration parameters for PreJoinPage component.
*
* @interface PreJoinPageParameters
*
* **Branding:**
* @property {string} [imgSrc='https://mediasfu.com/images/logo192.png'] - Logo image URL
*
* **Connection Management:**
* @property {ConnectSocketType} connectSocket - Function to establish MediaSFU Socket.io connection
* @property {ConnectLocalSocketType} [connectLocalSocket] - Function to establish local server Socket.io connection (Community Edition)
* @property {(socket: Socket) => void} updateSocket - Updates MediaSFU socket instance
* @property {(socket: Socket) => void} [updateLocalSocket] - Updates local socket instance
*
* **State Updates:**
* @property {(visible: boolean) => void} updateIsLoadingModalVisible - Controls loading modal visibility
* @property {(validated: boolean) => void} updateValidated - Updates validation state after successful connection
* @property {(apiUserName: string) => void} updateApiUserName - Updates API username
* @property {(apiToken: string) => void} updateApiToken - Updates API token
* @property {(link: string) => void} updateLink - Updates event link
* @property {(roomName: string) => void} updateRoomName - Updates room name
* @property {(member: string) => void} updateMember - Updates participant name
*
* **User Feedback:**
* @property {ShowAlert} [showAlert] - Alert display function for validation errors
*/
export interface PreJoinPageParameters {
/**
* Source URL for the logo image.
* Defaults to 'https://mediasfu.com/images/logo192.png' if not provided.
*/
imgSrc?: string;
/**
* Function to display alert messages.
*/
showAlert?: ShowAlert;
/**
* Function to toggle the visibility of the loading modal.
*/
updateIsLoadingModalVisible: (visible: boolean) => void;
/**
* Function to establish a socket connection.
*/
connectSocket: ConnectSocketType;
/**
* Function to establish a socket connection to a local server.
*/
connectLocalSocket?: ConnectLocalSocketType;
/**
* Function to update the socket instance in the parent state.
*/
updateSocket: (socket: Socket) => void;
/**
* Function to update the socket instance in the parent state.
*/
updateLocalSocket?: (socket: Socket) => void;
/**
* Function to update the validation state in the parent.
*/
updateValidated: (validated: boolean) => void;
/**
* Function to update the API username in the parent state.
*/
updateApiUserName: (apiUserName: string) => void;
/**
* Function to update the API token in the parent state.
*/
updateApiToken: (apiToken: string) => void;
/**
* Function to update the event link in the parent state.
*/
updateLink: (link: string) => void;
/**
* Function to update the room name in the parent state.
*/
updateRoomName: (roomName: string) => void;
/**
* Function to update the member name in the parent state.
*/
updateMember: (member: string) => void;
}
/**
* Interface defining the credentials.
*/
export interface Credentials {
apiUserName: string;
apiKey: string;
}
/**
* Configuration options for the PreJoinPage component.
*
* @interface PreJoinPageOptions
*
* **Server Configuration:**
* @property {string} [localLink] - Local server URL for Community Edition deployment
* @property {boolean} [connectMediaSFU=true] - Whether to allow connection to MediaSFU cloud servers
*
* **Authentication:**
* @property {Credentials} [credentials] - User API credentials (apiUserName, apiKey) for MediaSFU
*
* **State Parameters:**
* @property {PreJoinPageParameters} parameters - Pre-join page configuration and state handlers
*
* **Programmatic Mode (No UI):**
* @property {boolean} [returnUI=false] - Whether to render UI (false = headless mode)
* @property {CreateMediaSFURoomOptions | JoinMediaSFURoomOptions} [noUIPreJoinOptions] - Options for headless room creation/join
* @property {CreateRoomOnMediaSFUType} [createMediaSFURoom] - Custom room creation function
* @property {JoinRoomOnMediaSFUType} [joinMediaSFURoom] - Custom room join function
*/
export interface PreJoinPageOptions {
/**
* link to the local server (Community Edition)
*/
localLink?: string;
/**
* Determines if the user is allowed to connect to the MediaSFU server.
*/
connectMediaSFU?: boolean;
/**
* Parameters required by the PreJoinPage component.
*/
parameters: PreJoinPageParameters;
/**
* Optional user credentials. Defaults to predefined credentials if not provided.
*/
credentials?: Credentials;
/**
* Flag to determine if the component should return the UI.
*/
returnUI?: boolean;
/**
* Options for creating/joining a room without UI.
*/
noUIPreJoinOptions?: CreateMediaSFURoomOptions | JoinMediaSFURoomOptions;
/**
* When true, automatically runs the pre-join flow even if the room UI should render after validation.
*/
autoProceedPreJoin?: boolean;
/**
* Function to create a room on MediaSFU.
*/
createMediaSFURoom?: CreateRoomOnMediaSFUType;
/**
* Function to join a room on MediaSFU.
*/
joinMediaSFURoom?: JoinRoomOnMediaSFUType;
}
export type PreJoinPageType = (options: PreJoinPageOptions) => JSX.Element;
/**
* 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.
*
* @component
* @param {PreJoinPageOptions} props - Configuration options
*
* @returns {JSX.Element} Rendered pre-join page or null (headless mode)
*
* @example
* ```tsx
* // 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}
* />
* );
* }
* ```
*
* @example
* ```tsx
* // 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}
* />
* );
* ```
*
* @example
* ```tsx
* // Community Edition (local server)
* return (
* <PreJoinPage
* parameters={parameters}
* localLink="http://localhost:3000"
* connectMediaSFU={false}
* />
* );
*
*
* export default App;
* ```
*/
declare const PreJoinPage: React.FC<PreJoinPageOptions>;
export default PreJoinPage;