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-scripts.stormstreaming.com/stormlibrary/4-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 streamConfig = {
                configurationType: "embedded",                   // "embedded" 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 a storm streaming server instance
                            application: "live",                 // application name (can be configured in storm server settings)
                            port: 80,                            // server port, usually 80 (non-ssl) or 443 (ssl)
                            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)
                            streamKey: "test",                   // streamKey
                        },
                    ]
                },
                settings: {
                    autoStart: true,                              // if set to true, video will start playing automatically, but will be muted too
                    video: {
                        scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "original"
                        containerID: "container",                 // name of the HTML container
                        aspectRatio: "16:9",                      // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
                        width: "100%",                            // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
                    },
                    debug: {
                        console: {                                // console output
                            enabled: true                         // if console output is activated
                        }
                    }
                }
            };

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

            /**
             * This event is activated when the library is prepared to accept API calls. No method should be invoked on the library
             * before this event is registered.
             */
            storm.addEventListener("playerReady", function (event) {
                console.log("playerReady");
            });

            /**
             * This event is triggered when the library initiates a connection with the Storm Streaming Server or Cloud instance
             */
            storm.addEventListener("serverConnectionInitiate", function(event){
                console.log("serverConnectionInitiate");
            });

            /**
             * This event is triggered when the library establishes a connection with the Storm Streaming Server or Cloud instance
             */
            storm.addEventListener("serverConnect", function(event){
                console.log("serverConnect");
            });

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

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

            /**
             * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
             * very soon. This event will fire again if video buffer goes down to zero.
             */
            storm.addEventListener("bufferingStart", function(event){
                console.log("bufferingStart");
            });

            /**
             * This event tells us that a video buffer is now full. Playback will start any moment now.
             */
            storm.addEventListener("bufferingComplete", function(event){
                console.log("bufferingComplete");
            });

            /**
             * 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("metadataReceived", function(event){
                console.log(`-->: video-codec: ${event.metadata.getVideoCodec()}`);
                console.log(`-->: audio-codec: ${event.metadata.getAudioCodec()}`);
                console.log(`-->: video width: ${event.metadata.getVideoWidth()}`);
                console.log(`-->: video height: ${event.metadata.getVideoHeight()}`);
                console.log(`-->: fps: ${event.metadata.getNominalFPS()}`);
                console.log(`-->: encoder: ${event.metadata.getEncoder()}`);
            });

            /**
             * The event is fired whenever the playback starts.
             */
            storm.addEventListener("playbackStart", function(event){
                console.log("playbackStarted");
            });

            /**
             * The event is fired whenever the playback pauses.
             */
            storm.addEventListener("playbackPause", function(event){
                console.log("playbackStarted");
            });

            /**
             * 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("playbackProgress", function(event){
                console.log(`-->: playback duration: ${event.playbackDuration}`);
                console.log(`-->: playback start time: ${event.playbackStartTime}`);
                console.log(`-->: stream total duration: ${event.streamDuration}`);
                console.log(`-->: stream start time: ${event.streamStartTime}`);
                console.log(`-->: dvr cache size: ${event.dvrCacheSize}`);
            });

            /**
             * 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 Player - 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 streamConfig = {
                configurationType: "embedded",                   // "embedded" 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 a storm streaming server instance
                            application: "live",                 // application name (can be configured in storm server settings)
                            port: 80,                            // server port, usually 80 (non-ssl) or 443 (ssl)
                            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)
                            streamKey: "test",                   // streamKey
                        },
                    ]
                },
                settings: {
                    autoStart: true,                              // if set to true, video will start playing automatically, but will be muted too
                    video: {
                        scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "original"
                        containerID: "container",                 // name of the HTML container
                        aspectRatio: "16:9",                      // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
                        width: "100%",                            // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
                    },
                    debug: {
                        console: {                                // console output
                            enabled: true                         // if console output is activated
                        }
                    }
                }
            };

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

            /**
             * This event is activated when the library is prepared to accept API calls. No method should be invoked on the library
             * before this event is registered.
             */
            storm.addEventListener("playerReady", function (event) {
                console.log("playerReady");
            });

            /**
             * This event is triggered when the library initiates a connection with the Storm Streaming Server or Cloud instance
             */
            storm.addEventListener("serverConnectionInitiate", function(event){
                console.log("serverConnectionInitiate");
            });

            /**
             * This event is triggered when the library establishes a connection with the Storm Streaming Server or Cloud instance
             */
            storm.addEventListener("serverConnect", function(event){
                console.log("serverConnect");
            });

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

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

            /**
             * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
             * very soon. This event will fire again if video buffer goes down to zero.
             */
            storm.addEventListener("bufferingStart", function(event){
                console.log("bufferingStart");
            });

            /**
             * This event tells us that a video buffer is now full. Playback will start any moment now.
             */
            storm.addEventListener("bufferingComplete", function(event){
                console.log("bufferingComplete");
            });

            /**
             * 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("metadataReceived", function(event){
                console.log(`-->: video-codec: ${event.metadata.getVideoCodec()}`);
                console.log(`-->: audio-codec: ${event.metadata.getAudioCodec()}`);
                console.log(`-->: video width: ${event.metadata.getVideoWidth()}`);
                console.log(`-->: video height: ${event.metadata.getVideoHeight()}`);
                console.log(`-->: fps: ${event.metadata.getNominalFPS()}`);
                console.log(`-->: encoder: ${event.metadata.getEncoder()}`);
            });

            /**
             * The event is fired whenever the playback starts.
             */
            storm.addEventListener("playbackStart", function(event){
                console.log("playbackStarted");
            });

            /**
             * The event is fired whenever the playback pauses.
             */
            storm.addEventListener("playbackPause", function(event){
                console.log("playbackStarted");
            });

            /**
             * 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("playbackProgress", function(event){
                console.log(`-->: playback duration: ${event.playbackDuration}`);
                console.log(`-->: playback start time: ${event.playbackStartTime}`);
                console.log(`-->: stream total duration: ${event.streamDuration}`);
                console.log(`-->: stream start time: ${event.streamStartTime}`);
                console.log(`-->: dvr cache size: ${event.dvrCacheSize}`);
            });

            /**
             * 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 - ESM Sample page</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="container"></div>
        <script type="module">
            import { StormLibrary } from "../dist/esm/index.js";

            /**
             * Standard configuration object
             */
            const streamConfig = {
                configurationType: "embedded",                   // "embedded" 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 a storm streaming server instance
                            application: "live",                 // application name (can be configured in storm server settings)
                            port: 80,                            // server port, usually 80 (non-ssl) or 443 (ssl)
                            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)
                            streamKey: "test",                   // streamKey
                        },
                    ]
                },
                settings: {
                    autoStart: true,                              // if set to true, video will start playing automatically, but will be muted too
                    video: {
                        scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "original"
                        containerID: "container",                 // name of the HTML container
                        aspectRatio: "16:9",                      // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
                        width: "100%",                            // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
                    },
                    debug: {
                        console: {                                // console output
                            enabled: true                         // if console output is activated
                        }
                    }
                }
            };

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

            /**
             * This event is activated when the library is prepared to accept API calls. No method should be invoked on the library
             * before this event is registered.
             */
            storm.addEventListener("playerReady", function (event) {
                console.log("playerReady");
            });

            /**
             * This event is triggered when the library initiates a connection with the Storm Streaming Server or Cloud instance
             */
            storm.addEventListener("serverConnectionInitiate", function(event){
                console.log("serverConnectionInitiate");
            });

            /**
             * This event is triggered when the library establishes a connection with the Storm Streaming Server or Cloud instance
             */
            storm.addEventListener("serverConnect", function(event){
                console.log("serverConnect");
            });

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

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

            /**
             * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
             * very soon. This event will fire again if video buffer goes down to zero.
             */
            storm.addEventListener("bufferingStart", function(event){
                console.log("bufferingStart");
            });

            /**
             * This event tells us that a video buffer is now full. Playback will start any moment now.
             */
            storm.addEventListener("bufferingComplete", function(event){
                console.log("bufferingComplete");
            });

            /**
             * 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("metadataReceived", function(event){
                console.log(`-->: video-codec: ${event.metadata.getVideoCodec()}`);
                console.log(`-->: audio-codec: ${event.metadata.getAudioCodec()}`);
                console.log(`-->: video width: ${event.metadata.getVideoWidth()}`);
                console.log(`-->: video height: ${event.metadata.getVideoHeight()}`);
                console.log(`-->: fps: ${event.metadata.getNominalFPS()}`);
                console.log(`-->: encoder: ${event.metadata.getEncoder()}`);
            });

            /**
             * The event is fired whenever the playback starts.
             */
            storm.addEventListener("playbackStart", function(event){
                console.log("playbackStarted");
            });

            /**
             * The event is fired whenever the playback pauses.
             */
            storm.addEventListener("playbackPause", function(event){
                console.log("playbackStarted");
            });

            /**
             * 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("playbackProgress", function(event){
                console.log(`-->: playback duration: ${event.playbackDuration}`);
                console.log(`-->: playback start time: ${event.playbackStartTime}`);
                console.log(`-->: stream total duration: ${event.streamDuration}`);
                console.log(`-->: stream start time: ${event.streamStartTime}`);
                console.log(`-->: dvr cache size: ${event.dvrCacheSize}`);
            });

            /**
             * 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 Player - 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 streamConfig = {
                configurationType: "embedded",                   // "embedded" 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 a storm streaming server instance
                            application: "live",                 // application name (can be configured in storm server settings)
                            port: 80,                            // server port, usually 80 (non-ssl) or 443 (ssl)
                            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)
                            streamKey: "test",                   // streamKey
                        },
                    ]
                },
                settings: {
                    autoStart: true,                              // if set to true, video will start playing automatically, but will be muted too
                    video: {
                        scalingMode: "fill",                      // possible values "fill", "letterbox", "crop" and "original"
                        containerID: "container",                 // name of the HTML container
                        aspectRatio: "16:9",                      // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
                        width: "100%",                            // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
                    },
                    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(streamConfig);

                /**
                 * This event is activated when the library is prepared to accept API calls. No method should be invoked on the library
                 * before this event is registered.
                 */
                storm.addEventListener("playerReady", function (event) {
                    console.log("playerReady");
                });

                /**
                 * This event is triggered when the library initiates a connection with the Storm Streaming Server or Cloud instance
                 */
                storm.addEventListener("serverConnectionInitiate", function(event){
                    console.log("serverConnectionInitiate");
                });

                /**
                 * This event is triggered when the library establishes a connection with the Storm Streaming Server or Cloud instance
                 */
                storm.addEventListener("serverConnect", function(event){
                    console.log("serverConnect");
                });

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

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

                /**
                 * This event tells us that a video content is being prepared for playback. It’s not playing yet, but it will start
                 * very soon. This event will fire again if video buffer goes down to zero.
                 */
                storm.addEventListener("bufferingStart", function(event){
                    console.log("bufferingStart");
                });

                /**
                 * This event tells us that a video buffer is now full. Playback will start any moment now.
                 */
                storm.addEventListener("bufferingComplete", function(event){
                    console.log("bufferingComplete");
                });

                /**
                 * 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("metadataReceived", function(event){
                    console.log(`-->: video-codec: ${event.metadata.getVideoCodec()}`);
                    console.log(`-->: audio-codec: ${event.metadata.getAudioCodec()}`);
                    console.log(`-->: video width: ${event.metadata.getVideoWidth()}`);
                    console.log(`-->: video height: ${event.metadata.getVideoHeight()}`);
                    console.log(`-->: fps: ${event.metadata.getNominalFPS()}`);
                    console.log(`-->: encoder: ${event.metadata.getEncoder()}`);
                });

                /**
                 * The event is fired whenever the playback starts.
                 */
                storm.addEventListener("playbackStart", function(event){
                    console.log("playbackStarted");
                });

                /**
                 * The event is fired whenever the playback pauses.
                 */
                storm.addEventListener("playbackPause", function(event){
                    console.log("playbackStarted");
                });

                /**
                 * 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("playbackProgress", function(event){
                    console.log(`-->: playback duration: ${event.playbackDuration}`);
                    console.log(`-->: playback start time: ${event.playbackStartTime}`);
                    console.log(`-->: stream total duration: ${event.streamDuration}`);
                    console.log(`-->: stream start time: ${event.streamStartTime}`);
                    console.log(`-->: dvr cache size: ${event.dvrCacheSize}`);
                });

                /**
                 * 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-scripts.stormstreaming.com/stormplayer/4-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 Player - IIFE Sample page</title>
        <meta charset="UTF-8">
        <script src="../dist/iife/index.js"></script>
    </head>
    <body>
        <div id="container"></div>
        <script>
            /**
             * Standard library configuration object
             */
            const streamConfig = {
                configurationType: "embedded",                   // "embedded" 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
                            application: "live",                 // application name (can be configured in storm server settings)
                            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)
                            streamKey: "test",                   // streamKey of the stream
                        },
                    ]
                },
                settings: {
                    autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                    debug: {
                        console: {                                // console output
                            enabled: true                         // if console output is activated
                        }
                    }
                }
            };

            /**
             * Standard player configuration object
             */
            const playerConfig = {
                containerID: "container",                        // HTML container where player will be added
                aspectRatio: "16:9",                             // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
                width: "100%",                                   // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
                title: "Title goes here",                        // title for the stream
                subtitle: "This is going to be epic!",           // subtitle for the stream
            };

            /**
             * Each player instance must be provided with both player (gui) and library configs
             */
            const storm = stormPlayer(playerConfig, streamConfig);

            /**
             * Event fires whenever player interface becomes visible (e.g. user mouse activity).
             */
            storm.addEventListener("guiShow", function(event){
                console.log("GUI is visible");
            });

            /**
             * Event fires whenever player interface becomes invisible (user mouse inactivity).
             */
            storm.addEventListener("guiHide", function(event){
                console.log("GUI is not visible");
            });

        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Storm Player - UMD Sample page</title>
        <meta charset="UTF-8">
        <script src="../dist/umd/index.js"></script>
    </head>
    <body>
        <div id="container"></div>
        <script>
            /**
             * Standard library configuration object
             */
            const streamConfig = {
                configurationType: "embedded",                   // "embedded" 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
                            application: "live",                 // application name (can be configured in storm server settings)
                            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)
                            streamKey: "test",                   // streamKey of the stream
                        },
                    ]
                },
                settings: {
                    autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                    debug: {
                        console: {                                // console output
                            enabled: true                         // if console output is activated
                        }
                    }
                }
            };

            /**
             * Standard player configuration object
             */
            const playerConfig = {
                containerID: "container",                        // HTML container where player will be added
                aspectRatio: "16:9",                             // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
                width: "100%",                                   // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
                title: "Title goes here",                        // title for the stream
                subtitle: "This is going to be epic!",           // subtitle for the stream
            };

            /**
             * Creating an instance of the storm library
             */
            const storm = stormPlayer.create(playerConfig, libraryConfig);

            /**
             * Event fires whenever player interface becomes visible (e.g. user mouse activity).
             */
            storm.addEventListener("guiShow", function(event){
                console.log("GUI is visible");
            });

            /**
             * Event fires whenever player interface becomes invisible (user mouse inactivity).
             */
            storm.addEventListener("guiHide", function(event){
                console.log("GUI is not visible");
            });

        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Storm Player - ESM Sample page</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="container"></div>
        <script type="module">
            import {StormPlayer} from "../dist/esm/index.js";

            /**
             * Standard library configuration object
             */
            const streamConfig = {
                configurationType: "embedded",                   // "embedded" 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
                            application: "live",                 // application name (can be configured in storm server settings)
                            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)
                            streamKey: "test",                   // streamKey of the stream
                        },
                    ]
                },
                settings: {
                    autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                    debug: {
                        console: {                                // console output
                            enabled: true                         // if console output is activated
                        }
                    }
                }
            };

            /**
             * Standard player configuration object
             */
            const playerConfig = {
                containerID: "container",                        // HTML container where player will be added
                aspectRatio: "16:9",                             // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
                width: "100%",                                   // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
                title: "Title goes here",                        // title for the stream
                subtitle: "This is going to be epic!",           // subtitle for the stream
            };

            /**
             * Each player instance must be provided with both player (gui) and library configs
             */
            const storm = new StormPlayer(playerConfig, libraryConfig);

            /**
             * Event fires whenever player interface becomes visible (e.g. user mouse activity).
             */
            storm.addEventListener("guiShow", function(event){
                console.log("GUI is visible");
            });

            /**
             * Event fires whenever player interface becomes invisible (user mouse inactivity).
             */
            storm.addEventListener("guiHide", function(event){
                console.log("GUI is not visible");
            });

        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Storm Player - 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 library configuration object
             */
            const streamConfig = {
                configurationType: "embedded",                   // "embedded" 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
                            application: "live",                 // application name (can be configured in storm server settings)
                            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)
                            streamKey: "test",                   // streamKey of the stream
                        },
                    ]
                },
                settings: {
                    autoStart: true,                              // if true, video will start playing automatically, but will be muted too
                    debug: {
                        console: {                                // console output
                            enabled: true                         // if console output is activated
                        }
                    }
                }
            };

            /**
             * Standard player configuration object
             */
            const playerConfig = {
                containerID: "container",                        // HTML container where player will be added
                aspectRatio: "16:9",                             // <video> element will scale to provided aspect-ratio. This parameter is optional and will overwrite "height" parameter as "width" will only be used for calculations
                width: "100%",                                   // <video> element width, can be either "px" or "%" (string), as (number) will always be "px" value. For % it'll auto-scale to parent container,
                title: "Title goes here",                        // title for the stream
                subtitle: "This is going to be epic!",           // subtitle for the stream
            };

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

                /**
                 * Library instance
                 */
                const player = new storm.create(playerConfig, libraryConfig);

                /**
                 * Event fires whenever player interface becomes visible (e.g. user mouse activity).
                 */
                player.addEventListener("guiShow", function(event){
                    console.log("GUI is visible");
                });

                /**
                 * Event fires whenever player interface becomes invisible (user mouse inactivity).
                 */
                player.addEventListener("guiHide", function(event){
                    console.log("GUI is not visible");
                });

            });

        </script>
    </body>
</html>
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!