Como crear tu página para streaming de vídeo
Tags: aws
Published: 2022-09-08 22:34:32

AWS ofrece diferentes tipos de servicios para muchos tipos de soluciones. En este post vamos a crear una pagina de streaming de video utilizando los siguientes servicios:

* Amazon Interactive Video Service.
* S3.
* Y utilizaremos la aplicación [Larix Broadcaster](https://play.google.com/store/apps/details?id=com.wmspanel.larix_broadcaster&hl=es_CO&gl=US) para realizar la transmisión de nuestro streaming.

Comencemos con la creación de nuestro canal buscando el servicio IVS (Amazon Interactive Video Service), en la pagina principal seleccionamos _Channels_:

![IVS](https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/ivs.png?raw=true)

Damos click en Create Channel

![Create Channel](https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/create%20channel.png?raw=true)

En la siguiente pagina vamos a configurar nuestro canal.Le asignamos un nombre, definimos el tipo de canal, su latencia; no vamos a configurar un token de autorización con el objetivo de ver el streaming desde la consola de AWS.

![Config Channel]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/setup%20channel.png?raw=true)

En la sección de almacenamiento no vamos a seleccionar que nuestro streaming se almacene en S3. Damos click en guardar.

![Save Channel]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/create%20setup%20channel.png?raw=true)

Una vez creado nuestro canal vamos a ver una pagina con toda la información de configuración y los datos necesarios para empezar a realizar el streaming. En este momento nos vamos a enfocar en los datos de Stream key e Ingest Server.

Lo primero que debemos hacer es instalar la aplicación [Larix Broadcaster](https://play.google.com/store/apps/details?id=com.wmspanel.larix_broadcaster&hl=es_CO&gl=US), después vamos a la siguiente pagina [Larix Grove-compliant URL](https://softvelum.com/larix/grove/) que nos va a servir para generar el link del cual vamos a hacer el streaming.

Ya en la pagina de Web vamos a copiar en el campo URL los valores de Ingest Server seguido del Stream Key.

![QR Code]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/qr%20code.png?raw=true)

Una vez pegados el Ingest Server y el Stream Key en el campo URL, debemos escanear el código QR y abrir el link desde la aplicación **Larix**.Una vez dentro de la aplicación damos click en el botón grabar.

![Larix App]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/larix%20app.jpg?raw=true)

Dentro de la consola de AWS podemos ir a _Live channels_ para ver los canales que están transmitiendo en vivo o dentro de nuestro canal en la sección Live Stream.

![Stream]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/live%20stream.png?raw=true)

Con los pasos anteriores creamos un canal para streaming y logramos transmitir hacia él. El siguiente paso es crear una pagina web en donde podamos ver nuestro streaming.

Para eso vamos a crear un bucket en S3 (recuerden que el nombre es único en todo AWS).

![Name Bucket]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/name%20bucket.png?raw=true)

Definimos que el bucket sea publico.

![Name Bucket]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/public%20bucket.png?raw=true)

Creamos el bucket

![Name Bucket]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/save%20bucket.png?raw=true)

Ahora debemos configurar nuestro bucket como un sitio web estático, para esto vamos a la pestaña _Properties_ y en la sección _Static website hosting_ damos click en el botón editar.

![Static Web Hosting]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/static%20web%20hosting.png?raw=true)

En el campo _Index document_ colocamos el nombre del archivo principal por el cual se va tener acceso al bucket _index.html_ y guardamos los cambios.

![Configure Static Web Hosting]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/configure%20static%20web%20hosting.png?raw=true)

Nos hace falta modificar la política del bucket para que podamos ver nuestro sitio publico en internet. 
Vamos a la pestaña _Permissions_ a la sección _Bucket policy_ y colocamos la siguiente política reemplazando el **arn** del bucket por el que creamos.

```
{
    "Version": "2012-10-17",
    "Id": "Policy1662669806339",
    "Statement": [
        {
            "Sid": "Stmt1662669804857",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::streamingbucketcamilo2022/*"
        }
    ]
}
```

![Bucket Policy]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/policy%20bucket.png?raw=true)

Ahora debemos modificar el archivo _index.html_.

[index.html](https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/index.html)
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1 Column - fw-1-1-col</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
  * { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background-color:#FFFFFF;
}
#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background:#FFFFFF;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
}
#footer { 
 color: #333;
 width: 900px;
 border: 1px solid #ccc;
 background-color:#FFFFFF;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
  <!-- Begin Header -->
  <div id="header"><h1><a href="https://aws.amazon.com/es/ivs/">Amazon IVS</a></h1></div>
  <!-- End Header -->
  <!-- Begin Content -->
  <div id="content"> 
    <script src="https://player.live-video.net/1.12.0/amazon-ivs-player.min.js"></script>
    <video id="video-player" width="850" height="325"  playsinline></video>
    <script>
      if (IVSPlayer.isPlayerSupported) {
        const player = IVSPlayer.create();
        player.attachHTMLVideoElement(document.getElementById('video-player'));
        player.load("Playback URL");
        player.play();
      }
    </script>
    </div>
  <!-- End Content -->
  <!-- Begin Footer -->
  <div id="footer"> <a href="https://dev.to/cecamilo">Camilo Cabrales</div>
  <!-- End Footer -->
 </div>
<!-- End Wrapper -->
</body>
</html>
```
Debemos reemplazar el texto _Playback URL_ de la linea de código _player.load("Playback URL");_ por el valor que tenemos en nuestro canal.

![Playback URL]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/Playback%20URL.png?raw=true)

Ya hemos configurado el bucket para que funcione como un sitio web estático y modificamos el archivo index.html, el siguiente paso es subir este archivo a nuestro bucket. Para esto vamos a nuestro bucket damos click en el botón _Upload_ y subimos el archivo. Una vez el archivo este dentro de nuestro bucket le damos click sobre el nombre y copiamos el Object URL para verlo en un navegador web. 

![URL Object]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/url%20object.png?raw=true)

Ahora debemos iniciar la aplicación de _Larix_ y comenzar la transmisión la cual veremos en nuestra pagina web después de esperar unos segundos (si no inicia en unos segundos, se debe actualizar la pagina).  

![Steaming Page]
(https://github.com/cecamilo00/posts/blob/circleci-project-setup/streaming%20aws/final%20page.png?raw=true)

Con esto damos por terminado el ejercicio, tal vez puedan complementarlo agregando que el video se guarde en S3 o agregando un método de autenticación a la pagina con **Cognito**.


#### Me pueden encontrar en:

[Camilo Cabrales](https://www.linkedin.com/in/camilo-cabrales-31a0bb53/)


# Referencias

[Amazon IVS](https://docs.aws.amazon.com/ivs/latest/userguide/what-is.html)

[Plantillas HTML](https://www.free-css.com/free-css-layouts/page1)