Diffusion vidéo en direct H5

Afin de suivre la tendance, cet article vous présentera le processus de base et les principaux points techniques de la vidéo diffusion en direct, y compris, mais sans s'y limiter, la technologie front-end.

1 Le H5 peut-il diffuser des vidéos en direct ?

Bien sûr, H5 est populaire depuis si longtemps et couvre tous les aspects de la technologie.

Pour l'enregistrement vidéo, 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. c'est qu'il n'est disponible que sur PC chrCertains supports sont meilleurs, mais le support mobile n'est pas idéal.

Pour la lecture vidéo, vous pouvez utiliser le protocole HLS (HTTP Live Streaming) pour lire le flux en direct. iOS et Android prennent naturellement en charge ce protocole. simple à configurer et peut être utilisé directement. Juste la balise vidéo.

Compatibilité webRTC :

la balise vidéo lit la vidéo du protocole HLS :

1 2 3 4

<video controls autoplay>       <source src="http://10.66.69.77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" />       <p class="warning">Your browser does not support HTML5 video.</p>   </video>

1

2

3

4

<vidéo contrôles lecture automatique<🎜> < span class="crayon-o">>

 <source < span class="Apple-converted-space"> src="http://10.66 . 69.77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" /> <p class<🎜>="avertissement">Votre navigateur fait pas support HTML5 vidéo.</p> span > span >

</ < span class="crayon-v">vidéo>

2 Qu'est-ce que le protocole HLS exactement ?

Pour faire simple, il s'agit de diviser l'intégralité du flux en petits fichiers HTTP à télécharger, et d'en télécharger seulement quelques-uns à la fois. Comme mentionné précédemment, un .m3u8 est introduit pour. H5 pour lire un fichier de vidéos en direct, ce fichier est basé sur le protocole HLS et stocke les métadonnées du flux vidéo.

Chaque fichier .m3u8 correspond à plusieurs fichiers ts. Ces fichiers ts sont les données réelles qui stockent la vidéo. Le fichier m3u8 stocke uniquement les informations de configuration et les chemins associés de certains fichiers ts. .m3u8 change dynamiquement. La balise vidéo analysera ce fichier et trouvera le fichier ts correspondant à lire. Par conséquent, généralement afin d'accélérer, .m3u8 est placé sur le serveur Web et le fichier ts est placé sur le cdn.

Le fichier .m3u8 est en fait un fichier m3u codé en UTF-8. Ce fichier lui-même ne peut pas être lu. Il stocke simplement le fichier texte des informations de lecture :

<.>

1 2 3 4 5 6 7

#EXTM3U                     m3u文件头 #EXT-X-MEDIA-SEQUENCE       第一个TS分片的序列号 #EXT-X-TARGETDURATION       每个分片TS的最大的时长 #EXT-X-ALLOW-CACHE          是否允许cache #EXT-X-ENDLIST              m3u8文件结束符 #EXTINF                     指定每个媒体段(ts)的持续时间（秒），仅对其后面的URI有效 mystream-12.ts

1

2

3

4

5

6

7

#EXTM3U      en-tête de fichier m3u

#EXT-X-MEDIA - SEQUENCE Le premierfragment TS Numéro de série #EXT- X-TARGETDURATION FilmDurée maximale du TS span> span>

#EXT-X-TOUSOW-CACHE S'il faut autoriser le le cache span>

#EXT-X-ENDLISTE                                                                                            /span>

#EXTINF Spécifiez chaque segment multimédia(ts) durée (secondes), valable uniquement pour l'URI qui le suit

mon flux -12.ts

fichier ts :

Le processus de demande HLS est :
1 URL de requête http m3u8.
2 Le serveur renvoie une playlist m3u8. Cette playlist est mise à jour en temps réel. Généralement, 5 URL de données sont données à la fois.
3 Le client analyse la playlist m3u8, puis demande l'URL de chaque segment dans l'ordre pour obtenir le flux de données ts.

Processus simple :

Délai de diffusion en direct de 3 HLS

Nous savons que le protocole hls will Le flux en direct est divisé en courtes vidéos à télécharger et à lire, donc en supposant que la liste contient 5 fichiers ts et que chaque fichier TS contient 5 secondes de contenu vidéo, le délai global est alors de 25 secondes. Parce que lorsque vous voyez ces vidéos, l'hôte a déjà enregistré la vidéo et l'a mise en ligne , il y a donc un retard causé par cela. Bien entendu, la longueur de la liste et la taille d'un seul fichier ts peuvent être raccourcies pour réduire la latence, à l'extrême, la longueur de la liste peut être réduite à 1 et la durée de ts à 1 s. Le nombre de requêtes et augmente la pression du serveur. Lorsque la vitesse du réseau est lente, le timing provoque plus de mise en mémoire tampon, donc la durée ts officiellement recommandée par Apple est de 10 secondes, ce qui entraînera un retard de 30 secondes. Références : https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

4 Quel est l'ensemble du processus de streaming vidéo en direct ?

La vidéo en direct peut être grossièrement divisée en :

1 Fin d'enregistrement vidéo : généralement un périphérique d'entrée audio et vidéo sur un ordinateur ou une caméra ou un microphone sur un téléphone mobile . Actuellement, mobile Principalement des vidéos sur téléphone mobile.

2 Lecteur vidéo : Il peut s'agir du lecteur sur l'ordinateur, du lecteur natif sur le téléphone mobile, et de la balise vidéo h5, etc. Actuellement, le lecteur natif sur le téléphone mobile est le principal.

3 Serveur vidéo : généralement un serveur nginx, utilisé pour accepter la source vidéo fournie par la fin de l'enregistrement vidéo et fournir des services de streaming au lecteur vidéo.

Processus simple :

5 Comment collecter de l'audio et de la vidéo ?

Clarifions d'abord quelques concepts :

Encodage vidéo : ce qu'on appelle l'encodage vidéo fait référence à la conversion d'un fichier dans un certain format vidéo en un autre via une compression spécifique. technologie. Une méthode de fichier au format vidéo. La vidéo que nous utilisons pour enregistrer sur l'iPhone doit être codée, téléchargée et décodée avant de pouvoir être lue dans le lecteur côté utilisateur.

Normes de codage et de décodage : les normes de codage et de décodage les plus importantes dans la transmission en streaming vidéo incluent les normes H.261, H.263 et H.264 de l'UIT, parmi lesquelles le protocole HLS prend en charge H. .264 Codage du format. Codage
Audio  : Semblable à l'encodage vidéo, le flux audio original est encodé, téléchargé, décodé et lu dans le lecteur selon certaines normes. Bien entendu, il existe de nombreuses normes d'encodage pour l'audio, telles que. Encodage PCM, encodage WMA, encodage AAC, etc. La méthode d'encodage audio prise en charge par notre protocole HLS ici est l'encodage AAC.

Ce qui suit utilisera la caméra sur iOS pour collecter des données audio et vidéo, qui sont principalement divisées selon les étapes suivantes :

1 Audio et Collection vidéo, dans iOS, le flux de données audio et vidéo original peut être collecté à l'aide de AVCaptureSession et AVCaptureDevice. 2 Encodez H264 pour la vidéo et AAC pour l'audio. Il existe des bibliothèques d'encodage encapsulées dans iOS pour encoder l'audio et la vidéo.
3 Assemblez les données audio et vidéo codées en paquets ;
4 Établissez une connexion RTMP et transmettez-la au serveur.

ps : Étant donné que les bibliothèques de codage sont principalement écrites en

langage C, vous devez les compiler lorsque vous les utilisez. Pour iOS, vous pouvez déjà les utiliser. bibliothèques de codage compilées.

Encodage x264 : https://

github.com/kewlbear/x264-ios

Encodage faac : https://github.com/fflydev/faac- ios-build

encodage ffmpeg : https://github.com/kewlbear/FFmpeg-iOS-build-script

À propos si vous souhaitez ajouter des effets spéciaux à la vidéo, tels que l'ajout de filtres, etc., utilise généralement la bibliothèque de filtres avant l'encodage, mais cela prendra également du temps, entraînant un certain retard dans le téléchargement des données vidéo.

Processus simple :

6 Qu'est-ce que le ffmpeg mentionné plus tôt ?

Comme le précédent x264, ffmpeg est en fait un ensemble de bibliothèques d'encodage. Semblable à Xvid, Xvid est un codec basé sur le protocole MPEG4, et x264 est un encodeur basé sur le protocole H.264. ffmpeg intègre divers protocoles d'encodage et de décodage audio et vidéo En définissant des paramètres, l'encodage et le décodage basés sur MPEG4, H.264 et d'autres protocoles peuvent être complétés. La démo utilise ici la bibliothèque d'encodage x264.

7 Qu'est-ce que le RTMP ?

Real Time Messaging Protocol (RTMP en abrégé) est un ensemble de protocoles de diffusion vidéo en direct développés par Macromedia et appartient désormais à Adobe. Comme HLS, il peut être appliqué aux diffusions vidéo en direct. La différence est que RTMP est basé sur Flash et ne peut pas être lu dans les navigateurs iOS, mais ses performances en temps réel sont meilleures que HLS. Par conséquent, ce protocole est généralement utilisé pour télécharger des flux vidéo, c'est-à-dire que les flux vidéo sont transmis au serveur.

Voici une comparaison entre hls et rtmp :

8 Push streaming

Le soi-disant push Le streaming consiste à envoyer nos données audio et vidéo codées au serveur de streaming vidéo. Généralement, rtmp est utilisé pour pousser le flux. Vous pouvez utiliser la bibliothèque tierce librtmp-iOS pour pousser le flux. core api est que les utilisateurs peuvent appeler. Si vous trouvez cela gênant, vous pouvez utiliser le SDK de streaming vidéo iOS prêt à l'emploi, qui est également basé sur rtmp, https://github.com/runner365/LiveVideoCoreSDK.

9 Construction du serveur Push

Construction simple du serveur Push Étant donné que les flux vidéo que nous téléchargeons sont basés sur le protocole rtmp, le serveur doit également prendre en charge rtmp. les étapes suivantes :

1 Installer un serveur nginx.

2 Installez l'extension rtmp de nginx La plus couramment utilisée actuellement est https://github.com/arut/nginx-rtmp-module

3 Configurer le fichier de configuration nginx :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

rtmp {

serveur

{

écouter

1935; #Port d'écoute

morceau_size

4000 ; 🎜>

application hls { #chemin de la demande push rtmp

                                              >;                             

                                                  🎜>local/var/www/hls

;

                                               🎜> >5s;

🎜>}

4 Redémarrez nginx et écrivez l'adresse push rtmp sous la forme rtmp://ip:1935/hls/mystream, où hls_path représente l'emplacement des fichiers .m3u8 et ts générés . L'adresse de stockage, hls_fragment représente la durée du découpage et mysteam représente une instance. Vous pouvez définir un nom aléatoire pour le nom de fichier à générer à l'avenir. Pour plus de configuration, veuillez vous référer à : https://github.com/arut/nginx-rtmp-module/wiki/

Sur la base des étapes ci-dessus, un serveur vidéo prenant en charge rtmp a été essentiellement implémenté .

10 Lire une vidéo en direct sur une page HTML5 ?

Pour faire simple, vous pouvez directement utiliser la balise vidéo pour lire la vidéo en direct du protocole hls :

1 2 3 4

<video autoplay webkit-playsinline>       <source src="http://10.66.69.77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" />       <p class="warning">Your browser does not support HTML5 video.</p>   </video>

1

2

3

4

<vidéo lecture automatique webkit-playsinline > span>

<source src="http://10.66.69.77 :8080/hls /mystream.m3u8" type=< span class="crayon-s">"application/vnd.apple.mpegurl" />

<p class="avertissement">Votre navigateur ne pas support HTML5 vidéo.</< span class="crayon-v">p> span> span> span>

</vidéo< span class=" crayon-o">>

Il est à noter que l'attribut webkit-playsinline est ajouté à la balise vidéo. Cet attribut a pour but de permettre la lecture de la vidéo en plein écran dans le. uiwebview d'iOS Par défaut, iOS lira la vidéo en plein écran et vous devez définir makesInlineMediaPlayback=YES sur uiwebview. Videojs, qui est relativement mature dans l'industrie, peut choisir différentes stratégies selon différentes plates-formes. Par exemple, iOS utilise des balises vidéo, PC utilise Flash, etc.

11 Résumé des pièges

Jian Sur la base des étapes ci-dessus, l'auteur a écrit une démo pour implémenter l'enregistrement vidéo iOS, la collecte, le téléchargement et le serveur nginx pour diffuser en direct streaming. Un ensemble complet de processus pour lire des vidéos en direct sur les pages h5 résume les pièges suivants :

1 Lorsque vous utilisez AVCaptureSession pour capturer une vidéo, vous devez implémenter le protocole AVCaptureVideoDataOutputSampleBufferDelegate, et en même temps - (void) captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection capture le flux vidéo. Il convient de noter que la méthode didOutputSampleBuffer n'est pas la méthode didDropSampleBuffer. Cette dernière ne se déclenchera qu'une seule fois. écrit au début, dans une demi-journée seulement pour découvrir que l'appel de méthode était erroné.

2 Lorsque vous utilisez rtmp pour transmettre le flux, l'adresse rmtp doit commencer par rtmp://, et l'adresse IP doit écrire l'adresse IP réelle, pas localhost, et le numéro de port doit être ajouté en même temps. temps, car il ne peut pas être téléchargé sur le téléphone mobile. Identifiez localhost.

Certains pièges seront ajoutés plus tard, et certains doivent être collés avec le code, mais ceux-ci sont répertoriés ici.

12 Prise en charge de l'industrie

Actuellement, Tencent Cloud, Baidu Cloud et Alibaba Cloud disposent tous de solutions basées sur la diffusion vidéo en direct, de l'enregistrement vidéo à la lecture vidéo. une série de SDK qui peuvent être utilisés. L'inconvénient est que cela nécessite des frais. Si possible, il n'est pas difficile d'en implémenter un vous-même.

adresse de démonstration : https://github.com/lvming6816077/LMVideoTest/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!