@cotufa82/ng-ivs
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    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" />
    

    Keywords

    none

    Install

    npm i @cotufa82/ng-ivs

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    none

    Unpacked Size

    901 kB

    Total Files

    17

    Last publish

    Collaborators

    • jorgeucanoeulerr
    • superdiana