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í:   https://www.twitch.tv/videos/1811192764?embedable=true  Todd es el principal defensor de los desarrolladores de Amazon Interactive Video Service (IVS), o, más simplemente, una forma de tomar el   poder de la plataforma Twitch y ponerlo en tus manos.   te da: increíble IVS  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   respeto por hacer esto en vivo en su transmisión. un gran  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   son bastante completos y le darán más detalles sobre los detalles. documentos  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   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. de inicio  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   buen trabajo al encontrar cosas. AWS puede ser un poco abrumador, pero su búsqueda ha facilitado mucho las cosas últimamente. muy  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   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. la configuración de su cubierta de transmisión  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,   . Esta es una solución de transmisión basada en la web que puede usar para probar IVS. stream.ivs.rocks  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   más simple y rápido de configurar.  mucho  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   lo hará. Teniendo en cuenta que soy un tipo web, y esta publicación trata sobre cómo hacerlo en Jamstack, la   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. dónde guía web  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   y mi CSS para dimensionarlo correctamente. <video>  El JavaScript crea una instancia de   y la adjunta al DOM. El valor   proviene de la configuración del canal AVS:  IVSPlayer pbURL  ¡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   tiene sentido, por lo que un mejor código manejaría eso. absolutamente  Eché un vistazo rápido a la   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. referencia web  ¡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   . Habrá mucho que digerir, pero hay mucho más allí de lo que he tocado aquí. documentos  A continuación, consulte   , donde compartió varios ejemplos. Más recientemente, hizo una demostración de un   y luego siguió con un ejemplo de   . las publicaciones de Todd en dev.to chat de video de múltiples hosts en tiempo real en el navegador 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   como especialmente genial. la creación de su propia estación de radio "LoFi"

My Blog

Buy Me a Coffee

Read My Stories

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps