DEV Community: Amazon IVS

Build an Angular & Amazon IVS player app in less than 15 minutes!! - Part 2: Create and stream to a channel!

Super Diana — Fri, 30 Jul 2021 14:26:53 +0000

Intro ⭐️

Video & Streaming don't have to be complicated for the web anymore! In part 1 of this tutorial, we built an Angular app using Amazon IVS & Video.js in less than 15 minutes. Now it's time to create a channel, point our stream to that channel, test it live, and continue creating!

Amazon IVS (Amazon Interactive Video Service) 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.

For more information on Amazon IVS, check https://ivs.rocks

Part 1 of this tutorial: https://dev.to/amazonivs/build-an-angular-amazon-ivs-player-app-in-less-than-15-minutes-2668

Hands on! 👊🏼

⚡️ Pre-requisites:

Build your player app in 15 minutes with Part 1 of this tutorial
AWS Account:(Click to create your account!)
OBS (Open Broadcaster Software):(download here)

Create Live Streaming Channel 📽

In this step, you will create a live streaming channel using Amazon Interactive Video Service.

On the AWS console, navigate to Interactive Video Service via this link

Click on "Create Channel"
In the create channel > set up section, type your channel name (i.e 'ngivs-channel'). Under Channel configuration, choose "Default". You can customise options as you find appropriate but default options are set for HD video and ultra-low latency!. You can also auto-record your stream to an S3 bucket and serve those assets as VOD, but for now we won't enable this option.
This is the result after creating a channel!, note that once a channel is created it has a unique ARN in case you need API Access for other features we will cover in future issues of this tutorial.
On the same page you can see under Stream Configuration and Playback Configuration important information we will use to point our stream to and include our video source in our player app.

🎉 HOORAY! A channel has been created... let the streaming begin! 🎉

Stream Using OBS

Open OBS, click on "Settings" and select Stream. Set Service as Custom. Copy/paste the Ingest server to the "Server", and copy/paste the Stream key to "Stream Key".

Click on "Video", and configure the output video bitstream’s resolution and frame rate. In this example, they are set to 480p30 (852x480). For testing purposes, this is the recommended setting for a smooth stream with minimal bandwidth and processing power consumption on your computer).

And last, click on "Output". On "Ouput Mode" select "Advanced", then set the following parameters: (don't forget to click "OK" to save your settings!) - These settings are exclusively for testing purposes and to make sure we use bare minimum resources.- For more information on streaming configurations check the official documentation
- Encoder: x264
- Rate Control: CBR
- Bitrate: 2000 (or lower)
- Keyframe Interval: 2
- CPU Usage Preset: veryfast
- Tune: zerolatency

Almost there!!. Our last step is to add our camera as a source for this test!

On your OBS main window, in "Sources", click "+" to add the following sources:
- Video Capture Device: your web cam.
- Browser: Add https://www.clocktab.com/, which will be used to measure the end-to-end latency. Drag and resize to place it where you find appropriate.

It's time to click on "Start Streaming"!!!

Let's open the angular app project created with the previous tutorial and modify the player source in our application default component to add our own streaming channel.

In order to do that let's edit app.component.html,

<vjs-ivs-player
  [options]="options"
  [appChanEndpoint]="'[INSERT YOUR PLAYBACK URL HERE]"
></vjs-ivs-player>

And Voila!

🌟 For the next part of this tutorial we will enable playback authorisation on our IVS channel. This allows us to create private channels, and only viewers with a valid playback token can watch our channel.

Announcement: Amazon IVS is on Discord!

Super Diana — Tue, 27 Jul 2021 03:18:02 +0000

Dear community, 🎊

We are happy to announce our Discord server, and we welcome all of you! This is a place to share your experience, ideas, solutions and interact with fellow developers and us too!.

There are SO MANY exciting things coming up for our community!. We want you to be part of all the great features and special announcements we have coming up.

Join us in this new adventure! Let's have a chat!

See you there!

The Amazon IVS Developer Relations Team ⭐️

Build an Angular & Amazon IVS player app in less than 15 minutes!!

Super Diana — Tue, 06 Jul 2021 13:26:58 +0000

Intro ⭐️

Video & Streaming don't have to be complicated for the web anymore! in this tutorial we will build an Angular app using Amazon IVS & Video.js in less than 15 minutes!!

Amazon IVS (Amazon Interactive Video Service) 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.

For more information on Amazon IVS check https://ivs.rocks

Check the twitch stream of this tutorial: https://www.youtube.com/watch?v=xCsh88xNkKE

15 minutes... for real?! ⏰

I have a personal quest of making infrastructure and development approachable, accessible and friendly regardless of your level of expertise. For that reason, I am happy to present you with a library that will simplify the process of building a player with Angular and Amazon IVS in less than 15 minutes!!

Hands on! 👊🏼

⚡️ Pre-requisites:

NodeJS + NPM: instructions to set up/install
Angular CLI
Amazon IVS
VideoJS

Installing The Angular CLI

If you’re wondering how it’s possible to create an Angular project or app in less than 10 mins, it’s partially thanks to its very sophisticated and developer-centric CLI. If you haven’t already, please install the CLI globally. That ensures you have all necessary dependencies to quickly generate a new app.

Install the Angular CLI with npm:

npm install -g @angular/cli

Now we are ready to generate a fully functional base Angular application.

Creating our Angular Application

Create a new project. I will name it "angular-ivs", but you feel free to name it whatever you want!

We create a new app by typing and executing

ng new <APP-NAME>

In my case,

ng new angular-ivs

Working our magic ⭐️

Once our app is created, let's head to our project folder:

cd angular-ivs

Now we will install ng-ivs. This library makes your development process much easier by installing Amazon IVS, Video.js and generating a player component you can customise to meet your project requirements.

To install it, move into the root directory of the angular app you just created, and execute

npm install @cotufa82/ng-ivs --save

Customising our Application

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:

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

Now we will add the player to our application default component. In order to do that let's edit app.component.html,

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

For this tutorial I am using a test stream url from the Amazon IVS Samples repository. The awesome thing about this is that you can pass this URL directly in the component or trough options.source or using the environments from Angular.

Now, let's import our NgIvsModule module in app.module.ts. Your code should look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgIvsModule } from '@cotufa82/ng-ivs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgIvsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then, create an interface to set configurations and options for the player in app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular-IVS';

  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,
} 

}

These options are standard options for Video.js and you can find more information in the docs.

At this point we have a functional player app, you can customise the CSS for your player or just use the default options by adding this to the head tag of index.html

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

Ready to celebrate? Let's startup a server and see our app live in the browser! The angular CLI allows us to both build and serve our app on a default port, by executing

ng serve --open

You should see something like this:

🎊🎉

And that's all folks!! A fully functional player app implementing Angular and Amazon IVS!

Can't wait to read your comments and see what you can create!!!

Build an Amazon IVS Player App with Ionic-Vue

Super Diana — Tue, 08 Jun 2021 21:40:03 +0000

Intro ⭐️

I wanted to build a quick and easy Amazon IVS video player mobile app for future streams and other interesting experiments. This is the first part of a series of tutorials where I will be expanding on features of this app!.

Building native mobile apps can be beginner friendly and an enjoyable experience!. For that reason I've chosen Ionic as my framework of choice because of its simplicity combined with Vue JS, a friendly javascript framework.

Wait, but what about the video part? 🤔

To continue with keeping things simple, developer friendly and approachable, let's look at a new service offered by AWS: Amazon Interactive Video Service or IVS. It's a managed live video streaming service that allows us to:

Create channels and start streaming in minutes.
Create engaging and interactive experiences along with ultra-low latency live video.
Distribute video at scale to a variety of devices and platforms.
Easily integrate into websites and applications.

Amazon IVS allows us to focus on creating our own interactive application and audience experience and we don't need to manage infrastructure or develop and configure components, making it reliable and cost-effective.

Amazon IVS supports RTMPS streaming. RTMPS is the secure version of RTMP (Real Time Messaging Protocol), which runs over TLS. RTMP is an industry standard for transmitting video over a network.

So we are using Ionic-Vue + Amazon IVS to create a mobile player app!

Tutorial repo: https://github.com/alphacentauri82/ivs-ionic-vue

Twitch stream: https://www.youtube.com/watch?v=CeKTr83LmiY

Let's get it started 🎵

⚡️ Pre-requisites:

NodeJS + NPM: Ionic has amazing instructions to set up/install
Ionic CLI
Amazon IVS
VideoJS

Installing Ionic CLI

Install the Ionic CLI with npm:

npm install -g @ionic/cli

If there was a previous installation of the Ionic CLI, it will need to be uninstalled due to a change in package name.

npm uninstall -g ionic
npm install -g @ionic/cli

Creating our App

Make sure you're in your desired folder for this project and then run:

ionic start hello-ivs tabs --type vue --capacitor

An Ionic-Vue application will be created. Note we used the flag tabs to use a starter template with "Tabs". We also added Capacitor to give native functionality.

This starter project comes with three pre-designed pages and best practices for Ionic development - with the common building blocks already implemented, we can easily add more features!.

As this process continues, you will be asked if you want to create an Ionic account, if you type "Y + Enter" it will take you to https://ionicframework.com/signup and if you type "No + Enter" it will continue its process smoothly.

Now that the project is created, let's get in our project folder:

cd hello-ivs

🎊 ...And it's time to celebrate our first achievement!, we have a full starter app to add our player to! 🎊

Hands On! 🛠

Open your IDE/editor of choice and you should see the following structure:

Let's go to the /src folder:

There are 4 folders and 3 files. Let's go through what we see:

Components: This is where our components are stored, it will serve us to create our child component where we will have our video player.
Router: Defines the specific routes of our application.
Theme: This is where we define all styles and the look of our app.
Views: This is where we structure our app views.

Let's cd to the default component:

cd src/components/ExploreContainer.vue

And delete line #4 - Let's replace it with

<p>Hello IVS!</p>

It's time to see our "Hello IVS" App and make sure everything works so let's run"

ionic serve

It will take a few seconds to build and then we can see a web preview. We can resize it to simulate different mobile devices in the browser:

Web Preview

Mobile

Since we don't need Tabs in this first version of the application we will delete the other two and leave a single tab for now.

To do that, we need to edit Tabs.vue in the /views folder, and in the <template> block, delete from line #10 to #18 leaving just a single tab like this:

<template>
  <ion-page>
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon :icon="triangle" />
          <ion-label>Tab 1</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

Let's save our file and our app will reload displaying this:

Adding Video to our App 🎥

Stop the presses! Let's hit ctrl + c In our terminal. We have to install a few dependencies to continue developing our project.

First of all, let's install VideoJS. At the time of making this tutorial, to make sure it works with Amazon IVS we need to install version 7.6.6:

npm i video.js@7.6.6

And then proceed to install Amazon IVS

npm i amazon-ivs-player

Creating the video player 🔥

Let's edit our ExploreContainer component located in the src/components folder.

Let's import our dependencies. We do this in the <script> block, but first delete lang="ts" since we won't be using Typescript. From line #8 it should look like this:

<script>
import videojs from 'video.js';
import { registerIVSTech } from 'amazon-ivs-player';
import 'video.js/dist/video-js.css';

And to make things more consistent, let's rename our default ExploreContainer component to VideoPlayer, edit line #13 and the script tag should look like this:

<script>
import videojs from 'video.js';
import { registerIVSTech } from 'amazon-ivs-player';
import 'video.js/dist/video-js.css';

export default {
  name: 'VideoPlayer',
  props: {
    name: String
  }
}
</script>

Before anything else, we also have to rename the file to VidePlayer.vue and then proceed to modify our parent component Tab1.vue and add the correct name. For this we edit src/views/Tab1.vue. Our file should look like this:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Live Stream</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Live Stream</ion-title>
        </ion-toolbar>
      </ion-header>
      <VideoPlayer />
    </ion-content>
  </ion-page>
</template>

<script>
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import VideoPlayer from '@/components/VideoPlayer.vue';
export default  {
  name: 'LiveStream',
  props: {
    autoplay: Boolean
  },
  components: { VideoPlayer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
}
</script>

Now let's head to the router folder and in index.ts delete the lines that define the routes of the tabs that we no longer need. so the file should look like this:

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import Tabs from '../views/Tabs.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/tabs/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: '/tabs/tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Now we can add our data to be able to effectively use Amazon IVS in src/components/VideoPlayer.vue, the file from line #13 should look like this:

export default {
    name: 'VideoPlayer',
    props: {
      name: String
    },
    data: () => ({
      player: null,
      videoSource: process.env.VUE_APP_PLAYER_URL,
      videoOptions: {
        autoplay: true,
        controls: true,
        techOrder: ["AmazonIVS"],
        width: "800"
      },
    }),

Let's stop to explain a few things:

player: Variable that will store the properties of video.js to use Amazon IVS objects.
videoSource: This is the environment variable that will allow us to connect to a test stream. In this case we will pass a player URL.
videoOptions: This is the object that we will use to have control over the Amazon IVS technology layer.

After defining our data we are going to follow the life cycle of a component in Vue, we are going to use the mounted() hook to start it after all the elements have loaded.

mounted() {
    // register the tech with videojs
    console.log(`wasmWorker: ${this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.js')}`)

    registerIVSTech(videojs,  {
      wasmWorker: this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.js'),
      wasmBinary: this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.wasm'),
    });

    // Init the player
    this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {
      console.log('Player is ready to use!');
      // play the stream
      this.player.src(this.videoSource);
    })
  },

registerIVSTech: Is the object we declare to consume the Amazon IVS service.
Videojs: Is the object provided by Video.js.
options: Options for the Amazon IVS technology layer.

The supported options are:

wasmWorker: URL where amazon-ivs-wasmworker.min.js is located.
wasmBinary: URL where amazon-ivs-wasmworker.min.wasms is located.

These files are located in node_modules/amazon-ivs-player/dist/. We need to copy and paste them into the public/assets folder to use the IVS player.

Then we use the beforeUnmount hook in order to have a conditional that allows us to show if the player instance is being consumed or if not the instance is destroyed.

beforeUnmount() {
    // Destroy the player instance
    if(this.player) {
      this.player.dispose();
    }
  },

  methods: {
    createAbsolutePath(assetPath) {
      console.log( document.URL );
      return new URL(assetPath, document.URL).toString();
    },
  }

The createAbsolutePath method allows us to create a specific path, with this method we can consume the files stored in public/assets.

Let's create our container and reference VideoPlayer to be able to receive the video with video.js like this. Let's go back to the beginning of the file, in the <template> block and replace the contents of everything contained in <div> like this:

<template>
  <div id="container">
    <video ref="videoPlayer" class="video-js"></video>   
  </div>
</template>

And then style it! - Let's edit the style block in line #61:

<style scoped>
#container {
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>

And finally let's create a .env (dot env) file and save it in the root folder of the project with the following information.(For now, we are going to pass a player URL from one of the sample players in the Amazon IVS Demos Repository.

VUE_APP_PLAYER_URL='https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8'

🎉 Celebration 🎉

Let's save our work and run:

ionic serve

you should see a result similar to this:

We will continue to develop more features in this same application so stay tuned for more!!!