Création d'un streaming vidéo en temps réel : de zéro à l'affichage sur le navigateur

Le problème dont personne ne parle

Vous avez probablement remarqué que les flux de caméras de sécurité, webcams en direct et vidéos d'appareils IoT ne « fonctionnent jamais simplement » sur le web. Il y a une raison à cette frustration.

Voici le cœur du problème : la plupart des caméras et équipements vidéo professionnels diffusent en utilisant RTSP (Real Time Streaming Protocol), mais les navigateurs web ne le prennent tout simplement pas en charge. Cela résulte d'une décision de sécurité prise entre 2010 et 2015, lorsque les navigateurs ont abandonné la prise en charge de RTSP. Soudainement, afficher un flux vidéo en direct sur une page web est devenu un véritable casse-tête d’ingénierie.

La solution ? Deux outils qui travaillent main dans la main : FFmpeg (le couteau suisse légendaire de la vidéo) et MediaMTX (une passerelle de streaming légère). Ensemble, ils traduisent entre ce que les caméras parlent (RTSP) et ce que les navigateurs comprennent (WebRTC). Netflix utilise des pipelines similaires. Votre système de sécurité local probablement aussi.

Ce que fait réellement chaque outil

FFmpeg : La bête du traitement vidéo

FFmpeg est l’outil vidéo le plus puissant que vous n’avez jamais configuré. Il gère tout le travail ennuyeux :

• Capture de la vidéo depuis des webcams ou des fichiers
• Ré-encodage dans des formats compatibles navigateur (souvent H.264)
• Diffusion vers des serveurs en utilisant RTSP ou RTMP
• Le tout en temps réel sans s’étouffer

Le flux de travail de base : capture → encode → envoie.

MediaMTX : Le traducteur de protocoles

FFmpeg ne peut pas gérer plusieurs spectateurs simultanément. C’est là que MediaMTX intervient. C’est essentiellement un intermédiaire de protocoles :

• Accepte les flux RTSP, RTMP, WebRTC ou HLS
• Les reconditionne dans différents formats selon les clients
• Surtout : convertit RTSP en WebRTC pour que les navigateurs puissent le lire
• Fait tout cela avec un seul binaire et un fichier de configuration

Mise en place (La partie pratique)

Installation de FFmpeg

Linux/Ubuntu :

sudo apt-get update sudo apt-get install ffmpeg

macOS :

brew install ffmpeg

Windows :

• Télécharger depuis ffmpeg.org (utiliser la version gyan.dev)
• Extraire dans C:\ffmpeg
• Ajouter C:\ffmpeg\bin à votre PATH système
• Vérifier : ffmpeg -version dans l’invite de commande

Installation de MediaMTX

Linux/macOS :

wget https://github.com/bluenviron/mediamtx/releases/download/v1.15.0/mediamtx_v1.15.0_linux_amd64.tar.gz tar -xzf mediamtx_v1.15.0_linux_amd64.tar.gz chmod +x mediamtx sudo mv mediamtx /usr/local/bin/ mediamtx

Windows :

• Télécharger le .zip depuis les releases GitHub
• Extraire et lancer mediamtx.exe
• (Windows Defender peut le signaler—désactivez temporairement si besoin)

Les trois projets

Projet 1 : Diffuser un fichier vidéo

Créez mediamtx.yml :

paths: test_video: source: publisher

Lancez-le : mediamtx mediamtx.yml

Puis diffusez un fichier vidéo vers lui :

ffmpeg -re -i your_video.mp4 -c:v libx264 -preset fast -c:a aac -f rtsp rtsp://localhost:8554/test_video

Explications :

• -re = lit à la cadence d’origine (essentiel pour un rendu « live »)
• -c:v libx264 = utilise le codec H.264 (large compatibilité)
• -preset fast = compromis vitesse/qualité de compression
• rtsp://localhost:8554/test_video = adresse de destination

Ouvrez VLC, allez dans Média → Ouvrir un flux réseau, collez rtsp://localhost:8554/test_video. Vous devriez voir la vidéo. C’est MediaMTX à l’œuvre.

Projet 2 : Diffuser votre webcam en direct

Mettez à jour mediamtx.yml pour ajouter un nouveau chemin :

paths: test_video: source: publisher webcam: source: publisher

Windows (utilisation de DirectShow) :

ffmpeg -f dshow -rtbufsize 100M -i video="Integrated Webcam" -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

macOS :

ffmpeg -f avfoundation -framerate 30 -video_size 1280x720 -i "0" -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

Linux :

ffmpeg -f v4l2 -i /dev/video0 -c:v libx264 -preset ultrafast -tune zerolatency -c:a aac -f rtsp rtsp://localhost:8554/webcam

Paramètres clés :

• -preset ultrafast = priorité à la vitesse (important pour le live)
• -tune zerolatency = optimisé pour le temps réel (latence minimale)
• /webcam = le chemin défini dans la config

Projet 3 : Le moment magique—WebRTC dans votre navigateur

C’est là que ça devient intéressant. Mettez à jour mediamtx.yml :

webrtc: yes webrtcAddress: :8889 webrtcEncryption: no webrtcAllowOrigin: '*' webrtcLocalUDPAddress: :8189 webrtcIPsFromInterfaces: yes

paths: test_video: source: publisher webcam: source: publisher

Redémarrez MediaMTX. Ouvrez maintenant votre navigateur sur http://localhost:8889/webrtc/webcam

Votre flux webcam se charge directement dans le navigateur. Aucun plugin. Pas de RTSP. Juste votre vidéo en direct en temps réel.

Ce qui s’est réellement passé

1. Votre webcam génère des images brutes
2. FFmpeg les capture, les encode en H.264, diffuse en RTSP vers MediaMTX
3. MediaMTX reçoit le flux RTSP et l’attend
4. Le navigateur demande le flux WebRTC via le chemin /webcam
5. MediaMTX convertit RTSP → WebRTC (aucun ré-encodage, juste un reconditionnement)
6. Le navigateur reçoit les paquets WebRTC et les affiche

La beauté : MediaMTX ne ré-encode pas. Il reconditionne simplement le flux H.264 dans différents formats de conteneur. C’est pourquoi la latence reste faible.

Les limites actuelles

Ce que nous avons construit est idéal pour les tests locaux, mais pour la production il faut :

• Authentification (pour l’instant tout le monde peut accéder)
• Fonctionne uniquement sur localhost (pas prêt pour Internet)
• Pas encore de support pour caméras IP
• Aucun monitoring ni gestion des erreurs

C’est un socle solide. La même architecture peut évoluer d’une simple webcam de chambre à une infrastructure digne de Netflix diffusant des milliers de flux simultanés.

Et ensuite ?

La partie 2 couvrira : sécurisation de la chaîne, connexion de vraies caméras IP, gestion de l’authentification et déploiement au-delà du localhost. C’est là que l’ingénierie prend tout son sens—et où la plupart des projets amateurs échouent.