Ausführliche Erläuterung der Ideen zur Implementierung der Video-Live-Übertragungsfunktion in HTML5

Vor nicht allzu langer Zeit habe ich mir die Zeit genommen, etwas über die derzeit beliebte Video-Live-Übertragung zu recherchieren und zu erkunden, den gesamten Implementierungsprozess zu verstehen und die Machbarkeit einer mobilen HTML5-Live-Übertragung zu untersuchen.

Es wurde festgestellt, dass die aktuellen gängigen Video-Live-Übertragungslösungen im WEB HLS und RTMP sind. Das mobile WEB-Ende basiert derzeit auf HLS (HLS hat Latenzprobleme und RTMP kann auch mit Hilfe von video.js verwendet werden). Da die PC-Seite auf RTMP basiert, was eine bessere Echtzeitleistung bietet, werden wir beginnen, das Thema der H5-Liveübertragung rund um diese beiden Video-Streaming-Protokolle zu teilen.

HTTP Live Streaming (kurz HLS) ist ein HTTP-basiertes Video-Streaming-Protokoll, das von Apple und Safari unter Mac OS implementiert wird. Höhere Versionen von Android bieten auch Unterstützung für HLS. Einige gängige Clients wie MPlayerX und VLC unterstützen auch das HLS-Protokoll.

Das HLS-Protokoll basiert auf HTTP und ein Server, der HLS bereitstellt, muss zwei Dinge tun:

Kodierung: Bilder im H.263-Format kodieren, Töne in MP3 oder HE-AAC kodieren und schließlich in MPEG-2 TS-Container (Transport Stream) packen. Aufteilen: Die kodierten TS-Dateien in gleiche Längen schneiden. Eine kleine Datei mit dem Suffix ts und generiert eine .m3u8-Einzeltext-Indexdatei; der Browser verwendet m3u8-Dateien. m3u8 ist dem Audiolistenformat m3u sehr ähnlich. Sie können sich m3u8 einfach als eine Wiedergabeliste vorstellen, die mehrere TS-Dateien enthält. Der Player spielt sie der Reihe nach ab, fordert dann nach dem Abspielen aller Dateien die m3u8-Datei an und ruft die Wiedergabeliste mit der neuesten ts-Datei ab, um mit der Wiedergabe fortzufahren, und der Zyklus beginnt von vorne. Der gesamte Live-Übertragungsprozess basiert auf einem ständig aktualisierten m3u8 und einer Reihe kleiner ts-Dateien, die dynamisch aktualisiert werden müssen, und ts kann über CDN übertragen werden. Ein typisches m3u8-Dateiformat ist wie folgt:

 #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:PROGRAM-ID=1, BANDWIDTH=484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777gear4/prog_index.m3u8

Es ist ersichtlich, dass das Wesentliche des HLS-Protokolls immer noch eine HTTP-Anfrage/Antwort ist, sodass es eine gute Anpassungsfähigkeit aufweist und nicht durch Firewalls beeinträchtigt wird. Aber es hat auch eine fatale Schwäche: Die Verzögerung ist sehr offensichtlich. Wenn jedes ts in 5 Sekunden unterteilt ist und ein m3u8 6 ts-Indizes enthält, führt dies zu einer Verzögerung von mindestens 30 Sekunden. Wenn Sie die Länge jedes ts reduzieren und die Anzahl der Indizes in m3u8 verringern, wird die Verzögerung zwar verringert, führt jedoch zu einer häufigeren Pufferung und der Anforderungsdruck auf dem Server nimmt ebenfalls exponentiell zu. Daher können wir nur auf der Grundlage der tatsächlichen Situation einen Kompromisspunkt finden.

Für Browser, die HLS unterstützen, schreiben Sie einfach Folgendes zum Abspielen:

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

Hinweis: HLS unterstützt nur den Safari-Browser auf dem PC, ähnlich dem Chrome-Browser mit HTML5-Video

Das Tag kann das m3u8-Format nicht abspielen. Sie können einige relativ ausgereifte Lösungen im Internet direkt verwenden, wie zum Beispiel: sewise-player, MediaElement, videojs-contrib-hls und jwplayer.

Das Real Time Messaging Protocol (kurz RTMP) ist eine Reihe von Video-Live-Übertragungsprotokollen, die von Macromedia entwickelt wurden und jetzt zu Adobe gehören. Diese Lösung erfordert den Aufbau eines speziellen RTMP-Streaming-Dienstes wie Adobe Media Server, und zur Implementierung des Players im Browser kann nur Flash verwendet werden. Die Echtzeitleistung ist sehr gut und die Verzögerung ist sehr gering. Der Nachteil besteht jedoch darin, dass die mobile WEB-Wiedergabe nicht unterstützt wird.

Obwohl es nicht auf der H5-Seite von iOS abgespielt werden kann, können Sie Ihre eigene Dekodierung und Analyse für native iOS-Anwendungen schreiben. RTMP hat eine geringe Latenz und eine gute Echtzeitleistung. Browserseite, HTML5-Video

Das Tag kann keine RTMP-Protokollvideos abspielen, was über video.js erreicht werden kann.

 <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 steuert preload=auto width=640 height=264 loop=loop 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>

Derzeit werden Live-Übertragungsformate normalerweise von Seiten wie YY Live und Yingke Live dominiert. Sie können sehen, dass ihre Struktur in drei Ebenen unterteilt werden kann:

① Hintergrundvideoebene

② Modul folgen und kommentieren

③ Wie Animation

Der aktuelle H5 ähnelt einer Live-Übertragungsseite und seine Implementierung ist technisch nicht schwierig. Er kann unterteilt werden in:

① Der Videohintergrund unten verwendet zum Abspielen das Video-Tag

② Das Folge- und Kommentarmodul verwendet WebScoket, um neue Nachrichten in Echtzeit über DOM und CSS3 zu senden und zu empfangen.

③ CSS3-Animationen mögen und verwenden

Nachdem wir das Live-Übertragungsformat verstanden haben, wollen wir den Live-Übertragungsprozess als Ganzes verstehen.

Der gesamte Live-Übertragungsprozess kann grob unterteilt werden in:

Ende der Videosammlung: Es kann sich um das Audio- und Videoeingabegerät am Computer oder um die Kamera oder das Mikrofon des Mobiltelefons handeln. Derzeit ist das Handyvideo das wichtigste.

Live-Streaming-Videoserver: Ein Nginx-Server sammelt den von der Videoaufzeichnungsseite übertragenen Videostream (H264/ACC-Kodierung), analysiert und kodiert ihn auf der Serverseite und leitet den Videostream im RTMP/HLS-Format an die Videowiedergabeseite weiter.

Videoplayer: Dies kann der Player auf dem Computer (QuickTime Player, VLC), der native Player auf dem Mobiltelefon oder der Video-Tag von H5 usw. sein. Derzeit ist der native Player auf dem Mobiltelefon der wichtigste.

(Web-Front-End-Lernaustauschgruppe: 328058344. Chatten ist verboten. Wenn Sie kein Interesse haben, nehmen Sie bitte nicht teil!)

Für die H5-Videoaufzeichnung können Sie die leistungsstarke webRTC (Web Real-Time Communication) verwenden, eine Technologie, die Webbrowser für Echtzeit-Sprachgespräche oder Videogespräche unterstützt. Der Nachteil besteht darin, dass sie nur auf Chrome auf dem PC gut unterstützt wird und nicht sehr gut auf mobilen Geräten.

Grundlegender Prozess der Videoaufzeichnung mit webRTC

① Rufen Sie window.navigator.webkitGetUserMedia() auf

Rufen Sie die Videodaten der PC-Kamera des Benutzers ab.

② Konvertieren Sie die erhaltenen Videostream-Daten in window.webkitRTCPeerConnection

(ein Video-Streaming-Datenformat).

③ Verwenden Sie WebScoket

Übertragen Sie Video-Streaming-Daten an den Server.

Beachten:

Obwohl Google WebRTC beworben hat und viele ausgereifte Produkte erschienen sind, unterstützen die meisten mobilen Browser webRTC noch nicht (das neueste iOS 10.0 unterstützt es nicht), sodass die tatsächliche Videoaufzeichnung immer noch vom Client (iOS, Android) abhängt wird besser sein.

WebRTC-Unterstützung

WebRTC-Unterstützung

Die native iOS-Anwendung ruft die Kamera auf, um den Videovorgang aufzuzeichnen

① Für die Audio- und Videoerfassung kann der ursprüngliche Audio- und Videodatenstrom mit AVCaptureSession und AVCaptureDevice erfasst werden.

② H264 für Video und AAC für Audio kodieren. In iOS gibt es gekapselte Kodierungsbibliotheken (x264-Kodierung, FAAC-Kodierung, ffmpeg-Kodierung) zum Kodieren von Audio und Video.

③ Stellen Sie die codierten Audio- und Videodaten in Pakete zusammen.

④ Stellen Sie eine RTMP-Verbindung her und übertragen Sie sie an den Server.

5. Bauen Sie Ng

Installieren Sie Nginx, Nginx-RTMP-Modul

① Klonen Sie zunächst das Nginx-Projekt lokal:

Brew Tap Homebrew/Nginx

② Führen Sie das Nginx-RTMP-Modul aus und installieren Sie es

brew install nginx-full –with-rtmp-module

2. Konfigurationsdatei nginx.conf, RTMP und HLS konfigurieren

Suchen Sie die Konfigurationsdatei nginx.conf (Pfad/usr/local/etc/nginx/nginx.conf) und konfigurieren Sie RTMP und HLS.

① Fügen Sie den RTMP-Konfigurationsinhalt vor dem http-Knoten hinzu:

② Fügen Sie die HLS-Konfiguration in http hinzu

Starten Sie den Nginx-Dienst neu, geben Sie http://localhost:8080 in den Browser ein und prüfen Sie, ob die Willkommensoberfläche angezeigt wird, um den erfolgreichen Neustart von Nginx zu bestätigen.

nginx -s neu laden

Wenn der Server den vom Videoaufzeichnungsende übertragenen Videostream empfängt, muss er ihn analysieren und kodieren und den Videostream im RTMP/HLS-Format an den Videoplayer übertragen. Gemeinsame Codierungsbibliothekslösungen, die häufig verwendet werden, wie z. B. x264-Codierung, FAAC-Codierung, ffmpeg-Codierung usw. Da das FFmpeg-Tool mehrere Kodierungen für Audio- und Videoformate integriert, können wir der Verwendung von FFmpeg für die Formatkonvertierung, Kodierung und das Streaming Vorrang einräumen.

1.Installieren Sie das FFmpeg-Tool

brew installiere ffmpeg

2. MP4-Dateien übertragen

Adresse der Videodatei: /Users/gao/Desktop/video/test.mp4

Push- und Pull-Streaming-Adressen: rtmp://localhost:1935/rtmplive/home, rtmp://localhost:1935/rtmplive/home

 //RTMP-Protokollstream ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//HLS-Protokollstream 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

Beachten:

Nachdem wir den Stream gepusht haben, können wir VLC und ffplay (einen Videoplayer, der das RTMP-Protokoll unterstützt) installieren, um den Stream zur Demonstration lokal abzurufen.

① Videodateien für Live-Streaming

 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

② Push-Streaming-Kamera + Desktop + Mikrofonaufnahme für Live-Übertragung

 ffmpeg -f avfoundation -framerate 30 -i 1:0″ /-f avfoundation -framerate 30 -video_size 640x480 -i 0 /-c:v libx264 -preset ultrafast /-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

Weitere Befehle finden Sie unter:

Eine vollständige Liste der FFmpeg-Befehle zur Verarbeitung von RTMP-Streaming-Medien

FFmpeg häufig verwendete Streaming-Befehle

Die mobilen Endgeräte iOS und Android unterstützen natürlich beide das HLS-Protokoll. Nachdem die Videosammlung beendet und der Video-Streaming-Push-Dienst abgeschlossen ist, können Sie das Video-Tag direkt auf der H5-Seite konfigurieren, um das Live-Video abzuspielen.

 <video steuert 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 >Ihr Browser unterstützt kein HTML5-Video.</p></video>

Dieser Artikel beschreibt den gesamten Prozess der Videosammlung und des Hochladens, der Serververarbeitung von Video-Push und der H5-Seitenwiedergabe von Live-Videos. Während des Implementierungsprozesses werden viele Probleme bei der Leistungsoptimierung auftreten.

① Die H5-HLS-Einschränkung muss H264+AAC-Kodierung sein.

② Das H5-HLS-Wiedergabeproblem bleibt hängen. Die Serverseite kann eine Fragmentierungsstrategie implementieren, die TS-Dateien auf CDN ablegen und das Frontend kann versuchen, DNS-Caching usw. zu implementieren.

③ Um eine bessere Echtzeitinteraktion zu erreichen, kann die H5-Liveübertragung auch das RTMP-Protokoll verwenden und die Wiedergabe über video.js realisieren.

Das Obige ist eine detaillierte Erklärung der vom Herausgeber eingeführten HTML5-Video-Liveübertragungsfunktion. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!