Comment créer un Live sous un VPS (RTMP)  8 min  

Bonjour,

Aujourd'hui, nous allons voir comment créer un système de Live en direct sous un VPS avec RTMP. Premièrement, il nous faudra un VPS sous Linux. Debian, Ubuntu ou autre. Prenez ce qu'il vous convient.

1. Mise à jour des packages et de l'OS

Première étape une fois connecté sur le SSH. Nous mettons à jour les packages et l'OS. Ainsi, nous installons certains packages qui nous seront utile pour la suite du tutoriel.

  apt-get update
  apt-get upgrade
  apt-get install -y git build-essential ffmpeg libpcre3 libpcre3-dev libssl-dev zlib1g-dev

2. Installation de NGINX

Une fois ces packages installés, nous allons installer NGINX pour avoir notre site web de fonctionnel. Cela est primordial si nous souhaitons voir notre "live".

  sudo apt install nginx-core
  sudo apt install nginx-extras
  sudo apt install nginx-full
  sudo apt install nginx-light

3. Installation du serveur RTMP sous NGINX

Cela nous permettra d'avoir le flux RTMP d'actif. Cependant, un membre normal ne peut pas visionner le live comme cela. Nous allons par la suite, configurer notre serveur NGINX pour le rendre "lisible".

  sudo apt install libnginx-mod-rtmp

4. Configuration de NGINX

Comme dit plus haut, une fois les installations faites, nous allons devoir configurer notre NGINX. Nous allons dans un premier temps définir le serveur RTMP sur la configuration, pour qu'on puisse faire le live correctement, avec un moyen de stocker le live et le diffuser par la suite.

nano /etc/nginx/nginx.conf

Une fois sur le fichier de configuration. Nous allons donc définir le serveur RTMP avec certaines configurations. Nous allons donc faire un stream sur rtmp://votre_serveur/live. Le stream sera en diffusion sur /hls sous format .ts et rediffusé en .m3u8.

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
#
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		proxy      on;
#	}
#}
rtmp {
  server {
    listen 1935;
    chunk_size 8192;
    application live {
      live on;
		  meta on;
		  record off;
		  interleave off;
		  wait_key on;
		  wait_video off;
		  idle_streams off;
		  sync 300ms;
		  session_relay on;
		  max_connections 1000;
		  allow publish all;
		  allow play all;
		  hls off;
		  dash off;

		  # on_publish http://VOTRE_SERVEUR/plugin/Live/on_publish.php;
		  # on_play http://VOTRE_SERVEUR/plugin/Live/on_play.php;
		  # on_record_done http://VOTRE_SERVEUR/plugin/Live/on_record_done.php;

		  push rtmp://VOTRE_SERVEUR/hls;
		  push rtmp://VOTRE_SERVEUR/dash;
		}
		application hls {
			live on;
			record off;
			meta copy;
			allow publish 127.0.0.1;
			allow play all;

			hls on;
			hls_nested on;
			hls_cleanup on;
			hls_sync 100ms;
			hls_fragment 2s;
			hls_playlist_length 10s;
			hls_path /var/www/html/hls;
			}
		application dash {
			live on;
			record off;
			allow publish 127.0.0.1;
			deny publish all;
			allow play all;

			dash on;
			dash_nested on;
			dash_cleanup on;
			dash_fragment 5s;
			dash_playlist_length 20s;
			dash_path /var/www/html/dash;
			}
		application vods {
			play /var/www/html/recordings;
			allow play all;
			}
		application vods_http {
			play /var/www/html/recordings;
			allow play all;
		}
  }
}

Voilà, si vous vous sentez capable de modifier certaines valeurs, libre à vous. Si vous souhaitez une rediffusion après un live, vous pouvez activer l'option. Ou encore augmenter la durée d'un fichier (qui risque de prendre beaucoup plus d'espace disque)

Une fois cette configuration mise / modifié, vous pouvez redémarrer NGINX

systemctl restart nginx

5. Mise en place du site avec le rendu du live

Premièrement, vous devez télécharger les fichiers suivants :

GitHub : Video.JS GitHub : Video.JS - HTTP Streaming

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>LiveStream - Dev-Time</title>
  <!--
  Uses the latest versions of video.js and videojs-http-streaming.

  To use specific versions, please change the URLs to the form:

  <link href="https://unpkg.com/[email protected]/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/[email protected]/dist/video.js"></script>
  <script src="https://unpkg.com/@videojs/[email protected]/dist/videojs-http-streaming.js"></script>
  -->

  <link href="videojs/video-js.css" rel="stylesheet">
</head>
<body>
<center>
  <video-js id="live_stream" class="vjs-default-skin" controls preload="auto" width="auto" height="auto">
    <source src="../hls/index.m3u8" type="application/x-mpegURL">
  </video-js>
  
  <script src='videojs/video.js'></script>
  <script src="videojs/videojs-http-streaming.js"></script>
  
  <script>
    var player = videojs('live_stream');
  </script>
 </center>
</body>
</html>

Ensuite, sur votre /var/www/HTML/, vous devez créer les dossiers suivants :

  • dash
  • hls
  • recordings

Ces dossiers seront obligatoires pour la diffusion d'un live.

Après, en plus de cela, vous devez avoir "videojs" avec tout le contenu de ce dernier et l'index.html

6. Tentative du live

Pour cela, nous allons utiliser OBS. La première étape est de faire un nouveau "Flux" de stream. Nous choisissons "personnalisé".

Le serveur RTMP signifie : rtmp://votre_serveur/live
Clé de stream reste vide, car nous n'avons pas défini de clé dans ce tutoriel. Cependant, si vous souhaitez signifier une clé, exemple "demo_mateo". Lorsque nous allons lancer le "live". Nous allons avoir un nouveau dossier dans "/var/www/html/hls/demo_mateo"

C’est-à-dire que c'est le flux "demo_mateo" qui diffuse. Grâce à cela, nous pouvons "stream" à plusieurs. Il faudra donc juste améliorer votre index.html pour le rendre a plusieurs utilisateurs. Et également sécuriser l'authentification, car nous n'utilisons aucune authentification sur ce tutoriel.

 

Et voilà ! Vous pouvez désormais faire des lives sous votre VPS. Pour cela, si vous souhaitez faire du live sous un VPS, nous vous conseillons Contabo notre partenaire.

Auteur

KilioZ

Étudiant en BTS Travaux Publics au Pas-de-Calais. Fondateur de Dev-Time, développeur web depuis 2013.


  Discord : Mateo M. 🎃#6452   Reddit : KilioZDev