3

I follow the basic usage of shaka that works with DASH video, but throws an Error code 4032 when trying to load a M3U8.

import * as muxjs from 'mux.js';
import * as shaka from 'shaka-player';

export class AppComponent implements AfterViewInit {
  @ViewChild('videoPlayer') videoElementRef: ElementRef;
  videoElement: HTMLVideoElement;

  manifestUri = 'http://hlsliveamdgl7-lh.akamaihd.net/i/hlsdvrlive_1@583042/master.m3u8';


  ngAfterViewInit() {
    shaka.polyfill.installAll();
    this.videoElement = this.videoElementRef.nativeElement;
    this.initPlayer();
  }

  private initPlayer() {
    shaka.media.ManifestParser.registerParserByExtension("m3u8", shaka.hls.HlsParser);
    shaka.media.ManifestParser.registerParserByMime("Application/vnd.apple.mpegurl", shaka.hls.HlsParser);
    shaka.media.ManifestParser.registerParserByMime("application/x-mpegURL", shaka.hls.HlsParser);


    let player = new shaka.Player(this.videoElement);


    player.load(this.manifestUri).then(() => {
      // This runs if the asynchronous load is successful.
      console.log('The video has now been loaded!');
    }).catch(this.onError);  // onError is executed if the asynchronous load fails.
  }

The template is

  <video #videoPlayer
     id="video"
     width="640"
     poster="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"
     controls> </video>

The relevant Angular 9 dependencies are

 "shaka-player": "^3.0.1",

and also installed (maybe unnecessary)

"hls.js": "^0.13.2",
"mux.js": "^5.6.4",

On Safari it works, not on Chrome. I think I am missing something, related to mux.js.

Any hint? Thanks so much!

Arco Voltaico
  • 860
  • 13
  • 29

2 Answers2

6

It turns out, it works by simply adding this

<script src="https://github.com/videojs/mux.js/releases/latest/download/mux.js"></script>

to Angular's index.html. The import does not work. No additional config to be done. Shaka will detect it and use it.

But as I want to keep the dependency inside the app. I copied the js into the assets folder (as referencing from node modules does not work.

<script defer src="assets/mux.min.js"></script>

Sadly referencing from from angular.json scripts does not work either.

Arco Voltaico
  • 860
  • 13
  • 29
2

Try this for import to keep the dependency:

import muxjs from 'mux.js';

interface MyWindow extends Window {
    muxjs: string;
}

(window as MyWindow & typeof globalThis).muxjs = muxjs;
Märt
  • 21
  • 1