React Implementation - Storm JavaScript Player

In this tutorial, you will learn how to correctly use the Storm Player React Component to embed a player on websites built with the ReactJS framework.

Requirements

Node: 15.4.0+
React: 17.0.2+

Installation

NPM

                                
npm install @stormstreaming/stormplayer-react

Yarn

                                
yarn add @stormstreaming/stormplayer-react

Sample code

                        
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 = {
    configurationType: "embedded",
    stream: {
        serverList: [{
            host: "localhost",
            application: "live",
            port: 8081,
            ssl: false
        }],
        sourceList: [{
            protocol: "storm",
            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

Imports

                                
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.

Player Configuration Object
```
                                
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 Player - General Configuration section. If you wish to customize your player, make sure to check Storm Player - Styles & Interface Configuration.

Stream Configuration Object

                                
const streamConfig: StormStreamConfig = {
    configurationType: "embedded",
    stream: {
        serverList: [{
            host: "localhost",
            application: "live",
            port: 8081,
            ssl: false
        }],
        sourceList: [{
            protocol: "storm",
            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 Library - Embedded Configuration and Storm Library - Gateway Configuration (for Storm Cloud).

Attaching event listeners & interacting with the player

                                
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 Playback Events sections. For a comprehensive description of the API, please refer to the API Methods section.

Initialization
```
                                
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.

On this page