Angular Implementation - Storm JavaScript Library

Below you’ll find a short tutorial on how to implement Storm Library using your own custom component in Angular Framework.

Requirements

• Node: 16.14+
• Angular: 16.0.0+

Installation

1. NPM:

                                   
   npm install @stormstreaming/stormlibrary
                               

2. Yarn:

                                   
   yarn add @stormstreaming/stormlibrary
                               

Sample Code

                        
import {
    StormLibrary as StormLibraryClass,
    StormStreamConfig,
    StormLibraryEvent
} from "@stormstreaming/stormlibrary";
import {
    Component,
    ElementRef,
    Input,
    OnDestroy,
    OnInit,
    ViewChild
} from '@angular/core';

@Component({
    selector: 'app-storm-library',
    template: ``
})

export class StormLibrary implements OnInit, OnDestroy {

    @ViewChild('target', {
        static: true
    }) target: ElementRef | undefined;

    // @ts-ignore
    @Input() streamData: {
        serverURL: string;
        applicationName: string;
        streamKey: string;
    };

    /**
     * Library ID
     */
    containerID: string = "stormContainer_" + Math.round(Math.random() * 1000);

    /**
     * Storm Library Configuration Object
     */
    streamConfig ? : StormStreamConfig;

    /**
     * Library itself
     */
    player ? : StormLibraryClass;

    constructor(
        private elementRef: ElementRef,
    ) {}

    ngOnInit() {

        if (!this.elementRef?.nativeElement.hasAttribute("id"))
            this.elementRef.nativeElement.setAttribute("id", this.containerID);
        else
            this.containerID = this.elementRef.nativeElement.getAttribute("id");

        this.streamConfig = {
            stream: {
                serverList: [{
                        host: this.streamData.serverURL,
                        application: this.streamData.applicationName,
                        port: 443,
                        ssl: true
                    } // this is where our storm server url goes
                ],
                streamKey: this.streamData.streamKey,
            },
            settings: {
                autoStart: true,
                video: {
                    containerID: this.containerID,
                    aspectRatio: "16:9",
                    width: "100%",
                    height: "100%",
                },
            },
        };

        // start StormLibrary
        this.player = new StormLibraryClass(this.streamConfig, true);
        this.player.addEventListener("playbackProgress", this.onPlaybackProgress)
        this.player.initialize();

    }

    onPlaybackProgress(event: StormLibraryEvent["playbackProgress"]) {
        console.log(`Library ID: ${event.ref.getInstanceID()} - Playback Progress Update`);
        console.log(`-- >: streamStartTime (source): ${event.streamStartTime}`);
        console.log(`-- >: streamDuration (source): ${event.streamDuration}`);
        console.log(`-- >: playbackStartTime (this stream): ${event.playbackStartTime}`);
        console.log(`-- >: playbackDuration (this stream): ${event.playbackDuration}`);
    };

    ngOnDestroy() {
        // destroy StormLibrary
        if (this.player) {
            this.player.removeEventListener("playbackProgress", this.onPlaybackProgress);
            this.player.destroy();
        }
    }
}
                    

Code Explanation

1. Imports:

                                   
   import {
       StormLibrary as StormLibraryClass,
       StormStreamConfig,
       StormLibraryEvent
   } from "@stormstreaming/stormlibrary";
   import {
       Component,
       ElementRef,
       Input,
       OnDestroy,
       OnInit,
       ViewChild
   } from '@angular/core';
                               

   These are the required imports that include Storm Library into your class, along with the required Angular classes.

2. Library & Stream Input Objects:

                                   
   / @ts-ignore
   @Input() streamData: {
       serverURL: string;
       applicationName: string;
       streamKey: string;
   };
                               

   These simplified parameters will be used to provide all required data to the library. Most settings will remain in this class however.

3. Assigning id to the parent container:

                                   
   if (!this.elementRef?.nativeElement.hasAttribute("id"))
       this.elementRef.nativeElement.setAttribute("id", this.containerID);
   else
       this.containerID = this.elementRef.nativeElement.getAttribute("id");
                               

   For the Storm Library to work properly a parent container must have an id attribute. We can either attach such ID to it, or use an existing one.

4. Library & Stream Config Objects:

                                   
   this.streamConfig = {
       stream: {
           serverList: [{
                   host: this.streamData.serverURL,
                   application: this.streamData.applicationName,
                   port: 443,
                   ssl: true
               } // this is where our storm server url goes
           ],
           streamKey: this.streamData.streamKey,
       },
       settings: {
           autoStart: true,
           video: {
               containerID: this.containerID,
               aspectRatio: "16:9",
               width: "100%",
               height: "100%",
           },
       },
   };
                               

   These are core Storm Library & Storm Stream configuration objects. You can learn more about configuring this section from the Storm Library - Connection Configuration guide.

5. Player object creation, event registration & initialization:

                                   
   // start StormPlayer
   this.player = new StormLibraryClass(this.streamConfig, true);
   this.player.addEventListener("playbackProgress", this.onPlaybackProgress)
   this.player.initialize();
                               

   In the first line we create new library instance. The last parameter forces the library to wait for “initialize()” method before starting its code. Between those two methods we can register events to interact with the library. The lists of supported events can be found in the Library Events and Playback Events sections. For a comprehensive description of the API, please refer to the API Methods section.

6. Sample event-listener callback method:

                                   
   onPlaybackProgress(event: StormLibraryEvent["playbackProgress"]) {
       console.log(`Library ID: ${event.ref.getInstanceID()} - Playback Progress Update`);
       console.log(`-- >: streamStartTime (source): ${event.streamStartTime}`);
       console.log(`-- >: streamDuration (source): ${event.streamDuration}`);
       console.log(`-- >: playbackStartTime (this stream): ${event.playbackStartTime}`);
       console.log(`-- >: playbackDuration (this stream): ${event.playbackDuration}`);
   };
                               

   A sample callback method for playbackProgress event.

Embedding the Library

In order to embed our component in Angular, we need register our component within our module declarations section.

                                
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import {StormPlayer} from "./StormPlayer";

@NgModule({
  ...
  declarations: [
    ...
    StormPlayer
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
}
                            

One that part is done, we can use the following code to inject library into a page:

                                
<app-storm-library
    [streamData]="{serverURL: 'localhost', applicationName: 'live', streamKey:'test'}"
>
</app-storm-library>