Docs
Player Log
Event recording

Installation

  1. Using NPM:
    npm install --save @stormstreaming/stormlibrary
  2. Using Yarn:
    yarn add @stormstreaming/stormlibrary
  3. Storm CDN:
    <script src="https://cdn.stormstreaming.com/stormlibrary/2-latest.min.js></script>

    Please check IIFE (Immediately-invoked function expression) embed method for reference!

Sample setup

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Storm JavaScript Library - IIFE Sample page</title>
    <meta charset="UTF-8">
    <script src="../dist/iife/index.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        /**
         * Standard configuration object
         */
        const config = {
            connectionType: "direct",                        // "direct" or "gateway", please check doc for more info
            stream: {
                serverList: [                                // list of streaming server, 2nd, 3rd etc. will be used as backup
                    {
                        host: "localhost",                   // host or ip to the streaming server
                        port: 80,                            // server port
                        ssl: false                           // whenever SSL connection should be used or not
                    }
                ],
                sourceList: [
                    {
                        protocol: "storm",                   // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
                        streamName: "test",                  // name of the stream
                        application: "live"                  // application name (can be configured in storm server settings)
                    },
                ]
            },
            settings: {
                autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                restartOnError: true,                         // if something bad happens, player will try to restart
                reconnectTime: 1.0,                           // if a connection with a server fails, player will restart in given time
                enabledProtocols: ["MSE", "HLS"],             // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
                video: {
                    scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "letterbox"
                    containerID: "container",                 // name of the HTML container
                    width: 640,                               // initial player width
                    height: 360                               // initial player height
                },
                debug: {
                    console: {                                // console output
                        enabled: true                         // if console output is activated
                    }
                }
            }
        };

        /**
         * Creating an instance of the storm library
         */
        const storm = stormLibrary(config);

        /**
         * This event is triggered when the player is ready to receive API calls. No method should be called upon the player
         * before this event is registered.
         */
        storm.addEventListener("playerReady", function (event) {
            console.log("playerReady");
        });

        /**
         * The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
         * for a successful playback.
         */
        storm.addEventListener("videoConnecting", function (event) {
            console.log("videoConnecting");
        });

        /**
         * This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
         * This event will be triggered after videoConnecting only and will stop a playback sequence.
         */
        storm.addEventListener("videoNotFound", function (event) {
            console.log("videoNotFound");
        });

        /**
         * Event is triggered when the player could not connect to the storm server (server is not running, or there are
         * some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
         */
        storm.addEventListener("playerConnectionFailed", function (event) {
            console.log("playerConnectionFailed");
        });

        /**
         * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
         * very soon. It's the second event in the sequence for a successful playback.
         */
        storm.addEventListener("videoBuffering", function (event) {
            console.log("videoBuffering");
        });

        /**
         * This event contains all data related to the video (like resolutions, codecs). It's the third event in the
         * sequence for a successful playback.
         */
        storm.addEventListener("videoMetadata", function (event) {
            console.log("videoMetadata");
        });

        /**
         * The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
         * a successful playback.
         */
        storm.addEventListener("videoPlay", function (event) {
            console.log("videoPlay");
        });

        /**
         * Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
         * DVR cache size must be configured in server configuration file (by default is off)
         */
        storm.addEventListener("videoProgress", function (event) {
            console.log("videoPlay");
            console.log("- stream duration", event.streamDuration);      // how long does this stream sessions last
            console.log("- source duration", event.sourceDuration);      // how long is the source broadcasting
            console.log("- source start time", event.sourceStartTime);   // when the source was started
            console.log("- stream start Time", event.streamStartTime);   // when this stream session was started
            console.log("- dvr cache size", event.dvrCacheSize);          // dvr cashe size in ms
        });

        /**
         * Since all events were added, we can tell the script to start
         */
        storm.initialize();

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Storm JavaScript Library - UMD Sample page</title>
    <meta charset="UTF-8">
    <script src="../dist/umd/index.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        /**
         * Standard configuration object
         */
        const config = {
            connectionType: "direct",                        // "direct" or "gateway", please check doc for more info
            stream: {
                serverList: [                                // list of streaming server, 2nd, 3rd etc. will be used as backup
                    {
                        host: "localhost",                   // host or ip to the streaming server
                        port: 80,                            // server port
                        ssl: false                           // whenever SSL connection should be used or not
                    }
                ],
                sourceList: [
                    {
                        protocol: "storm",                   // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
                        streamName: "test",                  // name of the stream
                        application: "live"                  // application name (can be configured in storm server settings)
                    },
                ]
            },
            settings: {
                autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                restartOnError: true,                         // if something bad happens, player will try to restart
                reconnectTime: 1.0,                           // if a connection with a server fails, player will restart in given time
                enabledProtocols: ["MSE", "HLS"],             // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
                video: {
                    scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "letterbox"
                    containerID: "container",                 // name of the HTML container
                    width: 640,                               // initial player width
                    height: 360                               // initial player height
                },
                debug: {
                    console: {                                // console output
                        enabled: true                         // if console output is activated
                    }
                }
            }
        };

        /**
         * Creating an instance of the storm library
         */
        const storm = stormLibrary.create(config);

        /**
         * This event is triggered when the player is ready to receive API calls. No method should be called upon the player
         * before this event is registered.
         */
        storm.addEventListener("playerReady", function (event) {
            console.log("playerReady is now ready");
        });

        /**
         * The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
         * for a successful playback.
         */
        storm.addEventListener("videoConnecting", function(event){
            console.log("videoConnecting");
        });

        /**
         * This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
         * This event will be triggered after videoConnecting only and will stop a playback sequence.
         */
        storm.addEventListener("videoNotFound", function (event) {
            console.log("videoNotFound");
        });

        /**
         * Event is triggered when the player could not connect to the storm server (server is not running, or there are
         * some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
         */
        storm.addEventListener("playerConnectionFailed", function (event) {
            console.log("playerConnectionFailed");
        });

        /**
         * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
         * very soon. It's the second event in the sequence for a successful playback.
         */
        storm.addEventListener("videoBuffering", function(event){
            console.log("videoBuffering");
        });

        /**
         * This event contains all data related to the video (like resolutions, codecs). It's the third event in the
         * sequence for a successful playback.
         */
        storm.addEventListener("videoMetadata", function(event){
            console.log("videoMetadata");
        });

        /**
         * The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
         * a successful playback.
         */
        storm.addEventListener("videoPlay", function(event){
            console.log("videoPlay");
        });

        /**
         * Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
         * DVR cache size must be configured in server configuration file (by default is off)
         */
        storm.addEventListener("videoProgress", function(event){
            console.log("videoPlay");
            console.log("- stream duration", event.streamDuration);      // how long does this stream sessions last
            console.log("- source duration", event.sourceDuration);      // how long is the source broadcasting
            console.log("- source start time", event.sourceStartTime);   // when the source was started
            console.log("- stream start Time", event.streamStartTime);   // when this stream session was started
            console.log("- dvr cache size", event.dvrCacheSize);          // dvr cashe size in ms
        });

        /**
         * Since all events were added, we can tell the script to start
         */
        storm.initialize();

    </script>
</body>
</html>
import {StormLibrary} from "../dist/esm/index.js";

/**
 * Standard configuration object
 */
const config = {
    connectionType: "direct",                        // "direct" or "gateway", please check doc for more info
    stream: {
        serverList: [                                // list of streaming server, 2nd, 3rd etc. will be used as backup
            {
                host: "localhost",                   // host or ip to the streaming server
                port: 80,                            // server port
                ssl: false                           // whenever SSL connection should be used or not
            }
        ],
        sourceList: [
            {
                protocol: "storm",                   // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
                streamName: "test",                  // name of the stream
                application: "live"                  // application name (can be configured in storm server settings)
            },
        ]
    },
    settings: {
        autoStart: true,                              // if true, video will start playing automatically, but will be muted too
        restartOnError: true,                         // if something bad happens, player will try to restart
        reconnectTime: 1.0,                           // if a connection with a server fails, player will restart in given time
        enabledProtocols: ["MSE", "HLS"],             // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
        video: {
            scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "letterbox"
            containerID: "container",                 // name of the HTML container
            width: 640,                               // initial player width
            height: 360                               // initial player height
        },
        debug: {
            console: {                                // console output
                enabled: true                         // if console output is activated
            }
        }
    }
};


/**
 * Creating an instance of the storm library
 */
const storm = new StormLibrary(config)

/**
 * This event is triggered when the player is ready to receive API calls. No method should be called upon the player
 * before this event is registered.
 */
storm.addEventListener("playerReady", function (event) {
    console.log("playerReady is now ready");
});

/**
 * The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
 * for a successful playback.
 */
storm.addEventListener("videoConnecting", function (event) {
    console.log("videoConnecting");
});

/**
 * This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
 * This event will be triggered after videoConnecting only and will stop a playback sequence.
 */
storm.addEventListener("videoNotFound", function (event) {
    console.log("videoNotFound");
});

/**
 * Event is triggered when the player could not connect to the storm server (server is not running, or there are
 * some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
 */
storm.addEventListener("playerConnectionFailed", function (event) {
    console.log("playerConnectionFailed");
});

/**
 * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
 * very soon. It's the second event in the sequence for a successful playback.
 */
storm.addEventListener("videoBuffering", function (event) {
    console.log("videoBuffering");
})

/**
 * This event contains all data related to the video (like resolutions, codecs). It's the third event in the
 * sequence for a successful playback.
 */
storm.addEventListener("videoMetadata", function (event) {
    console.log("videoMetadata");
})

/**
 * The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
 * a successful playback.
 */
storm.addEventListener("videoPlay", function (event) {
    console.log("videoPlay");
});

/**
 * Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
 * DVR cache size must be configured in server configuration file (by default is off)
 */
storm.addEventListener("videoProgress", function (event) {
    console.log("videoPlay");
    console.log("- stream duration", event.streamDuration);      // how long does this stream sessions last
    console.log("- source duration", event.sourceDuration);      // how long is the source broadcasting
    console.log("- source start time", event.sourceStartTime);   // when the source was started
    console.log("- stream start Time", event.streamStartTime);   // when this stream session was started
    console.log("- dvr cache size", event.dvrCacheSize);         // dvr cashe size in ms
});

/**
 * Since all events were added, we can tell the script to start
 */
storm.initialize();
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Storm JavaScript Library - AMD Sample page</title>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>

        /**
         * Standard configuration object
         */
        const config = {
            connectionType: "direct",                        // "direct" or "gateway", please check doc for more info
            stream: {
                serverList: [                                // list of streaming server, 2nd, 3rd etc. will be used as backup
                    {
                        host: "localhost",                   // host or ip to the streaming server
                        port: 80,                            // server port
                        ssl: false                           // whenever SSL connection should be used or not
                    }
                ],
                sourceList: [
                    {
                        protocol: "storm",                   // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
                        streamName: "test",                  // name of the stream
                        application: "live"                  // application name (can be configured in storm server settings)
                    },
                ]
            },
            settings: {
                autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                restartOnError: true,                         // if something bad happens, player will try to restart
                reconnectTime: 1.0,                           // if a connection with a server fails, player will restart in given time
                enabledProtocols: ["MSE", "HLS"],             // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
                video: {
                    scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "letterbox"
                    containerID: "container",                 // name of the HTML container
                    width: 640,                               // initial player width
                    height: 360                               // initial player height
                },
                debug: {
                    console: {                                // console output
                        enabled: true                         // if console output is activated
                    }
                }
            }
        };

        /**
         * Path to the AMD module
         */
        requirejs(['../dist/amd/index'], function (storm) {

            /**
             * Library instance
             */
            const player = new storm.create(config);

            /**
             * This event is triggered when the player is ready to receive API calls. No method should be called upon the player
             * before this event is registered.
             */
            player.addEventListener("playerReady", function (event) {
                console.log("playerReady is now ready");
            });

            /**
             * The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
             * for a successful playback.
             */
            player.addEventListener("videoConnecting", function (event) {
                console.log("videoConnecting");
            })

            /**
             * This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
             * This event will be triggered after videoConnecting only and will stop a playback sequence.
             */
            player.addEventListener("videoNotFound", function (event) {
                console.log("videoNotFound");
            });

            /**
             * Event is triggered when the player could not connect to the storm server (server is not running, or there are
             * some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
             */
            player.addEventListener("playerConnectionFailed", function (event) {
                console.log("playerConnectionFailed");
            });

            /**
             * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
             * very soon. It's the second event in the sequence for a successful playback.
             */
            player.addEventListener("videoBuffering", function (event) {
                console.log("videoBuffering");
            });

            /**
             * This event contains all data related to the video (like resolutions, codecs). It's the third event in the
             * sequence for a successful playback.
             */
            player.addEventListener("videoMetadata", function (event) {
                console.log("videoMetadata");
            });

            /**
             * The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
             * a successful playback.
             */
            player.addEventListener("videoPlay", function (event) {
                console.log("videoPlay");
            });

            /**
             * Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
             * DVR cache size must be configured in server configuration file (by default is off)
             */
            player.addEventListener("videoProgress", function (event) {
                console.log("videoPlay");
                console.log("- stream duration", event.streamDuration);      // how long does this stream sessions last
                console.log("- source duration", event.sourceDuration);      // how long is the source broadcasting
                console.log("- source start time", event.sourceStartTime);   // when the source was started
                console.log("- stream start Time", event.streamStartTime);   // when this stream session was started
                console.log("- dvr cache size", event.dvrCacheSize);         // dvr cashe size in ms
            });

            /**
             * Since all events were added, we can tell the script to start
             */
            player.initialize();

        });

    </script>
</body>
</html>

Installation

  1. Using NPM:
    npm install --save @stormstreaming/stormplayer
  2. Using Yarn:
    yarn add @stormstreaming/stormplayer
  3. Storm CDN:
    <script src="https://cdn.stormstreaming.com/stormplayer/2-latest.min.js></script>

    Please check IIFE (Immediately-invoked function expression) embed method for reference!

Sample setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../dist/iife/index.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        /**
         * Standard configuration object
         */
        const config = {
            role: "player",                                  // "player" or "streamer"
            connectionType: "direct",                        // "direct" or "gateway", please check doc for more info
            stream: {
                serverList: [                                // list of streaming server, 2nd, 3rd etc. will be used as backup
                    {
                        host: "localhost",                   // host or ip to the streaming server
                        port: 80,                            // server port
                        ssl: false                           // whenever SSL connection should be used or not
                    }
                ],
                sourceList: [
                    {
                        protocol: "storm",                   // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
                        streamName: "test",                  // name of the stream
                        application: "live"                  // application name (can be configured in storm server settings)
                    },
                ]
            },
            settings: {
                autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                restartOnError: true,                         // if something bad happens, player will try to restart
                reconnectTime: 1.0,                           // if a connection with a server fails, player will restart in given time
                enabledProtocols: ["MSE", "HLS"],             // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
                video: {
                    scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "letterbox"
                    containerID: "container",                 // name of the HTML container
                    width: 640,                               // initial player width
                    height: 360                               // initial player height
                },
                debug: {
                    console: {                                // console output
                        enabled: true                         // if console output is activated
                    }
                }
            }
        };

        /**
         * Creating an instance of the storm library
         */
        const storm = stormLibrary(config);

        /**
         * This event is triggered when the player is ready to receive API calls. No method should be called upon the player
         * before this event is registered.
         */
        storm.addEventListener("playerReady", function (event) {
            console.log("playerReady");
        });

        /**
         * The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
         * for a successful playback.
         */
        storm.addEventListener("videoConnecting", function(event){
            console.log("videoConnecting");
        });

        /**
         * This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
         * This event will be triggered after videoConnecting only and will stop a playback sequence.
         */
        storm.addEventListener("videoNotFound", function (event) {
            console.log("videoNotFound");
        });

        /**
         * Event is triggered when the player could not connect to the storm server (server is not running, or there are
         * some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
         */
        storm.addEventListener("playerConnectionFailed", function (event) {
            console.log("playerConnectionFailed");
        });

        /**
         * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
         * very soon. It's the second event in the sequence for a successful playback.
         */
        storm.addEventListener("videoBuffering", function(event){
            console.log("videoBuffering");
        });

        /**
         * This event contains all data related to the video (like resolutions, codecs). It's the third event in the
         * sequence for a successful playback.
         */
        storm.addEventListener("videoMetadata", function(event){
            console.log("videoMetadata");
        });

        /**
         * The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
         * a successful playback.
         */
        storm.addEventListener("videoPlay", function(event){
            console.log("videoPlay");
        });

        /**
         * Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
         * DVR cache size must be configured in server configuration file (by default is off)
         */
        storm.addEventListener("videoProgress", function(event){
            console.log("videoPlay");
            console.log("- stream duration", event.streamDuration);      // how long does this stream sessions last
            console.log("- source duration", event.sourceDuration);      // how long is the source broadcasting
            console.log("- source start time", event.sourceStartTime);   // when the source was started
            console.log("- stream start Time", event.streamStartTime);   // when this stream session was started
            console.log("- dvr cache size", event.dvrCacheSize);          // dvr cashe size in ms
        });

        /**
         * Since all events were added, we can tell the script to start
         */
        storm.initialize();

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../dist/umd/index.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>
        /**
         * Standard configuration object
         */
        const config = {
            role: "player",                                  // "player" or "streamer"
            connectionType: "direct",                        // "direct" or "gateway", please check doc for more info
            stream: {
                serverList: [                                // list of streaming server, 2nd, 3rd etc. will be used as backup
                    {
                        host: "localhost",                   // host or ip to the streaming server
                        port: 80,                            // server port
                        ssl: false                           // whenever SSL connection should be used or not
                    }
                ],
                sourceList: [
                    {
                        protocol: "storm",                   // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
                        streamName: "test",                  // name of the stream
                        application: "live"                  // application name (can be configured in storm server settings)
                    },
                ]
            },
            settings: {
                autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                restartOnError: true,                         // if something bad happens, player will try to restart
                reconnectTime: 1.0,                           // if a connection with a server fails, player will restart in given time
                enabledProtocols: ["MSE", "HLS"],             // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
                video: {
                    scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "letterbox"
                    containerID: "container",                 // name of the HTML container
                    width: 640,                               // initial player width
                    height: 360                               // initial player height
                },
                debug: {
                    console: {                                // console output
                        enabled: true                         // if console output is activated
                    }
                }
            }
        };

        /**
         * Creating an instance of the storm library
         */
        const storm = stormLibrary.create(config);

        /**
         * This event is triggered when the player is ready to receive API calls. No method should be called upon the player
         * before this event is registered.
         */
        storm.addEventListener("playerReady", function (event) {
            console.log("playerReady is now ready");
        });

        /**
         * The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
         * for a successful playback.
         */
        storm.addEventListener("videoConnecting", function(event){
            console.log("videoConnecting");
        });

        /**
         * This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
         * This event will be triggered after videoConnecting only and will stop a playback sequence.
         */
        storm.addEventListener("videoNotFound", function (event) {
            console.log("videoNotFound");
        });

        /**
         * Event is triggered when the player could not connect to the storm server (server is not running, or there are
         * some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
         */
        storm.addEventListener("playerConnectionFailed", function (event) {
            console.log("playerConnectionFailed");
        });

        /**
         * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
         * very soon. It's the second event in the sequence for a successful playback.
         */
        storm.addEventListener("videoBuffering", function(event){
            console.log("videoBuffering");
        });

        /**
         * This event contains all data related to the video (like resolutions, codecs). It's the third event in the
         * sequence for a successful playback.
         */
        storm.addEventListener("videoMetadata", function(event){
            console.log("videoMetadata");
        });

        /**
         * The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
         * a successful playback.
         */
        storm.addEventListener("videoPlay", function(event){
            console.log("videoPlay");
        });

        /**
         * Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
         * DVR cache size must be configured in server configuration file (by default is off)
         */
        storm.addEventListener("videoProgress", function(event){
            console.log("videoPlay");
            console.log("- stream duration", event.streamDuration);      // how long does this stream sessions last
            console.log("- source duration", event.sourceDuration);      // how long is the source broadcasting
            console.log("- source start time", event.sourceStartTime);   // when the source was started
            console.log("- stream start Time", event.streamStartTime);   // when this stream session was started
            console.log("- dvr cache size", event.dvrCacheSize);          // dvr cashe size in ms
        });

        /**
         * Since all events were added, we can tell the script to start
         */
        storm.initialize();

    </script>
</body>
</html>
import {StormLibrary} from "../dist/esm/index.js";

/**
 * Standard configuration object
 */
const config = {
    role: "player",                                  // "player" or "streamer"
    connectionType: "direct",                        // "direct" or "gateway", please check doc for more info
    stream: {
        serverList: [                                // list of streaming server, 2nd, 3rd etc. will be used as backup
            {
                host: "localhost",                   // host or ip to the streaming server
                port: 80,                            // server port
                ssl: false                           // whenever SSL connection should be used or not
            }
        ],
        sourceList: [
            {
                protocol: "storm",                   // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
                streamName: "test",                  // name of the stream
                application: "live"                  // application name (can be configured in storm server settings)
            },
        ]
    },
    settings: {
        autoStart: true,                              // if true, video will start playing automatically, but will be muted too
        restartOnError: true,                         // if something bad happens, player will try to restart
        reconnectTime: 1.0,                           // if a connection with a server fails, player will restart in given time
        enabledProtocols: ["MSE", "HLS"],             // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
        video: {
            scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "letterbox"
            containerID: "container",                 // name of the HTML container
            width: 640,                               // initial player width
            height: 360                               // initial player height
        },
        debug: {
            console: {                                // console output
                enabled: true                         // if console output is activated
            }
        }
    }
};


/**
 * Creating an instance of the storm library
 */
const storm = new StormLibrary(config)

/**
 * This event is triggered when the player is ready to receive API calls. No method should be called upon the player
 * before this event is registered.
 */
storm.addEventListener("playerReady", function (event) {
    console.log("playerReady is now ready");
});

/**
 * The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
 * for a successful playback.
 */
storm.addEventListener("videoConnecting", function(event){
    console.log("videoConnecting");
});

/**
 * This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
 * This event will be triggered after videoConnecting only and will stop a playback sequence.
 */
storm.addEventListener("videoNotFound", function (event) {
    console.log("videoNotFound");
});

/**
 * Event is triggered when the player could not connect to the storm server (server is not running, or there are
 * some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
 */
storm.addEventListener("playerConnectionFailed", function (event) {
    console.log("playerConnectionFailed");
});

/**
 * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
 * very soon. It's the second event in the sequence for a successful playback.
 */
storm.addEventListener("videoBuffering", function(event){
    console.log("videoBuffering");
})

/**
 * This event contains all data related to the video (like resolutions, codecs). It's the third event in the
 * sequence for a successful playback.
 */
storm.addEventListener("videoMetadata", function(event){
    console.log("videoMetadata");
})

/**
 * The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
 * a successful playback.
 */
storm.addEventListener("videoPlay", function(event){
  console.log("videoPlay");
});

/**
 * Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
 * DVR cache size must be configured in server configuration file (by default is off)
 */
storm.addEventListener("videoProgress", function(event){
    console.log("videoPlay");
    console.log("- stream duration", event.streamDuration);      // how long does this stream sessions last
    console.log("- source duration", event.sourceDuration);      // how long is the source broadcasting
    console.log("- source start time", event.sourceStartTime);   // when the source was started
    console.log("- stream start Time", event.streamStartTime);   // when this stream session was started
    console.log("- dvr cache size", event.dvrCacheSize);          // dvr cashe size in ms
});

/**
 * Since all events were added, we can tell the script to start
 */
storm.initialize();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script>

        /**
         * Standard configuration object
         */
        const config = {
            role: "player",                                  // "player" or "streamer"
            connectionType: "direct",                        // "direct" or "gateway", please check doc for more info
            stream: {
                serverList: [                                // list of streaming server, 2nd, 3rd etc. will be used as backup
                    {
                        host: "localhost",                   // host or ip to the streaming server
                        port: 80,                            // server port
                        ssl: false                           // whenever SSL connection should be used or not
                    }
                ],
                sourceList: [
                    {
                        protocol: "storm",                   // either "storm" (stream was published to the server), or "rtmp". RTMP (external source)
                        streamName: "test",                  // name of the stream
                        application: "live"                  // application name (can be configured in storm server settings)
                    },
                ]
            },
            settings: {
                autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                restartOnError: true,                         // if something bad happens, player will try to restart
                reconnectTime: 1.0,                           // if a connection with a server fails, player will restart in given time
                enabledProtocols: ["MSE", "HLS"],             // "MSE" for desktop, android browsers and iPad OS, "HLS" for iPhone iOS
                video: {
                    scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "letterbox"
                    containerID: "container",                 // name of the HTML container
                    width: 640,                               // initial player width
                    height: 360                               // initial player height
                },
                debug: {
                    console: {                                // console output
                        enabled: true                         // if console output is activated
                    }
                }
            }
        };

        /**
         * Path to the AMD module
         */
        requirejs(['../dist/amd/index'], function (storm) {

            /**
             * Library instance
             */
            const player = new storm.create(config);

            /**
             * This event is triggered when the player is ready to receive API calls. No method should be called upon the player
             * before this event is registered.
             */
            player.addEventListener("playerReady", function (event) {
                console.log("playerReady is now ready");
            });

            /**
             * The event is triggered whenever the player starts requesting a video stream. It's the first event in the sequence
             * for a successful playback.
             */
            player.addEventListener("videoConnecting", function(event){
                console.log("videoConnecting");
            })

            /**
             * This event is called whenever a stream with a specific name was not found (was not published or is not ready yet).
             * This event will be triggered after videoConnecting only and will stop a playback sequence.
             */
            player.addEventListener("videoNotFound", function (event) {
                console.log("videoNotFound");
            });

            /**
             * Event is triggered when the player could not connect to the storm server (server is not running, or there are
             * some network issues). If there are more servers on the config list, the player will try to connect to a different server instead.
             */
            player.addEventListener("playerConnectionFailed", function (event) {
                console.log("playerConnectionFailed");
            });

            /**
             * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
             * very soon. It's the second event in the sequence for a successful playback.
             */
            player.addEventListener("videoBuffering", function(event){
                console.log("videoBuffering");
            });

            /**
             * This event contains all data related to the video (like resolutions, codecs). It's the third event in the
             * sequence for a successful playback.
             */
            player.addEventListener("videoMetadata", function(event){
                console.log("videoMetadata");
            });

            /**
             * The event is fired whenever the playback starts. It's the fourth and final event in the sequence for
             * a successful playback.
             */
            player.addEventListener("videoPlay", function(event){
                console.log("videoPlay");
            });

            /**
             * Event informs on video progress, viewer's sessions/source duration & start time along current DVR cache size.
             * DVR cache size must be configured in server configuration file (by default is off)
             */
            player.addEventListener("videoProgress", function(event){
                console.log("videoPlay");
                console.log("- stream duration", event.streamDuration);      // how long does this stream sessions last
                console.log("- source duration", event.sourceDuration);      // how long is the source broadcasting
                console.log("- source start time", event.sourceStartTime);   // when the source was started
                console.log("- stream start Time", event.streamStartTime);   // when this stream session was started
                console.log("- dvr cache size", event.dvrCacheSize);          // dvr cashe size in ms
            });

            /**
             * Since all events were added, we can tell the script to start
             */
            player.initialize();

        });

    </script>
</body>
</html>

How to setup Storm Streaming Server and Storm JavaScript Player under 10 minutes

StormLibrary
Storm Library is a core web video player for embedding live-video streams on a website. This module contains only core network and media functionality and comes with no GUI (user interface), except for the video element. With Storm Library powerful API and Event system you can build any web-based streaming solution.
StormPlayer
Storm Player is a fully customizable GUI wrapper project for Storm Library, which can work as ready-to-use Web Video Player or a template for creating your own, customizable players. Storm Player has its own set of APIs and Events, but direct access to Storm Library object is still possible.

Step 1

Start OBS and prepare some streaming content by adding a video or a camera to the scene. Once everything is ready click Settings button on the right.

Step 2

Now please select Stream tab from the left menu.

Step 3

Insert provided RTMP Server address and Stream name/key. Please keep in mind that these will change whenever you reload this demo page.

Step 4

Switch to Output menu and choose Advanced Output mode (might be already selected).

Step 5

Select x264 as the default encoder. Adjust bitrate to 2500 Kbps, select Ultrafast preset, main profile and zerolatency mode.

Step 6

Switch to Video settings and set both resolutions to: 1280x720 and click OK to close settings.

Step 7

Now press Start Streaming button and then Start button on this page.

Error

We could not play/find your video stream - please make sure your stream was published successfully and try again!

Error

You must start the player/library in order to use API!