Include hls.js library in an Angular application

Question

I'm trying to include Videogular2 module to my Angular application and I keep getting an error with hls.js. I have followed the Getting started guide but I'm receiving this error in the developer console :

ERROR ReferenceError: Hls is not defined
    at VgHLS.webpackJsonp.../../../../videogular2/src/streaming/vg-hls/vg-hls.js.VgHLS.createPlayer (vg-hls.js:56)
    at VgHLS.webpackJsonp.../../../../videogular2/src/streaming/vg-hls/vg-hls.js.VgHLS.ngOnChanges (vg-hls.js:45)
    at checkAndUpdateDirectiveInline (core.es5.js:10840)
    at checkAndUpdateNodeInline (core.es5.js:12339)
    at checkAndUpdateNode (core.es5.js:12278)
    at debugCheckAndUpdateNode (core.es5.js:13139)
    at debugCheckDirectivesFn (core.es5.js:13080)
    at Object.eval [as updateDirectives] (WatchComponent.html:22)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
    at checkAndUpdateView (core.es5.js:12245)

I've executed this command first

yarn add videogular2 dashjs hls.js

I've added scripts path in .angular-cli.json

"scripts": [
    "../node_modules/dashjs/dist/dash.all.min.js",
    "../node_modules/hls.js/dist/hls.min.js"
]

Imports needed modules in app.module.ts

imports: [
    BrowserModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
    VgStreamingModule
]

Added the HTML file (using a component), where movie is a property of the component.

<vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <vg-scrub-bar>
        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>
    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>
        <vg-scrub-bar></vg-scrub-bar>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>
        <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video [vgDash]="movie?.asset" [vgHls]="movie?.asset"></video>
</vg-player>

Any idea where to look at to resolve this issue?

Thank you

EDIT

I also use jQuery and OwlCarousel2 library.

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/owl.carousel/dist/owl.carousel.min.js",
    ...
]

The entire library seems to be written natively in typescript. Why not just use uncompiled typescript like you would any other angular component/module? https://github.com/videogular/videogular2/blob/master/src/streaming/vg-hls/vg-hls.ts — diopside, Aug 23 '17 at 14:42
I think the issue is not coming from Videogular2 library. Here the issue is that Videogular somehow can't found `hls.js` library and I don't know why. What the point of using the uncompiled version? — Ismael, Aug 23 '17 at 14:59
I understand what you mean, but if I want to use `HLS` or/and `Dash` stream I need to import `hls.js` or/and `dashjs` - https://videogular.github.io/videogular2/modules/streaming/vg-hls/ - And I want to play a HLS stream — Ismael, Aug 23 '17 at 16:42

score 3 · Answer 1 · answered Dec 23 '21 at 15:51

When I use declare var Hls, the console shows the variable is not defined. It takes me a while and the sample usage is initially from the shaka player implementation with Angular. Please download the HLS.js and put "node_modules/hls.js/dist/hls.min.js.map" in the Angular.json scripts array.

Here is the HTML code:

<div #videoContainer id="videoContainer">
    <h1>HLS JS Player</h1>
    <!-- declare the #videoPlayer as a used input -->
    <video #videoPlayer id="videoPlayer" width="352" height="198" controls autoplay playsinline></video>
</div>

Here is the component code:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import Hls from 'hls.js';

// your component
@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.scss']
})

// called after Angular has fully initialized a component's view.
export class VideoPlayerComponent implements AfterViewInit {
  // access the declared DOM element; expose all methods and properties
  @ViewChild('videoPlayer') videoElementRef!: ElementRef;
  
  // declare and inherit the HTML video methods and its properties
  videoElement!: HTMLVideoElement;

  constructor() { }

  ngAfterViewInit(): void {
    // the element could be either a wrapped DOM element or a nativeElement
    this.videoElement = this.videoElementRef?.nativeElement;

    if (Hls.isSupported()) {
      console.log("Video streaming supported by HLSjs")
      

      var hls = new Hls();
      hls.loadSource('https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8');
      hls.attachMedia(this.videoElement);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        this.videoElement.play();
      });
    }

    else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
      // alert("You're using an Apple product!");
      this.videoElement.src = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
    }
  }
}

Please correct me if anything is wrong.

After upgrading to angular 14 the hls.js starts throwing an error in production -- "Uncaught TypeError: Cannot read properties of undefined (reading 'call')". But works fine with dev. This is the issue with optimisation. Still throwing error after adding the dependency in commonJs. — Gokul, Mar 22 '23 at 00:01
The trend is going to the ESM (ES Modules) with Typescript, so it's necessary to declare types forehead. Indeed, I also bumped into commonJS optimization issues from time to time in Angular 15. — Woden, Mar 22 '23 at 01:28
I have fixed mine by importing the minified js rather than waiting it to be minified during the optimisation. Definitely there is something going on with the cli from ng13 to ng14 — Gokul, Mar 23 '23 at 00:25

score 2 · Answer 2 · answered Feb 01 '19 at 02:04

2

You only need to add the following line in your component.ts file:

declare var Hls;

after the import clauses and before the @Component decorator.

answered Feb 01 '19 at 02:04

Giuseppe

464
13
24

Include hls.js library in an Angular application

2 Answers2