Installation - Storm JS Player Core

Storm CDN

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

CDN Script

html

Copy

<script src="https://cdn-scripts.stormstreaming.com/player-core/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 JS Player Core into your project using NPM, execute the following command:

   NPM

   bash

   Copy

   npm install @stormstreaming/player-core
   

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

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

   Yarn

   bash

   Copy

   yarn add @stormstreaming/player-core
   

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-core-js/releases.

Embedding the Player

Storm JS Player Core 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, an instance can be finally created. Please keep in mind that you can create and manage multiple instances of Storm JS Player Core at a time. Each instance requires a valid configuration object in order to work properly.

Configuration object

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: 8080,                      // 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
        video: {
            containerID: "videoContainer",   // Element ID of the parent container
            width: "100%",                   // Initial width of the player
            aspectRatio: "16:9"              // Enforced aspect ratio
        },
    },
};

Initialization will look different depending on picked JavaScript format:

1. IIFE (Immediately invoked function expression):

   IIFE

   javascript

   Copy

   const storm = stormPlayerCore(streamConfig);
   

2. ESM (ECMAScript Modules):

   ESM

   javascript

   Copy

   import {StormPlayerCore} from "../../dist/esm/index.js";
   const storm = new StormPlayerCore(streamConfig);
   

3. UMD (Universal Module Definition):

   UMD

   javascript

   Copy

   const storm = stormPlayerCore.create(streamConfig);
   

4. AMD (Asynchronous Module Definition):

   AMD

   javascript

   Copy

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