React Implementation - Storm JavaScript Player

Requirements

• Node: 15.4.0+
• React: 17.0.2+
• @stormstreaming/player-react: 1.x

Installation

NPM

bash

Copy

npm install @stormstreaming/player-react

Yarn

bash

Copy

yarn add @stormstreaming/player-react

Sample Code

App.tsx

tsx

Copy

import {
    useEffect,
    useRef
} from "react";

import {
    StormPlayer,
    StormPlayerConfig,
    StormStreamConfig,
    StormPlayerEvent,
    StormPlayerClass,
} from "@stormstreaming/stormplayer-react";

const playerConfig: StormPlayerConfig = {
    width: "100%",
    aspectRatio: "16:9",
    title: "Your first live stream",
    subtitle: "This is going to be epic!"
};

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

const App = () => {
    const playerRef = useRef<StormPlayerClass>(null);

    useEffect(() => {
        // Sample callback for event listener
        const onPlaybackProgress = (event: StormPlayerEvent["playbackProgress"]) => {
            console.log(`Player ID: ${event.ref.getInstanceID()} - Playback Progress Update`);
            console.log(`-->: streamStartTime (source): ${event.streamStartTime}`);
            console.log(`-->: streamDuration (source): ${event.streamDuration}`);
            console.log(`-->: playbackStartTime (this stream): ${event.playbackStartTime}`);
            console.log(`-->: playbackDuration (this stream): ${event.playbackDuration}`);
        };

        if (playerRef.current) {
            // Register event listener
            playerRef.current.addEventListener("playbackProgress", onPlaybackProgress);

            // Initialize player (all event-listeners are now registered)
            playerRef.current.initialize();
        }

        return () => {
            if (playerRef.current) {
                playerRef.current.removeEventListener("playbackProgress", onPlaybackProgress);
            }
        };
    }, []);

    return (
        <div>
            <StormPlayer
                ref={playerRef}
                playerConfig={playerConfig}
                streamConfig={streamConfig}
            />
        </div>
    );
};

export default App;

Code Explanation

1. Imports:

   Imports

   typescript

   Copy

   import {
       StormPlayer,
       StormPlayerConfig,
       StormStreamConfig,
       StormPlayerEvent,
       StormPlayerClass
   } from "@stormstreaming/stormplayer-react";
   

   These are the required imports that include Storm Player into your class, along with the configuration types for both stream and player.

2. Player Configuration Object:

   Player configuration

   typescript

   Copy

   const playerConfig: StormPlayerConfig = {
       width: "100%",
       aspectRatio: "16:9",
       title: "Your first live stream",
       subtitle: "This is going to be epic!"
   };
   

   The player configuration object contains all settings related to the appearance and behavior of the player itself. The example provided includes only basic settings. You can learn more about the configuration possibilities from the Storm JS Player UI - Basic Settings section. If you wish to customize your player, make sure to check Storm JS Player UI - Interface & Styling.

3. Stream Configuration Object:

   Stream configuration

   typescript

   Copy

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

   The stream configuration object contains parameters related to the video transmission itself. Similarly to the example presented above, it includes only basic options. You can learn more about configuring this section from the Storm JS Player Core - Stream & Server Configuration Guide.

4. Attaching event listeners & interacting with the player:

   Event listeners

   typescript

   Copy

   useEffect(() => {
       // Sample callback for event listener
       const onPlaybackProgress = (event: StormPlayerEvent["playbackProgress"]) => {
           console.log(`Player ID: ${event.ref.getInstanceID()} - Playback Progress Update`);
           console.log(`-->: streamStartTime (source): ${event.streamStartTime}`);
           console.log(`-->: streamDuration (source): ${event.streamDuration}`);
           console.log(`-->: playbackStartTime (this stream): ${event.playbackStartTime}`);
           console.log(`-->: playbackDuration (this stream): ${event.playbackDuration}`);
       };
   
       if (playerRef.current) {
           // Register event listener
           playerRef.current.addEventListener("playbackProgress", onPlaybackProgress);
   
           // Initialize player (all event-listeners are now registered)
           playerRef.current.initialize();
       }
   }, []);
   

   In the above example, we can see how to add an event listener to the player. The lists of supported events can be found in the Player Events and Core Events sections. For a comprehensive description of the API, please refer to the API Methods section.

5. Initialization:

   Initialization

   typescript

   Copy

   playerRef.current.initialize();
   

   Once all event listeners have been registered with the player, we can ultimately initialize the player using the initialize() method. Please bear in mind that if the player is set to operate in autostart mode and events are registered after this method is called, your code may not function correctly due to the asynchronous execution of the code.