DEV Community 👩‍💻👨‍💻

camilo cabrales
camilo cabrales

Posted on

Como crear tu página para streaming de vídeo

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

Damos click en Create Channel

Create Channel

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

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

Save Channel

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, después vamos a la siguiente pagina Larix Grove-compliant URL 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

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

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

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

Definimos que el bucket sea publico.

Name Bucket

Creamos el bucket

Name Bucket

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

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

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/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Bucket Policy

Ahora debemos modificar el archivo index.html.

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>
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

Referencias

Amazon IVS

Plantillas HTML

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.