mediasfu-reactnative-expo/dist/types/src/components/displayComponents/CardVideoDisplay.d.ts

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

import { EventType, MediaStream } from '../../@types/types';
export interface CardVideoDisplayOptions {
    remoteProducerId: string;
    eventType: EventType;
    forceFullDisplay: boolean;
    videoStream: MediaStream | null;
    backgroundColor?: string;
    doMirror?: boolean;
    /**
     * Optional custom style to apply to the container.
     */
    style?: object;
    /**
     * Optional function to render custom content, receiving the default content and dimensions.
     */
    renderContent?: (options: {
        defaultContent: React.ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => React.ReactNode;
    /**
     * Optional function to render a custom container, receiving the default container and dimensions.
     */
    renderContainer?: (options: {
        defaultContainer: React.ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => React.ReactNode;
}
export type CardVideoDisplayType = (options: CardVideoDisplayOptions) => React.ReactNode;
/**
 * CardVideoDisplay displays a video stream within a card layout, with support for customizable styling and mirroring.
 *
 * This component uses `RTCView` to render a video stream with options to mirror the video, set full display, and apply platform-specific styles.
 *
 * @component
 * @param {CardVideoDisplayOptions} props - Properties for the CardVideoDisplay component.
 * @param {string} props.remoteProducerId - The ID of the remote producer for identification.
 * @param {EventType} props.eventType - The type of event, e.g., meeting or webinar.
 * @param {boolean} props.forceFullDisplay - Whether to force the video to fill the container.
 * @param {MediaStream | null} props.videoStream - The video stream to display.
 * @param {string} [props.backgroundColor='transparent'] - Optional background color for the video container.
 * @param {boolean} [props.doMirror=false] - Option to mirror the video.
 *
 * @returns {JSX.Element} The CardVideoDisplay component.
 *
 * @example
 * ```tsx
 * import React from 'react';
 * import { CardVideoDisplay } from 'mediasfu-reactnative-expo';
 * import { MediaStream } from 'mediasfu-reactnative-expo/dist/types/src/@types/types';
 *
 * function App() {
 *   const videoStream: MediaStream = getVideoStream(); // Assume a MediaStream object is available
 *
 *   return (
 *     <CardVideoDisplay
 *       remoteProducerId="producer123"
 *       eventType="meeting"
 *       forceFullDisplay={true}
 *       videoStream={videoStream}
 *       backgroundColor="black"
 *       doMirror={true}
 *     />
 *   );
 * }
 *
 * export default App;
 * ```
 */
declare const CardVideoDisplay: React.FC<CardVideoDisplayOptions>;
export default CardVideoDisplay;