mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
80 lines • 3.31 kB
JavaScript
import { View, StyleSheet, Platform } from 'react-native';
import { RTCView, } from '../../methods/utils/webrtc/webrtc';
/**
* 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;
* ```
*/
const CardVideoDisplay = ({ forceFullDisplay, videoStream, backgroundColor = 'transparent', doMirror = false, }) => {
/**
* getRTCViewStyle - Helper function to get styles for RTCView based on platform.
* @returns {Object} - Styles for RTCView.
*/
const getRTCViewStyle = () => {
// Add styles based on the forceFullDisplay value
if (Platform.OS === 'web') {
const baseStyles = {
width: forceFullDisplay ? '100%' : 'auto',
height: '100%',
objectFit: forceFullDisplay ? 'cover' : 'contain',
backgroundColor,
};
if (doMirror) {
baseStyles.transform = 'rotateY(180deg)';
}
return baseStyles;
}
// For non-web platforms, no additional styles needed
return {};
};
return (<View style={[styles.videoContainer, { backgroundColor }]}>
{/* Conditionally render RTCView based on the platform */}
{Platform.OS === 'web' ? (<RTCView stream={videoStream} style={getRTCViewStyle()}/>) : (<RTCView streamURL={videoStream === null || videoStream === void 0 ? void 0 : videoStream.toURL()} objectFit={forceFullDisplay ? 'cover' : 'contain'} mirror={doMirror} style={styles.video}/>)}
</View>);
};
const styles = StyleSheet.create({
videoContainer: {
flex: 1,
backgroundColor: 'black', // Set a default background color if needed
},
video: {
height: '100%',
},
});
export default CardVideoDisplay;
//# sourceMappingURL=CardVideoDisplay.js.map