@cotufa82/ng-ivs v0.1.0
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" />