Embedded configuration - Storm JavaScript Library

In this guide, you will learn how to correctly configure all the stream settings for the "embedded" configuration method. You will also find all the parameters that the library can accept, along with their explanations.

Introduction

To launch the Storm Library, it is necessary to create an appropriate configuration object. This object contains stream data, such as a list of servers and streamkeys, as well as basic settings like, for example, the name of the container where the video object with the stream is to be created.

There are two basic types of configurations for the Storm Library. The first one, named embedded, allows adding all information directly in the configuration object. The second one, named gateway, will fetch the stream data directly from the server instance it connects to. This guide focuses on the first method.

For Storm Streaming Cloud users please check our Gateway configuration guide.

Basic configuration

                        
const streamConfig = {
    configurationType: "embedded",
    stream: {
        serverList: [{
            host: "localhost",
            application: "live",
            port: 80,
            ssl: false
        }],
        sourceList: [{
            protocol: "storm",
            streamKey: "test"
        }],
    },
    settings: {
        autoStart: true,
        video: {
            containerID: "containerID",
            width: "100%",
            aspectRatio: "16:9"
        },
    },
};

//This sample uses IIFE embed method. Creating library instance will look slightly different for AMD, UMD or ESM
const storm = stormLibrary(streamConfig);
                            

Explanation and description of individual fields

Multiple server configuration

It is possible to define several servers in the configuration object. Storm Library will first connect to the first address on the list, and in case it is not possible, it will try to use the next one. Each time the library fails to connect to a given server playerConnectionFailed event will be triggered. If all servers fail, onAllServersFailed event will be called.

Example:

                        
serverList: [{
        host: "sub1.yourdomain.com",
        application: "live",
        port: 443,
        ssl: true
    },
    {
        host: "sub2.yourdomain.com",
        application: "live",
        port: 443,
        ssl: true
    },
    {
        host: "sub3.yourdomain.com",
        application: "live",
        port: 443,
        ssl: true
    }
]
                    

Multiple source configuration & Adaptive Bitrate Streaming

Just like with the server list, we can add more than one stream source. This gives us two possibilities. If for some reason a given stream doesn't work, Storm Library will simply try to use the next one. We can also use this functionality to launch Adaptive Bitrate Streaming.

Thanks to this mechanism, Storm Library will adjust a specific stream based on the device parameters and Internet connection quality for the viewer. However, for this function to work correctly, we must add a streamInfo object to each item in the sourceList.

Example:

                        
stream: {
    serverList: [{
        host: "yourdomain.com",
        application: "live",
        port: 443,
        ssl: true
    }],
    sourceList: [{
            protocol: "storm",
            streamName: "test_720p",
            streamInfo: {
                label: "720p",
                width: 1280,
                height: 720,
                fps: 30,
                bitrate: 2500
            }
        },
        {
            protocol: "storm",
            streamName: "test_360p",
            streamInfo: {
                label: "360p",
                width: 640,
                height: 360,
                fps: 30,
                bitrate: 1000
            }
        }
    ]
}
                    

Explanation for streamInfo object: