MediaSFU ReactJS
    Preparing search index...

    Variable MediasfuGenericConst

    MediasfuGeneric: React.FC<MediasfuGenericOptions> = ...

    MediasfuGeneric component provides and combines the generic functionalities for MediaSFU. It supports webinar, broadcast, chat, conference views with full UI override capabilities. Participants can share media (audio, video, screen share) with each other, engage in polls, breakout rooms, chat, and more—all while maintaining the ability to customize every UI surface through component overrides, function wrapping, and custom participant cards.

    Component properties.

    • React functional component.

    // Basic usage with MediaSFU Cloud

    <MediasfuGeneric
      credentials={{ apiUserName: "user", apiKey: "key" }}
    />

    // Custom cards and UI overrides

    const videoCard: CustomVideoCardType = (props) => (
      <VideoCard {...props} customStyle={{ borderRadius: 20, border: "3px solid purple" }} />
    );

    const uiOverrides = useMemo<MediasfuUICustomOverrides>(() => ({
      mainContainer: {
        render: (props) => <div style={{ border: "4px dashed purple" }}><MainContainerComponent {...props} /></div>,
      },
      consumerResume: {
        wrap: (original) => async (params) => {
          analytics.track("consumer_resume");
          return await original(params);
        },
      },
    }), []);

    <MediasfuGeneric
      credentials={{ apiUserName: "user", apiKey: "key" }}
      customVideoCard={videoCard}
      uiOverrides={uiOverrides}
      containerStyle={{ background: "#0f172a", borderRadius: 32 }}
    />

    // Headless mode with custom component

    const CustomWorkspace: CustomComponentType = ({ parameters }) => (
      <div>
        <h1>Room: {parameters.roomName}</h1>
        <button onClick={() => parameters.showAlert?.({ message: "Hello!", type: "success" })}>
          Trigger Alert
        </button>
      </div>
    );

    <MediasfuGeneric
      PrejoinPage={CustomPrejoinPage}
      localLink="https://localhost:3000"
      connectMediaSFU={true}
      credentials={{ apiUserName: "user", apiKey: "key" }}
      useLocalUIMode={true}
      seedData={customSeedData}
      useSeed={true}
      imgSrc="https://example.com/logo.png"
      sourceParameters={{ key: value }}
      updateSourceParameters={updateSourceParameters}
      returnUI={true}
      noUIPreJoinOptions={customPreJoinOptions}
      joinMediaSFURoom={joinRoomOnMediaSFU}
      createMediaSFURoom={createRoomOnMediaSFU}
    />

    This component handles the generic functionalities for MediaSFU, including joining rooms, managing participants, and handling media streams. It uses various hooks and methods to manage state and perform actions such as joining a room, updating initial values, and handling media streams.

    Settings

    Member Visibility