React Implementation - Storm JavaScript Library

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

Requirements

• Node: 15.4.0+
• React: 17.0.2+

Installation

1. NPM:

                                   
   npm install @stormstreaming/stormlibrary-react
                               

2. Yarn:

                                   
   yarn add @stormstreaming/stormlibrary-react
                               

Sample Code

                        
import {
    useEffect,
    useRef
} from "react";

import {
    StormLibrary,
    StormStreamConfig,
    StormLibraryEvent,
    StormLibraryClass,
} from "@stormstreaming/StormLibrary-react";


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

function App() {
    const instanceRef = useRef<StormLibraryClass>(null);

    useEffect(() => {
        // Sample callback for event listener
        const onPlaybackProgress = (event: StormLibraryEvent["playbackProgress"]) => {
            console.log(`Player ID: ${event.ref.getLibraryID()} - 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 (instanceRef.current) {
            // Register event listener
            instanceRef.current.addEventListener("playbackProgress", onPlaybackProgress);

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

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

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

export default App;
                    

Code Explanation

1. Imports:

                                   
   import {
       StormLibrary,
       StormStreamConfig,
       StormLibraryEvent,
       StormLibraryClass
   } from "@stormstreaming/StormLibrary-react";
                               

   These are the required imports that include Storm Library into your class, along with the configuration object.

2. Stream Configuration Object:

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

   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 - Stream & Server Configuration Guide.

3. Attaching event listeners & interacting with the player:

                                   
   useEffect(() => {
       // Sample callback for event listener
       const onPlaybackProgress = (event: StormLibraryEvent["playbackProgress"]) => {
           console.log(`Player ID: ${event.ref.getLibraryID()} - 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 (instanceRef.current) {
           // Register event listener
           instanceRef.current.addEventListener("playbackProgress", onPlaybackProgress);
   
           // Initialize player (all event-listeners are now registered)
           instanceRef.current.initialize();
       }
   
       return () => {
           if (instanceRef.current) {
               instanceRef.current.removeEventListener("playbackProgress", onPlaybackProgress);
           }
       };
   }, []);
                               

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

4. Initialization:

                                   
   instanceRef.current.initialize();
                               

   Once all event listeners have been registered with the library, we can ultimately initialize the library using the initialize() method. Please bear in mind that if the library 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.