@cotufa82/ng-ivs

NG-IVS

This library adds support and a component to use Amazon IVS Player + Video.js with Angular.

Amazon IVS is a fully managed live streaming solution: simply stream to Amazon IVS, and the service does everything you need to make low-latency live video available to any viewer around the globe. Amazon IVS handles the ingestion, transcoding, packaging, and delivery of your live content, using the same battle-tested technology that powers Twitch.

Prerequisites

Amazon IVS SDK supports Javascript only. This means that there are no type declarations. Since Angular projects are written in Typescript, and the typescript compiler is strict, we need to disable the mechanisms that will validate imported types, upon compilation.

Add the following to tsconfig.json

...
  "compilerOptions": {
    "skipLibCheck": true,
  ...
  }
...

Installing

Adding ng-ivs to your project is as simple as running one command:

npm i --save @cotufa82/ng-ivs

Getting Started

To use the player, you only need to add the component:

<vjs-ivs-player
  [options]="options"
  [appChanEndpoint]="'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8'"
></vjs-ivs-player>

Options

appChanEndpoint is the Endpoint URL for the video.

We create an Interface to use the config and options in an easy way

export interface Options {
  fluid: boolean;
  aspectRatio: string;
  autoplay: boolean;
  controls: boolean;
  sources: {
    src: string;
    type: string;
  }[]
}

Example:

options ={
    sources: [{
      src: 'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8',
      type: 'application/x-mpegURL'
    }],
    fluid: true,
    aspectRatio: '16:9',
    autoplay: true,
    controls: true,
} 

CSS

By default no CSS options are included but should you want to use the CSS provided by Video.js just add this to your index.html HEAD:

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />