HTML5で動画ライブ配信機能を実装するアイデアを詳しく解説

少し前に、私は時間をかけて、現在人気のあるビデオ ライブ ブロードキャストについて調査と調査を行い、その全体的な実装プロセスを理解し、モバイル HTML5 ライブ ブロードキャストの実現可能性を検討しました。

WEB 上の現在の主流のビデオ ライブ ブロードキャスト ソリューションは HLS と RTMP であることがわかりました。一方、モバイル WEB エンドは現在 HLS に基づいています (HLS には遅延の問題があり、video.js の助けを借りて RTMP も使用できます)。 PC 側はリアルタイム パフォーマンスに優れた RTMP に基づいているため、これら 2 つのビデオ ストリーミング プロトコルを中心とした H5 ライブ ブロードキャスト テーマの共有を開始します。

HTTP ライブ ストリーミング (略して HLS) は、Apple によって実装された HTTP ベースのビデオ ストリーミング プロトコルです。Mac OS の QuickTime と Safari、および iOS の Safari はすべて、HLS のサポートを追加します。 MPlayerX や VLC などの一部の一般的なクライアントも HLS プロトコルをサポートしています。

HLS プロトコルは HTTP に基づいており、HLS を提供するサーバーは次の 2 つのことを行う必要があります。

エンコード: 画像を H.263 形式でエンコードし、サウンドを MP3 または HE-AAC でエンコードし、最終的に MPEG-2 TS (トランスポート ストリーム) コンテナにパッケージ化します。 分割: エンコードされた TS ファイルを同じ長さにカットします。 ts を実行し、.m3u8 プレーン テキスト インデックス ファイルを生成します。ブラウザは m3u8 ファイルを使用します。 m3u8 は、オーディオ リスト形式の m3u に非常に似ています。m3u8 は、単純に複数の ts ファイルを含むプレイリストと考えることができます。プレーヤーはそれらを 1 つずつ順番に再生し、すべてを再生した後で m3u8 ファイルを要求し、最新の ts ファイルを含むプレイリストを取得して再生を継続し、サイクルが再び始まります。ライブ ブロードキャスト プロセス全体は常に更新される m3u8 に依存しており、多数の小さな ts ファイルを動的に更新する必要があり、ts は CDN を通過できます。一般的な m3u8 ファイル形式は次のとおりです。

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

HLS プロトコルの本質は依然として 1 つの HTTP リクエスト/レスポンスであるため、適応性が高く、ファイアウォールの影響を受けないことがわかります。しかし、致命的な弱点もあります。それは、遅延が非常に明らかであるということです。各 ts が 5 秒に分割され、1 つの m3u8 に 6 つの ts インデックスが含まれる場合、少なくとも 30 秒の遅延が発生します。各 ts の長さを短くし、m3u8 のインデックスの数を減らすと、遅延は確かに減少しますが、バッファリングの頻度が高くなり、サーバーに対するリクエストの負荷も急激に増加します。したがって、現実の状況に基づいて妥協点を見つけるしかありません。

HLS をサポートするブラウザの場合は、これを記述するだけで再生できます。

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

注: HLS は、HTML5 ビデオを使用する Chrome ブラウザと同様に、PC 上の Safari ブラウザのみをサポートします。

このタグは m3u8 形式を再生できません。sewise-player、MediaElement、videojs-contrib-hls、jwplayer など、インターネット上の比較的成熟したソリューションを直接使用できます。

Real Time Messaging Protocol (略して RTMP) は、Macromedia によって開発された一連のビデオ ライブ ブロードキャスト プロトコルであり、現在は Adob​​e に属しています。このソリューションでは、Adobe Media Server などの特殊な RTMP ストリーミング サービスを構築する必要があり、ブラウザでのプレーヤーの実装に使用できるのは Flash のみです。リアルタイム性が高く遅延も非常に少ないのですが、モバイルWEB再生に対応していないのが欠点です。

iOS の H5 ページでは再生できませんが、ネイティブ iOS アプリケーション用に独自のデコードと解析を作成できます。RTMP は遅延が低く、リアルタイム パフォーマンスが優れています。ブラウザ側、HTML5ビデオ

このタグは RTMP プロトコル ビデオを再生できません。これは 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 コントロール preload=auto width=640高さ=264 ループ=ループwebkit-playsinline><ソース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>

現在、ライブ ブロードキャストの表示形式は通常、YY Live や Yingke Live などのページによって占められています。その構造は次の 3 つの層に分かれていることがわかります。

①背景ビデオレイヤー

②フォロー＆コメントモジュール

③アニメが好き

現在の H5 はライブ ブロードキャスト ページに似ており、その実装は技術的には難しくありません。次のように分類できます。

① 下部のビデオ背景はvideoタグを使用して再生します

② フォローおよびコメントモジュールは WebScoket を使用して、DOM および CSS3 を通じてリアルタイムに新しいメッセージを送受信します。

③CSS3アニメーションを気に入って使用する

ライブ ブロードキャストの形式を理解した後、ライブ ブロードキャストのプロセス全体を理解しましょう。

ライブ ブロードキャストのプロセス全体は次のように大まかに分けられます。

ビデオ収集の終了: コンピュータのオーディオおよびビデオ入力デバイス、または携帯電話のカメラまたはマイクが使用できます。現在、携帯電話のビデオが主です。

ライブ ストリーミング ビデオ サーバー: Nginx サーバーは、ビデオ録画側から送信されたビデオ ストリーム (H264/ACC エンコード) を収集し、サーバー側でそれを解析してエンコードし、RTMP/HLS 形式のビデオ ストリームをビデオ再生側にプッシュします。

ビデオ プレーヤー: コンピューター上のプレーヤー (QuickTime Player、VLC)、携帯電話上のネイティブ プレーヤー、または H5 のビデオ タグなどを使用できます。現在、携帯電話上のネイティブ プレーヤーが主です。

（Webフロントエンド学習交流グループ：328058344。雑談禁止です。興味のない方はご遠慮ください！）

H5 ビデオ録画では、Web ブラウザでリアルタイムの音声会話やビデオ会話をサポートするテクノロジーである強力な webRTC (Web Real-Time Communication) を使用できます。欠点は、PC 上の Chrome でしか十分にサポートされていないことです。モバイルデバイスではあまり良くありません。

WebRTC を使用してビデオを録画する基本プロセス

① window.navigator.webkitGetUserMedia()を呼び出す

ユーザーのPCカメラの映像データを取得します。

②取得したビデオストリームデータをwindow.webkitRTCPeerConnectionに変換します

（ビデオストリーミングデータフォーマット）。

③WebScoketを利用する

ビデオストリーミングデータをサーバーに送信します。

知らせ：

GoogleはWebRTCを推進しており、多くの成熟した製品が登場していますが、ほとんどのモバイルブラウザはまだWebRTCをサポートしていない（最新のiOS 10.0はサポートしていません）ため、実際のビデオ録画は依然としてクライアント（iOS、Android）に依存しており、その効果は良くなるでしょう。

WebRTC のサポート

WebRTC のサポート

iOS ネイティブ アプリケーションがカメラを呼び出してビデオ プロセスを記録します

① オーディオとビデオの収集については、AVCaptureSession と AVCaptureDevice を使用して、元のオーディオとビデオのデータ ストリームを収集できます。

② ビデオは H264、オーディオは AAC でエンコードする iOS には、オーディオとビデオをエンコードするためのカプセル化されたエンコード ライブラリ (x264 エンコード、faac エンコード、ffmpeg エンコード) があります。

③ エンコードされた音声データと映像データをパケットに組み立てます。

④ RTMP 接続を確立し、サーバーにプッシュします。

5. ビルドNG

nginx、nginx-rtmp-module をインストールする

① まず、nginx プロジェクトをローカルにクローンします。

醸造タップ自作/nginx

②nginx-rtmp-moduleを実行しインストールする

brew install nginx-full –with-rtmp-module

2. nginx.conf 設定ファイル、RTMP と HLS を設定します

nginx.conf 構成ファイル (path/usr/local/etc/nginx/nginx.conf) を見つけて、RTMP と HLS を構成します。

① http ノードの前に rtmp 構成コンテンツを追加します。

② httpにhls設定を追加

nginx サービスを再起動し、ブラウザに http://localhost:8080 と入力し、nginx が正常に再起動されたことを確認するウェルカム インターフェイスが表示されるかどうかを確認します。

nginx -s リロード

サーバーは、ビデオ録画側から送信されたビデオ ストリームを受信すると、それを解析してエンコードし、RTMP/HLS 形式のビデオ ストリームをビデオ プレーヤーにプッシュする必要があります。 x264 エンコード、faac エンコード、ffmpeg エンコードなど、一般的に使用される一般的なエンコード ライブラリ ソリューション。 FFmpeg ツールは複数のオーディオおよびビデオ形式のエンコーディングを統合しているため、形式の変換、エンコーディング、ストリーミングに FFmpeg の使用を優先できます。

1.FFmpegツールをインストールする

ffmpegを醸造インストールする

2. MP4 ファイルをプッシュする

ビデオファイルアドレス：/Users/gao/Desktop/video/test.mp4

プッシュおよびプル ストリーミング アドレス: rtmp://localhost:1935/rtmplive/home、rtmp://localhost:1935/rtmplive/home

 //RTMP プロトコル ストリーム ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//HLS プロトコル ストリーム ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile ベースライン -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

知らせ：

ストリームをプッシュした後、VLC と ffplay (rtmp プロトコルをサポートするビデオ プレーヤー) をインストールして、デモンストレーションのためにストリームをローカルにプルできます。

①ライブ配信用動画ファイル

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile ベースライン -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 ベースライン -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

②プッシュストリーミングカメラ+デスクトップ+マイク録音によるライブブロードキャスト

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

その他のコマンドについては、以下を参照してください。

RTMP ストリーミング メディアを処理するための FFmpeg コマンドの完全なリスト

FFmpeg でよく使用されるストリーミング コマンド

モバイル端末 iOS と Android はどちらも当然 HLS プロトコルをサポートしており、ビデオ収集の終了とビデオ ストリーミング プッシュ サービスが完了したら、H5 ページでビデオ タグを直接設定してライブ ビデオを再生できます。

 <ビデオ コントロール 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 >お使いのブラウザは HTML5 ビデオをサポートしていません。</p></video>

この記事では、ビデオの収集とアップロード、ビデオ プッシュのサーバー処理、およびライブ ビデオの H5 ページ再生のプロセス全体について詳しく説明します。実装プロセス中に発生するパフォーマンス最適化の原則について詳しく説明します。

① H5 HLS 制限は H264+AAC エンコードでなければなりません。

② H5 HLS 再生の問題が解決しない。サーバー側は断片化戦略を実装し、ts ファイルを CDN に置き、フロントエンドは DNS キャッシュなどの実装を試みることができます。

③ より良いリアルタイム インタラクションを実現するために、H5 ライブ ブロードキャストでは RTMP プロトコルを使用し、video.js を介して再生を実現することもできます。

上記は、編集者が導入した HTML5 ビデオ ライブ ブロードキャスト機能の詳細な説明です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！