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:
Damos click en 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.
En la sección de almacenamiento no vamos a seleccionar que nuestro streaming se almacene en S3. Damos click en guardar.
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.
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.
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.
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).
Definimos que el bucket sea publico.
Creamos el 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.
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.
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/*"
}
]
}
Ahora debemos modificar el archivo 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.
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.
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).
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.
Top comments (0)