Cómo agregar transmisión a su sitio Jamstack en minutos

La semana pasada, tuve el gran placer de estar en la transmisión en vivo de mi amigo Todd Sharp, Streaming on Streaming. Puedes ver la grabación de esa sesión aquí:

Todd es el principal defensor de los desarrolladores de Amazon Interactive Video Service (IVS), o, más simplemente, una forma de tomar el increíble poder de la plataforma Twitch y ponerlo en tus manos. IVS te da:

• La capacidad de crear canales para su contenido.

• Múltiples formas de transmitir su contenido, desde herramientas basadas en la web hasta herramientas más poderosas como OBS.

• Múltiples formas de mostrar su contenido, incluido un SDK web bastante simple.

• Informes súper detallados.

• Y profundas integraciones en la transmisión que permiten cosas como transcripciones, moderación de chat basada en Lambda y más.

  
  

Este es un servicio comercial, pero como casi todo en AWS, hay un nivel gratuito que le permite probar cosas y ver si tiene sentido para usted.

En la sesión que tuve con Todd, él quería poner su propia documentación y consola a través de una "experiencia de desarrollador primerizo". Entonces, en primer lugar, pensar y realmente preocuparse por la experiencia inicial del desarrollador con su producto es probablemente una de las cosas más importantes que puede hacer.

Sé que en mi propia carrera en la defensa de los desarrolladores, es casi imposible para mí probar algo nuevo sin examinar y comentar constantemente sobre la incorporación del desarrollador. Todd merece un gran respeto por hacer esto en vivo en su transmisión.

Soy un poco conocido por romper cosas, hacer las cosas mal y, en general, ser tu peor pesadilla cuando se trata de DX, así que fue bastante valiente de su parte.

(Y para ser claros, no planificamos previamente nada de esta transmisión. No me dieron nada por adelantado, y el único conocimiento real que tenía era leer las publicaciones de su blog y el chat en general).

Como se puede imaginar, algo como "lanza tu propio IVS" va a ser muy complejo, pero en nuestra sesión de una hora, configuramos mi canal, transmití desde OBS y una herramienta web y pude construir un sencillo página web para mostrar la transmisión.

Pensé en compartir algunos de los aspectos más destacados de eso aquí, ya que la idea de admitir la transmisión en el Jamstack suena increíblemente convincente. Esto será algo de alto nivel, pero los documentos son bastante completos y le darán más detalles sobre los detalles.

También querrá comenzar con la guía de inicio .

Con eso en mente, aquí hay un resumen básico de lo simple que es comenzar.

Paso uno: obtenga AWS

Voy a saltarme esto. Quiero decir, supongo que no soy como lo llamo, y nunca debe asumir nada, pero como un gran porcentaje de personas ya usa AWS, supongo que ya tiene una cuenta.

Lo hice y usé mi raíz, pero si sigue el enlace de inicio que compartí anteriormente, le configurarán un usuario con acceso más restringido, que es lo correcto, y siempre hacemos lo correcto en tecnología. Ejem.

Paso dos: crea tu canal

Lo siguiente que hará es definir un canal en la parte IVS de la consola de AWS:

Como recordatorio, el cuadro de búsqueda de toxicología de IVS hace un muy buen trabajo al encontrar cosas. AWS puede ser un poco abrumador, pero su búsqueda ha facilitado mucho las cosas últimamente.

Supongo que la mayoría de la gente sabe sobre la transmisión y tiene la idea básica de un canal, pero si tuviera que comenzar a transmitir, probablemente solo tendría un canal para mí.

Si quisiera agregar transmisión al sitio web de mi empresa, podría imaginar tener un canal para cosas como capacitación, eventos externos, etc.

Como mínimo, se necesita un canal. Al crear un nuevo canal, lo mínimo es el nombre:

Tenga en cuenta que una de las opciones es almacenar automáticamente las secuencias en S3. No habilité eso en la transmisión con Todd, pero es realmente bueno que sea tan simple de habilitar. Obviamente, habrá un costo en el almacenamiento de archivos de video grandes, pero aprecio lo simple que es habilitarlo.

Paso tres: descubra su emisora

Los documentos de inicio relacionados con la configuración de su cubierta de transmisión usando sus SDK, OBS Studio o FFmpeg. Usé OBS Studio en el pasado, así que durante la transmisión con Todd, usé eso. Sin embargo, les advertiré a las personas que si nunca lo han usado antes, puede ser bastante abrumador.

Definitivamente lo fue para mí (diablos, todavía apenas sé lo que estoy haciendo).

En cambio, permítanme compartir otra opción que Todd compartió conmigo más adelante en la transmisión, stream.ivs.rocks . Esta es una solución de transmisión basada en la web que puede usar para probar IVS.

Abra la página en su navegador (tenga en cuenta que dice que Edge no es compatible, pero no tuve problemas con él) y haga clic en el ícono de ajustes para acceder a su configuración. Querrá especificar su "Punto final de ingesta" y "Clave de transmisión", que puede encontrar en la consola de AWS en los detalles de su canal.

No cometa el mismo error que yo: el "servidor de ingesta" NO es lo mismo que el "punto final de ingesta", querrá abrir y expandir "Otras opciones de ingesta" para ver eso.

Una vez que haya hecho eso, puede hacer clic en el botón "Iniciar transmisión" a continuación y, literalmente, ¡eso es todo! Si bien esto no es algo que haría para una transmisión "real", es mucho más simple y rápido de configurar.

Una vez que esté transmitiendo, regrese a la consola de AWS, haga clic en "Canales en vivo" y podrá ver su transmisión en acción:

Si vas a los detalles del canal, también se muestra allí:

Por cierto, mientras esté allí y en el futuro, puede ver transmisiones pasadas y todo tipo de métricas interesantes sobre la transmisión.

Gran parte de esta terminología utilizada no la conozco, por lo que es algo que debe tener en cuenta si es nuevo en la transmisión (y es algo que compartí con Todd como retroalimentación), pero si le gustan las estadísticas, AWS lo tiene cubierto.

Paso cuatro: la parte delantera

En realidad, ver la transmisión requiere averiguar dónde lo hará. Teniendo en cuenta que soy un tipo web, y esta publicación trata sobre cómo hacerlo en Jamstack, la guía web sobre su documentación es el próximo lugar al que le gustaría ir. Una vez más, la implementación inicial puede ser muy simple.

Aquí hay una implementación completa:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://player.live-video.net/1.18.0/amazon-ivs-player.min.js"></script> <style> video#video-player { width: 800px; height: 450px; } </style> </head> <body> <h2>My Stream</h2> <video id="video-player" playsinline controls autoplay></video> <script> const pbURL = 'https://e0e6ec1c389e.us-east-1.playback.live-video.net/api/video/v1/us-east-1.100330257216.channel.4tjprROF5ZWE.m3u8'; document.addEventListener('DOMContentLoaded', init, false); async function init() { if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); console.log('player made'); player.load(pbURL); player.play(); } else console.log('u stink'); } </script> </body> </html>

Vamos a desglosarlo. Tienes una etiqueta de secuencia de comandos en la parte superior cargando su SDK. A continuación, tengo mi HTML con las partes importantes que son la etiqueta <video> y mi CSS para dimensionarlo correctamente.

El JavaScript crea una instancia de IVSPlayer y la adjunta al DOM. El valor pbURL proviene de la configuración del canal AVS:

¡Y aquí está en acción!

Ahora, antes de emocionarse demasiado, tenga en cuenta que este es el código más simple que puede usar, pero no es muy a prueba de balas, de hecho, y definitivamente se encontrará con esto mientras prueba, si no está transmitiendo, obtendrá un error al intentar para cargar la transmisión. Eso absolutamente tiene sentido, por lo que un mejor código manejaría eso.

Eché un vistazo rápido a la referencia web y veo compatibilidad con eventos, por lo que debería poder hacer que escuche el comienzo de una transmisión; cargue en ese punto o haga algo en el DOM para que la persona que ve la página web sepa que comenzó una transmisión.

¡Eso es todo!

Ok, claro, eso no es muy digno de producción, pero literalmente hice una solución de transmisión en una hora. Ahora, esto no va a ser gratis, por lo que es algo a tener en cuenta, pero estoy realmente impresionado por la rapidez con la que puede comenzar, así como por la cantidad de energía que obtiene de la caja.

Y con AWS manejando todo, encaja perfectamente con Jamstack. Hay API basadas en servidor que también podría integrar, y ahí sería donde usaría algo como Netlify Functions.

Así que de nuevo, echa un vistazo a los documentos . Habrá mucho que digerir, pero hay mucho más allí de lo que he tocado aquí.

A continuación, consulte las publicaciones de Todd en dev.to , donde compartió varios ejemplos. Más recientemente, hizo una demostración de un chat de video de múltiples hosts en tiempo real en el navegador y luego siguió con un ejemplo de múltiples hosts y transmisión en vivo, nuevamente el navegador .

Creo que sus publicaciones relacionadas con el chat y el poder que tienes para moderar allí son mis favoritas. También recomendaré el que escribió sobre la creación de su propia estación de radio "LoFi" como especialmente genial.