Guía definitiva para el streaming en HTML5

HTML5 es la plataforma más popular para la reproducción de vídeo. Esta guía definitiva te ayudará a ponerte en marcha con el streaming HTML5 que te permite llegar a cualquier dispositivo, en cualquier lugar de la Tierra y en cualquier momento.

Se mire como se mire, la retransmisión en directo está explotando. Se prevé que más de 1.900 millones de usuarios de Internet utilicen el vídeo en línea en 2018. Se espera que los ingresos mundiales del vídeo OTT alcancen más de 20.000 millones de dólares el año que viene. Ahora es el momento de apostar por el vídeo en línea.

Siete pasos clave para el streaming en HTML5

La transmisión de vídeo en directo puede resultar confusa para los recién llegados. Claro que existe la vía fácil: El streaming de Facebook, por ejemplo, se hace con un solo toque. Pero Facebook Live y otras plataformas de streaming social como Youtube Live tienen serias limitaciones.

Si necesita un enfoque más profesional, las cosas se complican un poco más. Algunas personas se pierden en el laberinto del lenguaje técnico. No seas como ellos. Con la preparación adecuada -incluida la lectura de este artículo- podrás desenvolverte con soltura en la terminología y la tecnología de la retransmisión en directo.

Esta guía le guiará a través de siete pasos clave y consideraciones para la transmisión en HTML5. ¡Comencemos!

1. Necesidades de equipamiento

El primer elemento clave de la retransmisión en directo es utilizar el equipo adecuado. Voy a enumerar aquí las categorías y a enlazar con algunos recursos para aprender más sobre estos temas.

Cámara

La primera y más importante pieza del equipo es la cámara de vídeo. La cámara puede ser tan sencilla como un smartphone o tan compleja como una cámara de cine de gama alta. La elección de una cámara de retransmisión en directo u otra dependerá del evento que quieras retransmitir, del número de cámaras que necesites, etc. Puedes empezar con una pequeña, como una Canon FS300 o una Sony DCR-HC1000. Si ya estás familiarizado con el streaming HTML5, quizá quieras considerar una cámara PTZ (Pan-Tilt-Zoom).

Micrófonos

También necesitarás micrófonos para capturar audio. Las encuestas han demostrado que el audio es un elemento esencial en los flujos de vídeo cuando se trata de calidad percibida. Puedes utilizar el micrófono integrado de tus videocámaras para el audio. Sin embargo, la calidad no siempre es buena y hay que tener cuidado con el ruido de fondo. Considera la posibilidad de utilizar micrófonos externos de mayor calidad, como el Blue Yeti o un micrófono de cañón decalidad , paraasegurarte de obtener la mejor calidad de audio posible.

Codificador

El siguiente equipo que necesitas es un codificador. Hay dos tipos de codificador: hardware y software.

Los codificadores por hardware son ideales tanto para situaciones móviles como para su uso en estudios de alta gama. Para la mayoría de los demás usos, es probable que una aplicación de codificador de software instalada en una tableta o un teléfono inteligente satisfaga todas sus necesidades.

OBS Studio es una aplicación de streaming en directo capaz y gratuita. Haga clic aquí para obtener más información sobre algunas de las mejores aplicaciones de streaming, incluida OBS. Si prefieres un codificador por hardware, echa un vistazo al pequeño“Cube” de Teradek montado en una cámara, ideal para retransmisiones deportivas.

2. Conectividad a Internet

Una vez resueltas tus necesidades de equipo, tendrás que disponer de una conexión a Internet para tu emisión en HTML5. Esta conexión puede proceder de diversas fuentes. Podrías usar:

• Una red Wi-Fi
• Un cable Ethernet
• Una red móvil (3G es demasiado lenta; necesitarás una conexión 4G LTE)

Si trabajas desde un lugar con acceso limitado a Internet (o si eres móvil) puede ser difícil confiar en este tipo de conexiones. La solución a este problema esla “unión de redes“, que consiste en combinar varias conexiones de red en una única conexión más rápida y fiable.

3. Requisitos de ancho de banda para evitar el buffering

Ahora que estás pensando en tu conexión a Internet, tienes que tener en cuenta su velocidad. Si tu velocidad de Internet es demasiado lenta, la calidad de tu retransmisión en directo en HTML5 será limitada. También puede crear problemas de buffering y lag de vídeo. Sólo el 8,2% de los espectadores vuelve a un sitio web el primer día después de experimentar un fallo en el vídeo, frente al 11,2% que vuelve después de una experiencia funcional.

La velocidad de Internet se mide con dos parámetros diferentes: la velocidad de descarga y la velocidad de subida.

• La descarga es la velocidad a la que puedes cargar datos en tus dispositivos, como ver Netflix.
• La subida es la velocidad a la que puedes enviar datos al resto de Internet, como subir un vídeo a Instagram.

Para producir una transmisión en directo, la velocidad de carga es la más importante. Tanto la velocidad de subida como la de bajada se miden en Mbps, o Megabits por segundo. ¿Cómo puede medir su velocidad de carga? La forma más sencilla es visitar TestMy.net y ejecutar su prueba de velocidad de subida. Anota tus resultados y luego vuelve aquí.

¿Cuál es su velocidad de carga?

• 25 Mbps o superior: velocidad de sobra, preparado para streaming 4K
• 5-8 Mbps: suficiente para transmitir en 720p o 1080p HD (alta definición)
• 3 Mbps – suficiente para transmitir en definición estándar 480p
• 1,5 Mbps: velocidad suficiente para una resolución razonable de 360p
• 500 Kbps: velocidad mínima recomendada, apenas suficiente para transmitir vídeo.

Estas cifras son sólo recomendaciones. La cantidad real de ancho de banda que necesitará su flujo depende de varios factores. Para saber más sobre el ancho de banda, consulta nuestra guía completa sobre requisitos de ancho de banda para streaming.

4. Ajustes del codificador

A continuación, vamos a ver cómo configurar el codificador para obtener la mejor calidad con el menor número de interrupciones. Tendrás que adaptar los ajustes a tus necesidades específicas, pero aquí tienes algunas recomendaciones en cuanto a los ajustes habituales del codificador:

Resolución de vídeo

Las resoluciones se enumeran por tamaño, como 640 x 360 píxeles (a menudo llamada 360p) o 1920 x 1080 píxeles (a menudo llamada “Full HD” o 1080p). Por lo general, elige la resolución más alta que tu velocidad de subida pueda soportar.

Bitrate

La tasa de bits interactúa con la resolución. Se necesitan velocidades de bits más altas para “transportar” los datos necesarios para fotogramas de vídeo de mayor tamaño. Puedes utilizar las cifras de la sección 3 para obtener una estimación aproximada de la tasa de bits.

Frecuencia de imagen

Por lo general, recomendamos “configurarlo y olvidarse” a 30 fotogramas por segundo (fps). Si retransmites deportes, puede que necesites 60 fps.

Intervalo de fotogramas clave

Recomendamos ajustar el intervalo de fotogramas clave a 2-3 segundos.

5. Códecs de vídeo y audio

Técnicamente hablando, un “códec” es una herramienta de hardware o software que se utiliza para comprimir o descomprimir vídeo. H.264, por ejemplo, es un códec estandarizado. Todos los dispositivos modernos, navegadores web, reproductores de vídeo y televisores saben descodificar el vídeo H.264.

Lo mismo ocurre con el audio. El códec de audio moderno más popular es AAC, que comprime el audio.

En caso de duda, utilice H.264 y AAC para todas sus necesidades de transmisión de vídeo. Aquí es fácil confundirse. Por ejemplo, el audio AAC puede agruparse con un vídeo H.264 en un “formato contenedor” para su transmisión. Para convertirte en un maestro de la retransmisión en directo, merece la pena que leas nuestra breve introducción a H.264, los códecs y los archivos contenedores.

6. Reproductor de vídeo para todos los dispositivos

Otro elemento clave en el streaming HTML5 es el propio reproductor de vídeo. El vídeo por Internet se reproduce a través de reproductores de vídeo, igual que en tu ordenador de sobremesa. Lo que ocurre es que estos reproductores están integrados en los sitios web que visitas. Antes había que utilizar Flash para el vídeo en línea. Sin embargo, era lento y vulnerable a la piratería.

Ahora, el streaming en HTML5 es una alternativa mucho mejor. Las plataformas de vídeo en línea como Dacast incluyen un reproductor de vídeo HTML5 compatible con todos los teléfonos móviles, tabletas y ordenadores, así como con dispositivos como las Smart TV. Para saber más sobre los reproductores de vídeo en streaming HTML5 y las ventajas que ofrecen, haga clic aquí.

7. Plataforma de vídeo en línea

El último elemento clave para el streaming en HTML5 es una plataforma de vídeo en línea. También conocidas como OVP, estas empresas sirven de mecanismo de entrega para sus flujos de vídeo. Un OVP proporciona acceso a una red de servidores para distribuir sus contenidos por todo el mundo minimizando los retardos y el buffering.

También proporcionan una serie de herramientas. Algunas de ellas pueden incluir cosas como análisis para ayudarle a entender quiénes son sus espectadores y qué están haciendo, monetización para ayudarte a generar ingresos con tus vídeos, herramientas de gestión para mantener tus contenidos organizados y herramientas avanzadas como APIs de vídeo para que pueda crear soluciones personalizadas a los problemas técnicos.

Conclusión: puesta en marcha

En conclusión, veamos estos elementos y cómo funcionan juntos. Para empezar a retransmitir en HTML5, tendrás que reunir tu equipo: cámara, equipo de audio y codificador. A continuación, tendrás que conectarte a Internet y asegurarte de que tu conexión es lo suficientemente rápida para hacer streaming.

Una vez completado este paso, debes configurar tu codificador en función de tu velocidad de Internet. Por último, debes conectarte con tu plataforma de vídeo en línea y asegurarte de que utilizas un reproductor de vídeo compatible con HTML5 streaming.

Eso es todo. ¿Alguna pregunta o añadido? Háganoslo saber en la sección de comentarios. Gracias por leernos y buena suerte con sus retransmisiones en directo.