Configure Nginx en Ubuntu para transmitir video HLS en vivo

HTTP Live Streaming (HLS) es un protocolo de transmisión de video muy robusto implementado por Apple Inc. HLS utiliza transacciones HTTP que atraviesan firewalls, servidores proxy y se pueden distribuir a través de CDN con facilidad. Por lo tanto, esta tecnología puede llegar a una audiencia de visualización mucho mayor que RTP u otros protocolos basados ​​en UDP. Gran parte del video de transmisión en vivo en línea hoy en día está alojado por sistemas caros que usan HLS, pero generalmente son caros y requieren muchos recursos del servidor. Este tutorial le mostrará cómo configurar un VPS VULTR Ubuntu 14.04 muy asequible para hacer eventos de transmisión en vivo HLS utilizando solo software de código abierto.

El primer paso es leer y configurar su servidor de acuerdo con Vultr Doc " Setup Nginx-RTMP en Ubuntu 14.04 ". Las instrucciones en ese documento fueron las más completas para la etapa de configuración, en el momento de la escritura. Mencionaría que es posible que desee sustituir "nginx-1.7.5" con "nginx-1.9.4" o cualquiera que sea la última versión de Nginx disponible. La otra sugerencia es compilar Nginx con el módulo de estado de código auxiliar HTTP para poder monitorear cuántos visores HLS en vivo tiene más adelante.

En lugar de compilar con:

./configure --with-http_ssl_module  --add-module=../nginx-rtmp-module-master

Use esta cadena en el procedimiento descrito en el documento de requisitos previos:

./configure --with-http_ssl_module --with-http_stub_status_module --add-module=../nginx-rtmp-module-master

El ejemplo de este tutorial creará transmisiones "en vivo" y "móviles" (optimizadas) y utilizará ffmpeg (instalado en el tutorial anterior) para generar la transmisión HLS optimizada para móviles y con velocidad de bits ajustada. El ejemplo también mostrará cómo hacer que el servidor grabe sus transmisiones en vivo automáticamente y le permita reproducir las grabaciones como un servicio de reproducción de video a pedido (VOD).

Primero, cree las estructuras de carpetas necesarias para contener los manifiestos y fragmentos de video HLS en vivo y móviles:

sudo mkdir /HLS
sudo mkdir /HLS/live
sudo mkdir /HLS/mobile
sudo mkdir /video_recordings
sudo chmod -R 777 /video_recordings

Probablemente sea una buena idea tener su firewall activado si aún no lo ha hecho. Si es así, debe permitir el tráfico en los puertos utilizados por Nginx y HLS. Si desea ejecutar sin el firewall por ahora, ignore la sección ufw a continuación.

sudo ufw limit ssh
sudo ufw allow 80
sudo ufw allow 1935
sudo ufw enable

La transmisión HLS requiere una configuración Nginx significativamente diferente de la configuración RTMP en el primer artículo. Edite su nginx.confarchivo para usar lo siguiente, sustituyendo "my-ip" y "my-stream-key" con su información. Puede usar cualquier cosa que desee para "my-stream-key", es solo una palabra que es única y útil para usted. Es posible que desee hacer una copia de seguridad de su archivo de configuración original primero, luego pegue la información de configuración proporcionada en el editor, reemplazando todo lo que estaba allí:

sudo cp /usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf/nginx.conf.original
sudo nano /usr/local/nginx/conf/nginx.conf

Nuevo nginx.conf:

worker_processes  1;
error_log  logs/error.log debug;
events {
worker_connections  1024;
}
rtmp {
server {
listen 1935;
allow play all;

#creates our "live" full-resolution HLS videostream from our incoming encoder stream and tells where to put the HLS video manifest and video fragments
application live {
allow play all;
live on;
record all;
record_path /video_recordings;
record_unique on;
hls on;
hls_nested on;
hls_path /HLS/live;
hls_fragment 10s;

#creates the downsampled or "trans-rated" mobile video stream as a 400kbps, 480x360 sized video
exec ffmpeg -i rtmp://192.168.254.178:1935/$app/$name -acodec copy -c:v libx264 -preset veryfast -profile:v baseline -vsync cfr -s 480x360 -b:v 400k maxrate 400k -bufsize 400k -threads 0 -r 30 -f flv rtmp://192.168.254.178:1935/mobile/$;
}

#creates our "mobile" lower-resolution HLS videostream from the ffmpeg-created stream and tells where to put the HLS video manifest and video fragments
application mobile {
allow play all;
live on;
hls on;
hls_nested on;
hls_path /HLS/mobile;
hls_fragment 10s;
}

#allows you to play your recordings of your live streams using a URL like "rtmp://my-ip:1935/vod/filename.flv"
application vod {
play /video_recordings;
}
}
}


http {
include       mime.types;
default_type  application/octet-stream;

server {
listen 80;
server_name 192.168.254.178;

#creates the http-location for our full-resolution (desktop) HLS stream - "http://my-ip/live/my-stream-key/index.m3u8"      
location /live {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/live;
add_header Cache-Control no-cache;
}

#creates the http-location for our mobile-device HLS stream - "http://my-ip/mobile/my-stream-key/index.m3u8"        
location /mobile {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/mobile;
add_header Cache-Control no-cache;
}   

#allows us to see how stats on viewers on our Nginx site using a URL like: "http://my-ip/stats"     
location /stats {
stub_status;
}

#allows us to host some webpages which can show our videos: "http://my-ip/my-page.html"     
location / {
root   html;
index  index.html index.htm;
}   
}
}

Presione Ctrl + X para salir. Di "sí" para guardar los cambios.

Puede encontrar instrucciones claras y ejemplos de las variables posibles en este nginx.confarchivo si consulta en su motor de búsqueda favorito las "directivas nginx-rtmp". He estado usando nginx-rtmp con HLS durante algunos años, sin usar las directivas "permitir publicación" y "negar publicación" y he visto cero instancias de personas que usan / invaden mis servidores de video. Así que no incluí esas directivas aquí. Lea y agregue estas directivas si lo desea.

Después de cambiar el nginx.confarchivo, debe reiniciar Nginx para usar la nueva configuración:

sudo service nginx restart

Esté atento a cualquier mensaje de error de Nginx y aborde cualquier error que pueda haber sido causado por faltas de ortografía, propiedad de carpetas o problemas de permisos. Si no tiene mensajes de error, está listo para crear su secuencia de codificación.

Debe tener un codificador de video para crear la transmisión. Uso OBS (Open Broadcaster Software), que es de código abierto y funciona bien para mí. Hay otras soluciones para elegir, que están fuera del alcance de este tutorial. No cubriré todo sobre la configuración de un codificador de video RTMP. Sin embargo, todos requieren aproximadamente las mismas variables de entrada. Las configuraciones clave que necesitará ingresar para usar mi nginx.confconfiguración exacta y funcionar bien en la mayoría de los jugadores / navegadores / plataformas son las siguientes:

1. Codificador-x264
2. Velocidad de bits variable (no CBR o velocidad de bits constante), calidad más alta
3. Velocidad de bits máxima: 600 kbps
4. Audio-Codec-AAC
5. Formato de audio-44.1khz
6. Audio-bitrate-64kbps
7. URL de FMS- "rtmp: // my-ip: 1935 / live"
8. Clave de transmisión- "my-stream-key"
9. Resolución-640x480
10. FPS (cuadros por segundo) -30
11. CFR (velocidad de fotogramas constante): sí
12. Intervalo de fotogramas clave: 2 segundos (un fotograma clave cada 2 segundos)
13. Perfil base de codificación x264 (puede funcionar con main; depende del reproductor utilizado)
14. CPU x264 Presente-muy rápido

Recomiendo probar diferentes codificadores y experimentar con ellos. Es posible que desee una relación de aspecto amplia, o su cámara (u otra transmisión) puede exigirla. Si es así, asegúrese de cambiar esta información en su codificador y también la relación de aspecto que figura en la sección exec-ffmpeg del nginx.confarchivo que he proporcionado; de lo contrario, obtendrás algunos videos de aspecto tonto.

Una vez que su codificador está configurado, puede probarlo todo. Encienda el codificador con su cámara web o algún tipo de prueba de alimentación que se ejecute en él. Puede ver su transmisión en este momento con el reproductor VLC usando URL como:

http://my-ip/live/my-stream-key/index.m3u8
http://my-ip/mobile/my-stream-key/index.m3u8

Estos son para sus transmisiones de video principal y móvil, respectivamente. Sustituya su IP y la clave de transmisión en consecuencia.

Después de haber transmitido con éxito su primera verificación de transmisión (a través de ssh o ftp) de que su transmisión en vivo se grabó en la /video_recordingscarpeta de su Vultr VPS. También puede intentar reproducir este archivo grabado en VLC con una URL como:

rtmp://my-ip/vod/filename.flv

Las estadísticas de Nginx también están disponibles (con Nginx stub_status). Para ver las estadísticas de visitante / espectador, acceda a:

http://my-ip/stats

Para ver su video en una página web, necesitará un reproductor integrable. Hay muchos reproductores integrables disponibles que reproducirán videos HLS. He usado JW Player durante algunos años, pero la versión gratuita no jugará HLS. Flowplayer y Bitdash by Bitmovin (entre otras soluciones) son lo suficientemente generosos como para ofrecer una versión no comercial de sus reproductores de forma gratuita, lo que hará que su transmisión HLS esté incrustada en una página web. Para este artículo, los probé a ambos y descubrí que ambos funcionan bastante bien con mi servidor de video basado en Vultr / Nginx. Mostraré brevemente cómo hice funcionar Flowplayer con mi máquina de banco de pruebas.

Si va a utilizar la transmisión en vivo de HLS de forma regular, sostenida o comercial, le recomiendo que compre una licencia de Flowplayer o el jugador que decida utilizar. Obtendrá un reproductor que tiene menos restricciones, más funciones y puede ser calificado con su organización. También recibirá soporte, que puede ser muy importante. Aparte del Vultr VPS, este es realmente el único costo asociado con el proyecto.

Antes de hacer cualquier otra cosa, es importante tener en cuenta las llamadas restricciones de "dominio cruzado", que de otro modo cerrarían su capacidad de transmitir a una página web / sitio web. Cree un crossdomain.xmlarchivo en su nginx/htmlcarpeta y coloque instrucciones para permitir que los datos fluyan entre dominios:

sudo nano /usr/local/nginx/html/crossdomain.xml

Primero copie (desde esta página) y luego pegue (clic derecho) en el campo del editor nano los siguientes datos XML:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>

Presione Ctrl + O para escribir, luego Ctrl + X para guardar el archivo en el disco y salir.

Tomé el HTML5 (versión 6.0.3) de Flowplayer que me dio una cantidad de archivos y una carpeta cuando lo descomprimí. Cargué todos los archivos y la carpeta en una subcarpeta de la carpeta raíz Nginx / HTML que denominé "flowplayer". El camino exacto era /usr/local/nginx/html/flowplayer.

Para probar nuestro video cuando está incrustado en una página web, cree un par de archivos HTML en la raíz de la carpeta Nginx / HTML usando nano y complételos con los siguientes contenidos.

Archivo:

sudo nano /usr/local/nginx/html/hls.html

Código HTML:

<!doctype html>
<head>
<link rel="stylesheet" href="#">
</head>

<body>
640x480 664kbps (live) Desktop Browsers<br>
<div style="width:640px;" class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-ratio="0.75">
<video>
<source type="application/x-mpegurl" src="">
</video>
</div>
<br><br>
480x360 464kbps (mobile) Mobile Browsers <br>
<div style="width:480px;" class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-ratio="0.75">
<video>
<source type="application/x-mpegurl" src="">
</video>
</div>
</body>

Archivo:

sudo nano /usr/local/nginx/html/hls_progressive.html

Código HTML:

<!doctype html>
<head>
<link rel="stylesheet" href="#">
<style> .flowplayer { width: 640px; } </style>
</head>

<body>
<div class="flowplayer" data-swf="flowplayer/flowplayer.swf" data-ratio="0.75">
<video>
<source type="application/x-mpegurl" src=""> 
<source type="application/x-mpegurl" src="">
</video>
</div>
<br>
</body>

Asegúrese de sustituir "my-ip" y "my-stream-key" con sus datos.

Debe sustituir la ruta flowplayer/skin/functional.csspor el signo "#" en la hoja de estilo href="#". El software tutorial elimina el camino. Debe completar una URL en la src=""parte; el software tutorial la está eliminando, use http://my-ip/live/my-stream-key/index.m3u8y http://my-ip/mobile/my-stream-key/index.m3u8, respectivamente. También debe agregar srcetiquetas de script en la cabeza para ambos jquery-1.11.2.min.jsy para flowplayer.min.js. El software tutorial elimina las etiquetas. Puede encontrar cómo crear estas etiquetas mirando el example htmlarchivo incluido con el kit Flowplayer.

Encienda el codificador con su cámara web o algún tipo de prueba de alimentación que se ejecute en él. Puede ver su transmisión en un navegador utilizando las siguientes URL:

http://my-ip/hls.html
http://my-ip/hls_progressive.html

La primera página simplemente muestra cada una de sus transmisiones: la principal y la plataforma móvil. Podrá iniciarlos a ambos y verlos. Notarás que la transmisión de la plataforma móvil es de menor tamaño. Estos pasos son solo para asegurarse de que todo esté funcionando.

La segunda página muestra una sola secuencia. Pero está configurado de una manera que se llama "transmisión progresiva". Lo que esto significa es que cuando un espectador reproduce el video, tanto el servidor como el reproductor intentan darle al espectador una transmisión de alta velocidad de bits y alta calidad si la conexión de los espectadores puede mantenerlo. Si su conexión es deficiente y no puede mantener la conexión, se despliega para mostrar el flujo de velocidad de bits más baja (móvil) que es 200 kbps más bajo en ancho de banda. Si lo desea, puede crear secuencias más progresivas y graduadas con ffmpeg y configurarlas con mi ejemplo.

Probé esta configuración en un solo núcleo, Vultr VPS de 1GB y descubrí que con una sola transmisión en vivo, más la transmisión móvil trans-clasificada que crea con ffmpeg, el uso de la CPU era inferior al 35% y había consumido solo 100 MB de mi 1GB de ram Ahora que es una configuración muy eficiente.

Si planea transmitir video que es mucho más grande en dimensiones de píxeles que SD, es posible que tenga que usar un VPS más potente. Tenía curiosidad acerca de esto y ejecuté mi transmisión principal hasta 1280x960 píxeles y 2Mbps, poniendo una carga adicional en las cosas. Pero el VPS todavía solo usó 50% de CPU y el uso de memoria se mantuvo en 100MB. Agregué una docena de visores / navegadores y casi no hubo diferencia en la carga en el VPS: solo aumentó el ancho de banda utilizado. Estoy seguro de que la creación de transmisiones con clasificación adicional con ffmpeg continuaría poniendo una carga adicional en el sistema.

He usado este tipo de servidor en entornos de producción con entre 50 y 100 usuarios concurrentes y descubrí que el uso de recursos aumentó muy poco con el aumento de las conexiones de los espectadores. Experimenta con eso. Pero creo que la mayoría de los usuarios estarían contentos con un VPS de 1GB de un solo núcleo. ¡Disfruta de tu nuevo servidor de transmisión HLS!