Function FlexibleVideo

FlexibleVideo component renders a flexible grid of video components with optional screenboard overlay and annotation support.

This component organizes video components in a grid format with customizable dimensions, and includes options to overlay a screenboard component, apply annotations, and manage aspect ratios.

Component

Example

import React from 'react';
import { FlexibleVideo } from 'mediasfu-reactjs';

function App() {
  const componentsToRender = [
    <VideoComponent1 />,
    <VideoComponent2 />,
    <VideoComponent3 />,
    <VideoComponent4 />,
    <VideoComponent5 />,
    <VideoComponent6 />,
  ];

  return (
    <FlexibleVideo
      customWidth={100}
      customHeight={100}
      rows={2}
      columns={3}
      componentsToRender={componentsToRender}
      showAspect={true}
      backgroundColor="white"
      Screenboard={<ScreenboardComponent />}
      annotateScreenStream={true}
      localStreamScreen={localStreamStream}
    />
  );
}

export default App;

Properties

propTypes? displayName?

Properties

OptionalpropTypes

propTypes?: any

Ignored by React.

Deprecated

Only kept in types for backwards compatibility. Will be removed in a future major release.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

Example


const MyComponent: FC = () => {
  return <div>Hello!</div>
}

MyComponent.displayName = 'MyAwesomeComponent'

Settings

Member Visibility

On This Page

Properties