UNPKG

mediasfu-reactnative

Version:
53 lines (52 loc) 2.07 kB
import { EventType, MediaStream } from '../../@types/types'; export interface CardVideoDisplayOptions { remoteProducerId: string; eventType: EventType; forceFullDisplay: boolean; videoStream: MediaStream | null; backgroundColor?: string; doMirror?: boolean; } 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'; * import { MediaStream } from 'mediasfu-reactnative/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;