Installation - Storm JS Player UI

Storm CDN

Feel free to pick our Storm Player (in IIFE format) from our CDN:

CDN Script

html

Copy

<script src="https://cdn-scripts.stormstreaming.com/player-ui/1-latest.min.js"></script>

Optionally you can link to the latest major.minor, for example 1.0-latest.min.js, or pick specific release: 1.0.0.min.js

Installation via Package Managers

1. NPM: Before using NPM, please install Node.js.

   To integrate Storm Player into your project using NPM, execute the following command:

   NPM

   bash

   Copy

   npm install @stormstreaming/player-ui
   

2. Yarn: Yarn must be installed before use, which you can do via NPM.

   To incorporate Storm Player into your project using Yarn, execute the following command:

   Yarn

   bash

   Copy

   yarn add @stormstreaming/player-ui
   

Manual Installation

You can manually grab index.js from /dist/iife folder on our GitHub page. You will find the latest release here: https://github.com/StormStreaming/player-ui-js/releases

Source Codes

Storm Player comes with all source-codes available for free. Player can be easily modified and customized according to needs. In order to recompile the player NPM is required. Below you'll find basic usage.

Install dependencies

bash

Copy

npm install

This command will install all required dependencies.

Build project

bash

Copy

npm run build

Compiles all styles, script and html. Generated files will be placed within the dist folder.

Development mode

bash

Copy

npm run dev

Watches for changes in files and compiles code to executable JavaScript. A local HTTP server will be started as well.

Embedding the Player

Storm Player comes in IIFE, ESM, AMD, UMD and CJS formats. If you are unfamiliar with these, please grab IIFE version, as it's easiest to embed in a modern browser. All packages are located in /dist folder under their respective names.

Initiating the Player

Once the player is properly linked to your page, a player instance can be created. Please keep in mind that you can create and manage multiple instances of Storm Player at a time. Each instance requires a valid configuration object in order to work properly.

Configuration objects

javascript

Copy

const streamConfig = {
    stream: {
        serverList: [{
            host: "localhost",           // Host or IP address of the Storm Streaming Server/Cloud
            application: "live",         // Application name on the Storm Streaming Server/Cloud
            port: 80,                    // Port used by the Storm Streaming Server/Cloud
            ssl: false                   // Whether to use an SSL or non-SSL connection
        }],
        streamKey: "test"                // StreamKey we want to connect to
    },
    settings: {
        autoStart: true,                 // Whether the stream should start automatically
    },
};

const playerConfig = {
    containerID: "container",            // Element ID of the parent container
    width: "100%",                       // Initial width of the player
    aspectRatio: "16:9",                 // Enforced aspect ratio
    title: "My First Livestream",
    subtitle: "Join me on my first ever live stream",
};

Initialization will look different depending on picked JavaScript format:

1. IIFE (Immediately invoked function expression)

   IIFE

   javascript

   Copy

   const player = stormPlayerUI(playerConfig, streamConfig);
   

2. ESM (ECMAScript Modules)

   ESM

   javascript

   Copy

   import {StormPlayer} from "../../dist/esm/index.js";
   const storm = new StormPlayerUI(playerConfig, streamConfig);
   

3. UMD (Universal Module Definition)

   UMD

   javascript

   Copy

   const storm = stormPlayerUI.create(playerConfig, streamConfig);
   

4. AMD (Asynchronous Module Definition)

   AMD

   javascript

   Copy

   requirejs(['../../dist/amd/index'], function(storm) {
       const stormPlayer = new storm.create(playerConfig, streamConfig);
   });