VideoCard component displays a video with optional control buttons, participant information, and an animated waveform.
import React from 'react';import { VideoCard } from 'mediasfu-reactjs';function App() { return ( <VideoCard customStyle={{ border: '1px solid black' }} name="John Doe" barColor="blue" textColor="yellow" remoteProducerId="12345" eventType="video" forceFullDisplay={true} videoStream={mediaStream} showControls={true} showInfo={true} controlsPosition="topLeft" infoPosition="topRight" participant={participant} backgroundColor="black" audioDecibels={audioDecibels} doMirror={true} parameters={parameters} /> );}export default App; Copy
import React from 'react';import { VideoCard } from 'mediasfu-reactjs';function App() { return ( <VideoCard customStyle={{ border: '1px solid black' }} name="John Doe" barColor="blue" textColor="yellow" remoteProducerId="12345" eventType="video" forceFullDisplay={true} videoStream={mediaStream} showControls={true} showInfo={true} controlsPosition="topLeft" infoPosition="topRight" participant={participant} backgroundColor="black" audioDecibels={audioDecibels} doMirror={true} parameters={parameters} /> );}export default App;
The properties for the VideoCard component.
The rendered VideoCard component.
Optional
Ignored by React.
Only kept in types for backwards compatibility. Will be removed in a future major release.
Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.
Legacy React Docs
const MyComponent: FC = () => { return <div>Hello!</div>}MyComponent.displayName = 'MyAwesomeComponent' Copy
const MyComponent: FC = () => { return <div>Hello!</div>}MyComponent.displayName = 'MyAwesomeComponent'
VideoCard component displays a video with optional control buttons, participant information, and an animated waveform.
Component
Example