Configurer Nginx sur Ubuntu pour diffuser des vidéos HLS en direct

HTTP Live Streaming (HLS) est un protocole vidéo en streaming très robuste mis en œuvre par Apple Inc. HLS utilise des transactions HTTP qui traversent des pare-feu, des proxys et peuvent être distribuées facilement via des CDN. Par conséquent, cette technologie est capable d'atteindre une audience beaucoup plus large que le RTP ou d'autres protocoles basés sur UDP. Aujourd'hui, une grande partie de la vidéo en direct en ligne est hébergée par des systèmes coûteux qui utilisent HLS, mais ils sont généralement coûteux et nécessitent beaucoup de ressources de serveur. Ce tutoriel vous montrera comment configurer un VPS Ubuntu 14.04 VULTR très abordable pour faire des événements de streaming HLS en direct en utilisant uniquement des logiciels open source.

La première étape consiste à lire et à configurer votre serveur conformément au Vultr Doc " Setup Nginx-RTMP on Ubuntu 14.04 ". Les instructions contenues dans ce document étaient les plus complètes pour l'étape de configuration, au moment de la rédaction. Je voudrais mentionner que vous souhaiterez peut-être remplacer "nginx-1.7.5" par "nginx-1.9.4" ou quelle que soit la dernière version de Nginx disponible. L'autre suggestion est de compiler Nginx avec le module d'état du stub HTTP afin de vous donner la possibilité de surveiller le nombre de visionneuses HLS en direct que vous avez plus tard.

Au lieu de compiler avec:

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

Utilisez cette chaîne dans la procédure décrite dans le document prérequis:

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

L'exemple de ce didacticiel créera à la fois des flux "en direct" et "mobiles" (optimisés) et utilisera ffmpeg (installé dans le didacticiel précédent) pour générer le flux HLS optimisé pour les mobiles et à débit ajusté. L'exemple montrera également comment amener le serveur à enregistrer automatiquement vos flux en direct et à vous permettre de lire les enregistrements en tant que service de relecture de vidéo à la demande (VOD).

Tout d'abord, créez les structures de dossiers nécessaires pour contenir les manifestes HLS en direct et mobiles et les fragments vidéo:

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

C'est probablement une bonne idée d'activer votre pare-feu si vous ne l'avez pas déjà fait. Si tel est le cas, vous devez autoriser le trafic vers les ports utilisés par Nginx et HLS. Si vous souhaitez exécuter sans le pare-feu pour l'instant, ignorez la section ufw ci-dessous.

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

Le streaming HLS nécessite une configuration Nginx significativement différente de la configuration RTMP du premier article. Modifiez votre nginx.conffichier pour utiliser ce qui suit, en remplaçant "my-ip" et "my-stream-key" par vos informations. Vous pouvez utiliser tout ce que vous souhaitez pour "my-stream-key", c'est juste un mot qui vous est unique et utile. Vous pouvez d'abord sauvegarder votre fichier de configuration d'origine, puis coller mes informations de configuration fournies dans l'éditeur, en remplaçant tout ce qui s'y trouvait:

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

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

Appuyez sur Ctrl + X pour quitter. Dites «oui» pour enregistrer les modifications.

Vous pouvez trouver des instructions claires et des exemples des variables possibles dans ce nginx.conffichier si vous interrogez votre moteur de recherche préféré pour les "directives nginx-rtmp". J'utilise nginx-rtmp avec HLS depuis quelques années maintenant, sans utiliser les directives "allow publish" et "deny publish" et je n'ai vu aucune instance de personnes utilisant / envahissant mes serveurs vidéo. Je n'ai donc pas inclus ces directives ici. Lisez et ajoutez ces directives si vous le souhaitez.

Après avoir modifié le nginx.conffichier, vous devez redémarrer Nginx pour utiliser la nouvelle configuration:

sudo service nginx restart

Surveillez attentivement les messages d'erreur Nginx et corrigez les erreurs qui pourraient avoir été causées par une faute d'orthographe, la propriété du dossier ou des problèmes d'autorisations. Si vous n'avez aucun message d'erreur, vous êtes prêt à créer votre flux d'encodage.

Vous devez avoir un encodeur vidéo pour créer le flux. J'utilise OBS (Open Broadcaster Software) - qui est open-source et fonctionne bien pour moi. Il existe d'autres solutions au choix, qui n'entrent pas dans le cadre de ce didacticiel. Je ne couvrirai pas tout sur la configuration d'un encodeur vidéo RTMP. Ils nécessitent tous à peu près les mêmes variables d'entrée. Les paramètres clés que vous devrez saisir afin d'utiliser ma nginx.confconfiguration exacte et de bien fonctionner sur la plupart des lecteurs / navigateurs / plates-formes sont les suivants:

1. Encoder-x264
2. Débit variable (pas CBR ou Constant Bit Rate), qualité la plus élevée
3. Débit binaire max-600 kbps
4. Audio-Codec-AAC
5. Format audio-44,1 kHz
6. Audio-bitrate-64kbps
7. URL FMS - "rtmp: // my-ip: 1935 / live"
8. Clé de flux - "my-stream-key"
9. Résolution-640x480
10. FPS (images par seconde) -30
11. CFR (Frame Frame Rate) - Oui
12. Intervalle d'images clés - 2 secondes (une image clé toutes les 2 secondes)
13. x264 Encoding Profile-baseline (peut fonctionner avec le principal - dépend du joueur utilisé)
14. CPU x264 Présent-très rapide

Je recommande d'essayer différents encodeurs et de les expérimenter. Vous pouvez souhaiter un rapport d'aspect large ou votre appareil photo (ou autre matériel de diffusion) peut l'exiger. Si c'est le cas, assurez-vous de modifier ces informations dans votre encodeur et également le rapport d'aspect répertorié dans la section exec-ffmpeg du nginx.conffichier que j'ai fourni; sinon, vous obtiendrez des flux vidéo loufoques.

Une fois votre encodeur configuré, vous pouvez tout tester. Démarrez l'encodeur avec votre webcam ou une sorte de test-fourrage fonctionnant dessus. Vous pouvez visualiser votre diffusion à ce stade avec le lecteur VLC en utilisant des URL telles que:

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

Ils concernent respectivement vos flux vidéo principal et mobile. Remplacez votre IP et votre clé de flux en conséquence.

Après avoir diffusé avec succès votre premier contrôle de flux (via ssh ou ftp), votre diffusion en direct a été enregistrée dans le /video_recordingsdossier de votre Vultr VPS. Vous pouvez également essayer de lire ce fichier enregistré dans VLC avec une URL comme:

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

Les statistiques Nginx sont également disponibles (avec Nginx stub_status). Pour afficher les statistiques des visiteurs / téléspectateurs, accédez à:

http://my-ip/stats

Pour visualiser votre vidéo sur une page Web, vous aurez besoin d'un lecteur intégrable. Il existe de nombreux lecteurs intégrables qui joueront la vidéo HLS. J'utilise JW Player depuis quelques années maintenant, mais la version gratuite ne jouera pas HLS. Flowplayer et Bitdash de Bitmovin (entre autres solutions) sont suffisamment généreux pour offrir gratuitement une version non commerciale de leurs lecteurs qui rendra votre flux HLS intégré dans une page Web. Pour cet article, je les ai essayés tous les deux et je les ai trouvés tous les deux fonctionnant assez bien avec mon serveur vidéo basé sur Vultr / Nginx. Je vais montrer brièvement comment j'ai fait fonctionner Flowplayer avec ma machine de banc d'essai.

Si vous comptez utiliser le streaming HLS en direct de manière régulière, soutenue ou commerciale, je vous encourage à acheter une licence auprès de Flowplayer ou du joueur que vous décidez d'utiliser. Vous obtiendrez un joueur qui a moins de restrictions, plus de fonctionnalités et qui peut être personnalisé à votre organisation. Vous bénéficierez également d'une assistance, ce qui peut être très important. Hormis le Vultr VPS, c'est vraiment le seul coût associé au projet.

Avant de faire quoi que ce soit d'autre, il est important de prendre soin de ce que l'on appelle les restrictions "interdomaines", qui autrement empêcheraient votre capacité de diffuser sur une page Web / un site Web. Créez un crossdomain.xmlfichier dans votre nginx/htmldossier et insérez-y des instructions pour permettre aux données de circuler entre les domaines:

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

Copiez d'abord (à partir de cette page) puis collez (clic droit) dans le champ de l'éditeur nano les données XML suivantes:

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

Appuyez sur Ctrl + O pour écrire, puis sur Ctrl + X pour enregistrer le fichier sur le disque et quitter.

J'ai saisi le HTML5 (version 6.0.3) de Flowplayer qui m'a donné un certain nombre de fichiers et un dossier une fois décompressé. J'ai téléchargé tous les fichiers et le dossier dans un sous-dossier du dossier racine Nginx / HTML que j'ai nommé "flowplayer". Le chemin exact était /usr/local/nginx/html/flowplayer.

Afin de tester notre vidéo lorsqu'elle est intégrée dans une page Web, créez quelques fichiers HTML à la racine du dossier Nginx / HTML à l'aide de nano et remplissez-les avec le contenu suivant.

Fichier:

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

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

Fichier:

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

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

Assurez-vous de remplacer "my-ip" et "my-stream-key" par vos données.

Vous devez remplacer le chemin flowplayer/skin/functional.cssd' accès par le signe "#" dans la feuille de style href="#". Le logiciel du didacticiel supprime le chemin. Vous devez remplir une URL dans la src=""partie - elle est supprimée par le logiciel tutoriel, utilisez http://my-ip/live/my-stream-key/index.m3u8et http://my-ip/mobile/my-stream-key/index.m3u8, respectivement. Vous devez également ajouter des srcbalises de script dans la tête pour jquery-1.11.2.min.jset pour flowplayer.min.js. Les balises sont supprimées par le logiciel de didacticiel. Vous pouvez trouver comment façonner ces balises en consultant le example htmlfichier inclus avec le kit Flowplayer.

Démarrez l'encodeur avec votre webcam ou une sorte de test-fourrage fonctionnant dessus. Vous pouvez afficher votre diffusion dans un navigateur à l'aide des URL suivantes:

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

La première page affiche simplement chacun de vos flux - le principal et la plate-forme mobile. Vous pourrez les démarrer tous les deux et les visualiser. Vous remarquerez que le flux de la plate-forme mobile est de plus petite taille. Ces étapes visent simplement à vous assurer que tout fonctionne.

La deuxième page affiche un seul flux. Mais il est mis en place d'une manière qui est appelée "streaming progressif". Cela signifie que lorsqu'un spectateur lit la vidéo, le serveur et le lecteur essaient de donner au spectateur le flux à haut débit et de haute qualité si la connexion du spectateur peut la maintenir. Si leur connexion est médiocre et qu'elle ne peut pas maintenir la connexion, elle revient à afficher le flux à débit binaire inférieur (mobile) qui est 200 kbps de bande passante inférieure. Si vous le souhaitez, vous pouvez créer des flux progressifs plus progressifs avec ffmpeg et les configurer en utilisant mon exemple.

J'ai testé cette configuration sur un seul cœur, 1 Go Vultr VPS et j'ai trouvé qu'avec un seul flux en direct, plus le flux mobile trans-évalué qu'il crée avec ffmpeg, l'utilisation du processeur était inférieure à 35% et il n'avait consommé que 100 Mo de mon 1 Go de RAM. Voilà une configuration très efficace.

Si vous envisagez de diffuser une vidéo dont la taille en pixels est beaucoup plus grande que la SD, vous constaterez peut-être que vous devez utiliser un VPS plus puissant. J'étais curieux à ce sujet et j'ai exécuté mon flux principal jusqu'à 1280x960 pixels et 2 Mbps - mettant une charge supplémentaire sur les choses. Mais le VPS n'utilisait toujours que 50% de CPU et l'utilisation de la mémoire restait à 100 Mo. J'ai ajouté une douzaine de visionneuses / navigateurs et cela n'a fait pratiquement aucune différence de charge sur le VPS - seule la bande passante utilisée a augmenté. Je suis sûr que la création de flux trans-évalués supplémentaires avec ffmpeg continuerait de mettre une charge supplémentaire sur le système.

J'ai utilisé ce type de serveur dans des environnements de production avec entre 50 et 100 utilisateurs simultanés et j'ai constaté que l'utilisation des ressources augmentait très peu avec l'augmentation des connexions de la visionneuse. Expérimentez avec. Mais je pense que la plupart des utilisateurs seraient heureux d'utiliser un VPS monocœur de 1 Go. Profitez de votre nouveau serveur de streaming HLS!