Angular Implementation - Storm JS Player Core

Below you'll find a short tutorial on how to implement Storm JS Player Core using your own custom component in Angular Framework.

Requirements

Node: 16.14+
Angular: 16.0.0+
@stormstreaming/player-core: 1.x

Installation

NPM

bash

npm install @stormstreaming/player-core

Yarn

bash

yarn add @stormstreaming/player-core

Sample Code

Storm JS Player Core Angular Component

typescript

import {
    StormPlayerCore as StormPlayerCoreClass,
    StormStreamConfig,
    StormPlayerCoreEvent
} from "@stormstreaming/player-core";
import {
    Component,
    ElementRef,
    Input,
    OnDestroy,
    OnInit
} from '@angular/core';

@Component({
    selector: 'app-storm-player-core',
    template: `<div id="{{containerID}}"></div>`
})

export class StormPlayerCore implements OnInit, OnDestroy {

    @Input({ required: true }) streamData!: {
        serverURL: string;
        applicationName: string;
        streamKey: string;
    };

    /**
     * Player Core ID
     */
    containerID: string = "stormContainer_" + crypto.randomUUID();

    /**
     * Storm JS Player Core Configuration Object
     */
    streamConfig?: StormStreamConfig;

    /**
     * Player Core itself
     */
    player?: StormPlayerCoreClass;

    ngOnInit() {

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

        // start Storm JS Player Core
        this.player = new StormPlayerCoreClass(this.streamConfig, true);
        this.player.addEventListener("playbackProgress", this.onPlaybackProgress);
        this.player.initialize();

    }

    onPlaybackProgress = (event: StormPlayerCoreEvent["playbackProgress"]) => {
        console.log(`Player Core 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 Storm JS Player Core
        if (this.player) {
            this.player.removeEventListener("playbackProgress", this.onPlaybackProgress);
            this.player.destroy();
        }
    }
}

Code Explanation

Imports:

Imports

typescript

import {
    StormPlayerCore as StormPlayerCoreClass,
    StormStreamConfig,
    StormPlayerCoreEvent
} from "@stormstreaming/player-core";
import {
    Component,
    ElementRef,
    Input,
    OnDestroy,
    OnInit
} from '@angular/core';

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

Player Core & Stream Input Objects:
Input objects
typescript
```
@Input({ required: true }) streamData!: {
    serverURL: string;
    applicationName: string;
    streamKey: string;
};
```
These simplified parameters will be used to provide all required data to the player. The required: true option ensures that Angular will throw an error if the component is used without providing streamData. Most settings will remain in this class however.
Component template with container:
Component template
typescript
```
@Component({
    selector: 'app-storm-player-core',
    template: `<div id="{{containerID}}"></div>`
})
```
The component template contains a div element with a dynamically assigned ID. Storm JS Player Core uses this container to render the video element inside it.

Player Core & Stream Config Objects:

Config objects

typescript

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

These are core Storm JS Player Core & Storm Stream configuration objects. You can learn more about configuring this section from the Storm JS Player Core - Stream & Server Configuration guide.

Player object creation, event registration & initialization:
Initialization
typescript
```
// start Storm JS Player Core
this.player = new StormPlayerCoreClass(this.streamConfig, true);
this.player.addEventListener("playbackProgress", this.onPlaybackProgress);
this.player.initialize();
```
In the first line we create new Player Core instance. The last parameter forces the player to wait for initialize() method before starting its code. Between those two methods we can register events to interact with the player. The lists of supported events can be found in the Core Events and Playback Events sections. For a comprehensive description of the API, please refer to the API Methods section.

Sample event-listener callback method:

Event callback

typescript

onPlaybackProgress = (event: StormPlayerCoreEvent["playbackProgress"]) => {
    console.log(`Player Core 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. Note the arrow function syntax which preserves the correct this context when the callback is invoked by the player.

Embedding the Player

Module-based approach (NgModule)

In order to embed our component in Angular using the traditional module-based approach, we need to register our component within the module declarations section.

Module registration

typescript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

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

Standalone approach (Angular 16+)

If your project uses standalone components (default for new Angular 16+ projects), simply add the standalone: true flag to the component decorator:

Standalone component

typescript

@Component({
    selector: 'app-storm-player-core',
    standalone: true,
    template: `<div id="{{containerID}}"></div>`
})
export class StormPlayerCore implements OnInit, OnDestroy {
    // ... rest of the component code remains the same
}

Then import it directly in the parent component:

Standalone import

typescript

import { StormPlayerCore } from "./StormPlayerCore";

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [StormPlayerCore],
    template: `
        <app-storm-player-core
            [streamData]="{serverURL: 'sub1.example.com', applicationName: 'live', streamKey:'test'}"
        ></app-storm-player-core>
    `
})
export class AppComponent { }

Component usage

Once registered, you can use the following code to embed the player into a page:

Component usage

html

<!-- Replace serverURL with your Storm Streaming Server or Cloud host address -->
<app-storm-player-core
    [streamData]="{serverURL: 'sub1.example.com', applicationName: 'live', streamKey:'test'}"
>
</app-storm-player-core>

Next Step

For the next step please check our Storm JS Player Core - Stream & Server guide where you'll learn how to connect player with Storm Streaming Cloud or Server instance.