Configura Nginx a Ubuntu per reproduir vídeo HLS en directe

HTTP Live Streaming (HLS) és un protocol de transmissió de vídeo molt robust implementat per Apple Inc. HLS utilitza transaccions HTTP que travessen tallafocs, servidors intermediaris i es poden distribuir a través de CDN amb facilitat. Per tant, aquesta tecnologia és capaç d'arribar a un públic de visualització molt més gran que RTP o altres protocols basats en UDP. Gran part del vídeo en directe en línia actual està allotjat per sistemes cars que utilitzen HLS, però generalment són cars i requereixen molts recursos del servidor. Aquest tutorial us mostrarà com configurar un Ubuntu 14.04 VULTR VPS molt assequible per fer esdeveniments de transmissió en directe HLS utilitzant només programari de codi obert.

El primer pas és llegir i configurar el vostre servidor segons Vultr Doc " Configuració de Nginx-RTMP a Ubuntu 14.04 ". Les instruccions d'aquest document eren les més completes per a l'etapa de configuració, en el moment d'escriure. Vull esmentar que potser voldreu substituir "nginx-1.7.5" per "nginx-1.9.4" o qualsevol que sigui la darrera versió de Nginx disponible. L'altre suggeriment és compilar Nginx amb el mòdul d'estat del taló HTTP per donar-vos la possibilitat de controlar quants visualitzadors HLS en directe teniu més tard.

En lloc de compilar amb:

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

Utilitzeu aquesta cadena en el procediment descrit al document de requisits previs:

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

L'exemple d'aquest tutorial crearà fluxos "en directe" i "mòbils" (optimitzats) i utilitzarà ffmpeg (instal·lat al tutorial anterior) per generar el flux HLS optimitzat per a mòbils ajustat a la velocitat de bits. L'exemple també mostrarà com fer que el servidor enregistri les vostres reproduccions en directe automàticament i us permetrà reproduir les gravacions com a servei de reproducció de vídeo sota demanda (VOD).

Primer, creeu les estructures de carpetes necessàries per contenir els manifests HLS en directe i mòbils i els fragments de vídeo:

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

Probablement sigui una bona idea tenir el tallafoc activat si encara no ho heu fet. Si és així, heu de permetre el trànsit als ports utilitzats per Nginx i HLS. Si voleu córrer sense el tallafoc de moment, ignoreu la secció ufw a continuació.

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

La transmissió HLS requereix una configuració de Nginx significativament diferent de la configuració RTMP del primer article. Editeu el vostre nginx.conffitxer per utilitzar el següent, substituint "my-ip" i "my-stream-key" per la vostra informació. Pots fer servir qualsevol cosa que vulguis per a "la meva clau de flux", és només una paraula única i útil per a tu. És possible que primer vulgueu fer una còpia de seguretat del fitxer de configuració original i després enganxar la meva informació de configuració proporcionada a l'editor, substituint tot el que hi havia:

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

Nou 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;
}   
}
}

Premeu Ctrl + X per sortir. Digues "sí" per desar els canvis.

Podeu trobar instruccions clares i exemples de les variables possibles en aquest nginx.conffitxer si consulteu "directives nginx-rtmp" al vostre motor de cerca preferit. He estat utilitzant nginx-rtmp amb HLS des de fa uns quants anys, sense utilitzar les directives "permetre la publicació" i "denegar la publicació" i no he vist cap cas de persones que utilitzen o envaeixen els meus servidors de vídeo. Així que no vaig incloure aquestes directrius aquí. Llegiu i afegiu aquestes directives si voleu.

Després de canviar el nginx.conffitxer, heu de reiniciar Nginx per utilitzar la nova configuració:

sudo service nginx restart

Vigileu atentament els missatges d'error de Nginx i solucioneu els errors que puguin haver estat causats per problemes d'ortografia, propietat de carpetes o permisos. Si no teniu cap missatge d'error, ja esteu preparat per crear el vostre flux de codificació.

Heu de tenir un codificador de vídeo per crear la reproducció. Utilitzo OBS (Open Broadcaster Software), que és de codi obert i em funciona bé. Hi ha altres solucions per triar, que estan fora de l'abast d'aquest tutorial. No parlaré de tot sobre la configuració d'un codificador de vídeo RTMP. Tot i això, requereixen aproximadament les mateixes variables d'entrada. Els paràmetres clau que haureu d'introduir per utilitzar la meva nginx.confconfiguració exacta i per funcionar bé a la majoria de jugadors/navegadors/plataformes són els següents:

1. Codificador-x264
2. Velocitat de bits variable (no CBR ni velocitat de bits constant), qualitat més alta
3. Taxa de bits màxima: 600 kbps
4. Àudio-Codec-AAC
5. Format d'àudio-44,1 kHz
6. Taxa de bits d'àudio: 64 kbps
7. URL de FMS: "rtmp://my-ip:1935/live"
8. Clau de reproducció: "la meva-clau de reproducció"
9. Resolució-640x480
10. FPS (fotogrames per segon) -30
11. CFR (Constant Frame Rate) - Sí
12. Interval de fotograma clau: 2 segons (un fotograma clau cada 2 segons)
13. Perfil de codificació x264: línia base (pot funcionar amb el principal, depèn del reproductor utilitzat)
14. CPU x264 present-molt ràpid

Recomano provar diferents codificadors i experimentar amb ells. És possible que desitgeu una relació d'aspecte àmplia, o la vostra càmera (o altres materials de transmissió) ho poden exigir. Si és així, assegureu-vos de canviar aquesta informació al vostre codificador i també la relació d'aspecte que apareix a la secció exec-ffmpeg del nginx.conffitxer que he subministrat; en cas contrari, obtindreu alguns canals de vídeo d'aspecte boig.

Un cop configurat el codificador, podeu provar-ho tot. Inicieu el codificador amb la vostra càmera web o algun tipus de pinso de prova que s'hi executi. Podeu veure la vostra emissió en aquest moment amb el reproductor VLC mitjançant URL com ara:

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

Aquests són per al vostre flux de vídeo principal i el vostre mòbil, respectivament. Substituïu la vostra IP i la clau de transmissió en conseqüència.

Després d'haver emès correctament la vostra primera transmissió, comproveu (mitjançant ssh o ftp) que la vostra emissió en directe s'hagi gravat a la /video_recordingscarpeta del vostre Vultr VPS. També podeu provar de reproduir aquest fitxer gravat a VLC amb una URL com:

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

Les estadístiques de Nginx també estan disponibles (amb Nginx stub_status). Per veure les estadístiques de visitants/espectadors, accediu a:

http://my-ip/stats

Per veure el vostre vídeo en una pàgina web, necessitareu un reproductor incrustable. Hi ha molts reproductors incrustables disponibles que reproduiran vídeo HLS. Fa uns anys que faig servir JW Player, però la versió gratuïta no jugarà HLS. Flowplayer i Bitdash de Bitmovin (entre altres solucions) són prou generosos com per oferir una versió no comercial dels seus reproductors de manera gratuïta que farà que el vostre flux HLS estigui incrustat en una pàgina web. Per a aquest article, els he provat tots dos i he trobat que tots dos funcionen força bé amb el meu servidor de vídeo basat en Vultr/Nginx. Mostraré breument com vaig fer que Flowplayer vagi amb la meva màquina de prova.

Si utilitzeu la transmissió HLS en directe d'una manera regular, sostinguda o comercial, us animo a comprar una llicència de Flowplayer o del reproductor que decidiu utilitzar. Obtindreu un reproductor que té menys restriccions, més funcions i que es pot marcar a la vostra organització. També rebràs suport, que pot ser molt important. A part del Vultr VPS, aquest és realment l'únic cost associat al projecte.

Abans de fer qualsevol altra cosa, és important tenir cura del que s'anomenen restriccions "entre dominis", que d'altra manera tancarien la vostra capacitat de transmetre en temps real a una pàgina web/lloc web. Creeu un crossdomain.xmlfitxer a la vostra nginx/htmlcarpeta i introduïu-hi instruccions per permetre que les dades flueixin entre dominis:

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

Primer copieu (des d'aquesta pàgina) i després enganxeu (clic dret) al camp de l'editor nano les dades XML següents:

<?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>

Premeu Ctrl + O per escriure, després Ctrl + X per desar el fitxer al disc i sortir.

Vaig agafar l'HTML5 (versió 6.0.3) de Flowplayer que em va donar una sèrie de fitxers i una carpeta quan vaig descomprimir. Vaig penjar tots els fitxers i la carpeta en una subcarpeta de la carpeta arrel Nginx/HTML que vaig anomenar "flowplayer". El camí exacte era /usr/local/nginx/html/flowplayer.

Per provar el nostre vídeo quan està incrustat en una pàgina web, creeu un parell de fitxers HTML a l'arrel de la carpeta Nginx/HTML amb nano i ompliu-los amb el contingut següent.

Dossier:

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

codi 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>

Dossier:

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

codi 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>

Assegureu-vos de substituir "my-ip" i "my-stream-key" per les vostres dades.

Heu de substituir el camí flowplayer/skin/functional.csspel signe "#" al full d'estil href="#". El programari tutorial elimina el camí. Heu d'emplenar una URL a la src=""part: el programari tutorial, ús http://my-ip/live/my-stream-key/index.m3u8i http://my-ip/mobile/my-stream-key/index.m3u8, l'esborran, respectivament. També heu d'afegir srcetiquetes d' script al capçal per a tots dos jquery-1.11.2.min.jsi per a flowplayer.min.js. El programari tutorial elimina les etiquetes. Podeu trobar com crear aquestes etiquetes mirant el example htmlfitxer inclòs amb el kit de Flowplayer.

Inicieu el codificador amb la vostra càmera web o algun tipus de pinso de prova que s'hi executi. Podeu veure la vostra emissió en un navegador mitjançant els URL següents:

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

La primera pàgina només mostra cadascun dels vostres fluxos: el principal i el de la plataforma mòbil. Podreu iniciar-los tots dos i veure'ls. Notareu que el flux de la plataforma mòbil és de mida més petita. Aquests passos són només per assegurar-se que tot funciona.

La segona pàgina mostra un sol flux. Però es configura d'una manera que s'anomena "streaming progressiu". Això vol dir que quan un espectador reprodueix el vídeo, tant el servidor com el reproductor intenten oferir a l'espectador la transmissió d'alta velocitat i alta qualitat si la connexió de l'espectador pot mantenir-la. Si la seva connexió és deficient i no pot mantenir la connexió, es redueix fins a mostrar el flux de bits (mòbil) més baix que és 200 kbps més baix d'amplada de banda. Si ho desitgeu, podeu crear fluxos més progressius i progressius amb ffmpeg i configurar-los amb el meu exemple.

He provat aquesta configuració en un sol nucli, 1 GB Vultr VPS i he trobat que amb una única transmissió en directe, a més de la transmissió de flux mòbil que crea amb ffmpeg, l'ús de la CPU era inferior al 35% i només havia consumit 100 MB de el meu 1 GB de RAM. Ara és una configuració molt eficient.

Si teniu previst reproduir un vídeo que és molt més gran en dimensions de píxels que SD, és possible que hàgiu d'utilitzar un VPS més potent. Vaig tenir curiositat per això i vaig executar el meu flux principal fins a 1280 x 960 píxels i 2 Mbps, posant una càrrega addicional a les coses. Però el VPS encara només utilitzava un 50% de CPU i l'ús de memòria es va mantenir en 100 MB. Vaig afegir una dotzena de visualitzadors/navegadors i gairebé no va fer cap diferència en la càrrega del VPS; només va augmentar l'ample de banda utilitzat. Estic segur que la creació de fluxos addicionals trans-rated amb ffmpeg continuaria posant càrrega addicional al sistema.

He utilitzat aquest tipus de servidor en entorns de producció amb entre 50 i 100 usuaris simultàniament i he trobat que l'ús de recursos augmentava molt poc amb l'augment de les connexions de visualització. Experimenta amb ell. Però crec que la majoria dels usuaris estarien contents amb un VPS d'1 GB d'un sol nucli. Gaudeix del teu nou servidor de transmissió HLS!