Explication détaillée des idées pour implémenter la fonction de diffusion vidéo en direct en HTML5

Il n'y a pas si longtemps, j'ai pris le temps de faire des recherches et d'explorer la diffusion vidéo en direct actuellement populaire, de comprendre son processus de mise en œuvre global et d'explorer la faisabilité de la diffusion en direct HTML5 mobile.

On constate que les solutions actuelles de diffusion vidéo en direct sur le WEB sont HLS et RTMP. L'extrémité WEB mobile est actuellement basée sur HLS (HLS a des problèmes de latence et RTMP peut également être utilisé avec l'aide de video.js). la partie PC est basée sur RTMP, qui offre de meilleures performances en temps réel, nous commencerons alors à partager le thème de diffusion en direct H5 autour de ces deux protocoles de streaming vidéo.

HTTP Live Streaming (HLS en abrégé) est un protocole de streaming vidéo basé sur HTTP implémenté par Apple et Safari sur Mac OS et Safari sur iOS. Les versions supérieures d'Android ajoutent également la prise en charge de HLS. Certains clients courants tels que MPlayerX et VLC prennent également en charge le protocole HLS.

Le protocole HLS est basé sur HTTP et un serveur qui fournit HLS doit faire deux choses :

Encodage : Encodez les images au format H.263, encodez les sons en MP3 ou HE-AAC, et enfin emballez-les dans des conteneurs MPEG-2 TS (Transport Stream) ; Split : Coupez les fichiers TS encodés en longueurs égales. Un petit fichier avec le suffixe ; ts et génère un fichier d'index en texte brut .m3u8 ; le navigateur utilise des fichiers m3u8. m3u8 est très similaire au format de liste audio m3u. Vous pouvez simplement considérer m3u8 comme une liste de lecture contenant plusieurs fichiers ts. Le lecteur les lit un par un dans l'ordre, puis demande le fichier m3u8 après les avoir tous lus, et obtient la playlist contenant le dernier fichier ts pour continuer la lecture, et le cycle recommence. L'ensemble du processus de diffusion en direct repose sur un m3u8 constamment mis à jour et un tas de petits fichiers ts doivent être mis à jour dynamiquement, et les ts peuvent passer par CDN. Un format de fichier m3u8 typique est le suivant :

 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000gear1/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111gear2/prog_index.m3u8#EXT-X -STREAM -INF:ID-PROGRAMME=1, BANDE PASSANTE=484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDE PASSANTE=737777gear4/prog_index.m3u8

On peut voir que l'essence du protocole HLS est toujours une requête/réponse HTTP, il a donc une bonne adaptabilité et ne sera pas affecté par les pare-feu. Mais il a aussi une faiblesse fatale : le retard est très flagrant. Si chaque ts est divisé en 5 secondes et qu'un m3u8 contient 6 index ts, cela entraînera un retard d'au moins 30 secondes. Si vous réduisez la longueur de chaque ts et réduisez le nombre d'index dans m3u8, le délai sera effectivement réduit, mais cela entraînera une mise en mémoire tampon plus fréquente et la pression des requêtes sur le serveur augmentera également de façon exponentielle. Nous ne pouvons donc trouver un compromis qu’en fonction de la situation réelle.

Pour les navigateurs prenant en charge HLS, écrivez simplement ceci pour jouer :

 <video src=./bipbopall.m3u8″ height=300″ width=400″ preload=auto autoplay=autoplay loop=loop webkit-playsinline=true></video>

Remarque : HLS ne prend en charge que le navigateur Safari sur PC, similaire au navigateur Chrome utilisant la vidéo HTML5.

La balise ne peut pas lire le format m3u8. Vous pouvez utiliser directement certaines solutions relativement matures sur Internet, telles que : sewise-player, MediaElement, videojs-contrib-hls et jwplayer.

Real Time Messaging Protocol (RTMP en abrégé) est un ensemble de protocoles de diffusion vidéo en direct développé par Macromedia et appartient désormais à Adobe. Cette solution nécessite la création d'un service de streaming RTMP spécialisé tel qu'Adobe Media Server, et seul Flash peut être utilisé pour implémenter le lecteur dans le navigateur. Ses performances en temps réel sont très bonnes et le délai est très faible, mais son inconvénient est qu'il ne prend pas en charge la lecture WEB mobile.

Bien qu'il ne puisse pas être lu sur la page H5 d'iOS, vous pouvez écrire votre propre décodage et analyse pour les applications iOS natives, avec une faible latence et de bonnes performances en temps réel. Côté navigateur, vidéo HTML5

La balise ne peut pas lire les vidéos du protocole RTMP, ce qui peut être réalisé via video.js.

 <link href=http://vjs.zencdn.net/5.8.8/video-js.css rel=stylesheet><video id=example_video_1″ class=video-js vjs-default-skin CONTROLS preload=auto width=640 hauteur=264 boucle=boucle webkit-playsinline><source src=rtmp://10.14.221.17:1935/rtmplive/home type='rtmp/flv '></video><script src=http://vjs.zencdn.net/5.8.8/video.js>< /script><script>videojs.options.flash.swf = 'video.swf ';videojs('example_video_1′).ready(function() {this.play();});</script>

À l'heure actuelle, les formats d'affichage de diffusion en direct sont généralement dominés par des pages telles que YY Live et Yingke Live. Vous pouvez voir que sa structure peut être divisée en trois couches :

① Couche vidéo d'arrière-plan

② Module de suivi et de commentaires

③ Comme l'animation

Le H5 actuel est similaire à une page de diffusion en direct, et sa mise en œuvre n'est pas techniquement difficile. Il peut être divisé en :

① L'arrière-plan vidéo en bas utilise la balise vidéo pour jouer

② Le module de suivi et de commentaires utilise WebScoket pour envoyer et recevoir de nouveaux messages en temps réel via DOM et CSS3.

③ Aimez et utilisez l'animation CSS3

Après avoir compris le format de diffusion en direct, comprenons le processus de diffusion en direct dans son ensemble.

Le processus global de diffusion en direct peut être grossièrement divisé en :

Fin de la collection vidéo : il peut s'agir du périphérique d'entrée audio et vidéo de l'ordinateur, ou de la caméra ou du microphone du téléphone mobile. Actuellement, la vidéo du téléphone mobile est le principal.

Serveur vidéo de streaming en direct : un serveur Nginx collecte le flux vidéo (encodage H264/ACC) transmis par l'extrémité d'enregistrement vidéo, l'analyse et l'encode côté serveur, et pousse le flux vidéo au format RTMP/HLS vers l'extrémité de lecture vidéo.

Lecteur vidéo : Il peut s'agir du lecteur de l'ordinateur (QuickTime Player, VLC), du lecteur natif du téléphone mobile, ou de la balise vidéo du H5, etc. Actuellement, le lecteur natif du téléphone mobile est le principal.

(Groupe d'échange d'apprentissage Web front-end : 328058344. Le chat est interdit. Si vous n'êtes pas intéressé, veuillez ne pas participer !)

Pour l'enregistrement vidéo H5, vous pouvez utiliser le puissant webRTC (Web Real-Time Communication), qui est une technologie qui prend en charge les navigateurs Web pour les conversations vocales ou vidéo en temps réel. L'inconvénient est qu'elle n'est bien prise en charge que sur Chrome sur PC. et pas très bien sur les appareils mobiles, idéal.

Processus de base d'enregistrement vidéo à l'aide de webRTC

① Appelez window.navigator.webkitGetUserMedia()

Obtenez les données vidéo de la caméra PC de l'utilisateur.

② Convertissez les données du flux vidéo obtenues en window.webkitRTCPeerConnection

(un format de données de streaming vidéo).

③ Utilisez WebScoket

Transmettez les données de streaming vidéo au serveur.

Avis:

Bien que Google ait fait la promotion du WebRTC et que de nombreux produits matures soient apparus, la plupart des navigateurs mobiles ne prennent pas encore en charge le webRTC (le dernier iOS 10.0 ne le prend pas en charge), donc l'enregistrement vidéo réel dépend toujours du client (iOS, Android), l'effet sera mieux.

Prise en charge WebRTC

Prise en charge WebRTC

L'application native iOS appelle la caméra pour enregistrer le processus vidéo

① Pour la collecte audio et vidéo, le flux de données audio et vidéo original peut être collecté à l'aide de AVCaptureSession et AVCaptureDevice.

② Encodez H264 pour la vidéo et AAC pour l'audio. Il existe des bibliothèques d'encodage encapsulées (encodage x264, encodage faac, encodage ffmpeg) dans iOS pour encoder l'audio et la vidéo.

③ Assemblez les données audio et vidéo codées en paquets.

④ Établissez une connexion RTMP et transmettez-la au serveur.

5. Construire Ng

Installez nginx, nginx-rtmp-module

① Clonez d'abord le projet nginx localement :

brasser le robinet homebrew/nginx

② Exécuter et installer nginx-rtmp-module

Brew install nginx-full –avec-rtmp-module

2. Fichier de configuration nginx.conf, configurez RTMP et HLS

Recherchez le fichier de configuration nginx.conf (path/usr/local/etc/nginx/nginx.conf) et configurez RTMP et HLS.

① Ajoutez le contenu de configuration rtmp avant le nœud http :

② Ajouter la configuration hls dans http

Redémarrez le service nginx, entrez http://localhost:8080 dans le navigateur et vérifiez si l'interface de bienvenue apparaît pour confirmer que nginx redémarre avec succès.

nginx -s recharger

Lorsque le serveur reçoit le flux vidéo transmis depuis l'extrémité de l'enregistrement vidéo, il doit l'analyser et l'encoder et transmettre le flux vidéo au format RTMP/HLS vers le lecteur vidéo. Solutions de bibliothèque d'encodage courantes couramment utilisées, telles que l'encodage x264, l'encodage faac, l'encodage ffmpeg, etc. Étant donné que l'outil FFmpeg intègre plusieurs encodages de formats audio et vidéo, nous pouvons donner la priorité à l'utilisation de FFmpeg pour la conversion de format, l'encodage et le streaming.

1.Installez l'outil FFmpeg

infuser installer ffmpeg

2. Poussez les fichiers MP4

Adresse du fichier vidéo :/Users/gao/Desktop/video/test.mp4

Adresses de streaming push et pull : rtmp://localhost:1935/rtmplive/home, rtmp://localhost:1935/rtmplive/home

 //Flux de protocole RTMP ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//Flux de protocole HLS ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

Avis:

Après avoir diffusé le flux, nous pouvons installer VLC et ffplay (un lecteur vidéo prenant en charge le protocole rtmp) pour extraire le flux localement à des fins de démonstration.

① Fichiers vidéo pour la diffusion en direct

 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101 : 1935/hls/testffmpeg-re-i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② Caméra de streaming Push + ordinateur de bureau + enregistrement par microphone pour la diffusion en direct

 ffmpeg -f avfoundation -framerate 30 -i 1:0″ /-f avfoundation -framerate 30 -video_size 640x480 -i 0 /-c:v libx264 -preset ultrarapide /-filter_complex 'overlay=main_w-overlay_w-10:main_h-overlay_h -10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

Pour plus de commandes, veuillez vous référer à :

Une liste complète des commandes FFmpeg pour le traitement des médias en streaming RTMP

Commandes de streaming FFmpeg couramment utilisées

Les terminaux mobiles iOS et Android prennent naturellement en charge le protocole HLS. Une fois la fin de la collecte vidéo et le service de streaming vidéo terminés, vous pouvez directement configurer la balise vidéo sur la page H5 pour lire la vidéo en direct.

 <contrôles vidéo preload=auto autoplay=autoplay loop=loop webkit-playsinline><source src=http://10.14.221.8/hls/test.m3u8″ type=application/vnd.apple.mpegurl /><p class=warning >Votre navigateur ne prend pas en charge la vidéo HTML5.</p></video>

Cet article détaille l'ensemble du processus de collecte et de téléchargement de vidéos, le traitement par le serveur du push vidéo et la lecture de la page H5 de la vidéo en direct. Il détaille les principes de mise en œuvre de la diffusion en direct. De nombreux problèmes d'optimisation des performances seront rencontrés au cours du processus de mise en œuvre.

① La restriction H5 HLS doit être un codage H264+AAC.

② Le problème de lecture H5 HLS est bloqué. Le côté serveur peut implémenter une stratégie de fragmentation, mettre les fichiers ts sur CDN et le front-end peut essayer d'implémenter la mise en cache DNS, etc.

③ Afin d'obtenir une meilleure interaction en temps réel, la diffusion en direct H5 peut également utiliser le protocole RTMP et réaliser la lecture via video.js.

Ce qui précède est une explication détaillée de la fonction de diffusion vidéo en direct HTML5 introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !