Storm Player – React Component

Official React wrapper for Storm Player UI and Storm Player Core.

The React component is a thin, transparent wrapper around the underlying Storm Player APIs. It intentionally exposes low-level configuration objects to provide full control and feature parity with the core Storm Player ecosystem.

Installation

NPM

npm install @stormstreaming/player-react

Yarn

yarn add @stormstreaming/player-react

Basic Usage

import React from "react";
import { StormStreamConfig } from "@stormstreaming/player-ui";
import StormPlayer from "@stormstreaming/player-react";

const streamConfig: StormStreamConfig = {
  stream: {
    serverList: [
      {
        host: "localhost",
        application: "live",
        port: 8080,
        ssl: false,
      },
    ],
    streamKey: "test",
  },
  settings: {
    autoStart: false,
    debug: {
      console: {
        enabled: true,
      },
    },
  },
};

const playerConfig = {
  aspectRatio: "16:9",
  width: "100%",
  title: "Your streaming title",
  subtitle: "Subtitle for your video",
};

export default function App() {
  return (
    <StormPlayer
      playerConfig={playerConfig}
      streamConfig={streamConfig}
    />
  );
}

Component Props

<StormPlayer
  playerConfig={StormPlayerConfig}
  streamConfig={StormStreamConfig}
/>

playerConfig

Controls player layout and appearance.

Common fields:

• width, height
• aspectRatio
• title, subtitle
• style (inline styles)

containerID is managed internally by the React component and must not be set manually.

streamConfig

Controls stream connection and playback behavior.

Key fields:

• stream.serverList – list of Storm servers (with automatic failover)
• stream.streamKey – stream identifier
• settings.autoStart – start playback automatically
• settings.debug.console.enabled – enable debug logs

Server-Side Rendering (SSR)

Storm Player uses browser APIs such as window and HTMLVideoElement.

When using SSR frameworks (e.g. Next.js), disable SSR:

import dynamic from "next/dynamic";

const StormPlayer = dynamic(
  () => import("@stormstreaming/player-react"),
  { ssr: false }
);

Runtime Updates

Both configuration objects are reactive.

• Updating playerConfig updates the UI
• Updating streamConfig updates the stream connection

No re-mounting is required.

Accessing Player Instance

The component supports ref forwarding:

const playerRef = useRef(null);

<StormPlayer
  ref={playerRef}
  playerConfig={playerConfig}
  streamConfig={streamConfig}
/>;

This gives access to the full Storm Player API:

playerRef.current?.play();
playerRef.current?.pause();
playerRef.current?.getLibrary();

Browser Compatibility

• Edge 12+
• Chrome 31+
• Firefox 42+
• Safari 13+
• Opera 15+

Legacy browsers fall back to HLS mode.

Ecosystem

• Core playback engine: @stormstreaming/player-core
• UI player: @stormstreaming/player-ui
• React wrapper: @stormstreaming/player-react

License

See LICENSE.txt.