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í: 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: video#video-player { width: 800px; height: 450px; } My Stream 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'); } 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. 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"