現在、ライブビデオ放送、特にモバイルビデオライブ放送は非常に人気があります. 基本的に主要なインターネット企業は独自のライブ放送製品を持っているため、ライブ放送のいくつかの基本的な知識と主要な技術ポイントを理解する必要があります. この共有を紹介しましょう.ライブ ブロードキャストの全プロセスといくつかの技術的なポイントを説明し、簡単なデモを実装します。
ライブ映像の記録
H5ビデオ録画には、強力なwebRTC (Web Real-Time Communication) を使用できます, これは、リアルタイムの音声会話またはビデオ会話用のWebブラウザーをサポートするテクノロジーです. 欠点は、PC Chromeでのみよりよくサポートされることです.モバイル端末はあまりサポートしていません。
webRTC を使用してビデオを録画する基本的なプロセスは次のとおりです。
window.navigator.webkitGetUserMedia() を呼び出してユーザーの PC カメラのビデオ データを取得し、
取得したビデオ ストリーム データを window.webkitRTCPeerConnection (ビデオ ストリーム データ形式) に変換し、
websocket を使用してビデオ ストリーム データをサーバーに送信します。
多くのメソッドにブラウザのプレフィックスを付ける必要があるため、多くのモバイル ブラウザはまだ webRTC をサポートしていないため、実際のビデオ録画は依然としてクライアント (iOS、Android) に依存しており、効果はより優れています。
HTML5 でライブ ビデオを再生する方法
動画の再生には、HLS (HTTP Live Streaming) プロトコルを使用してライブ ストリームを再生できます. iOS と Android の両方がこのプロトコルを当然サポートしています. 設定は簡単で、video タグを直接使用するだけです. インスタント メッセージング チャット ソフトウェア アプリの開発は、Wei Keyun の v: weikeyun24 相談を追加できます。
HLS プロトコルとは
簡単に言えば、ストリーム全体をダウンロード用の小さな HTTP ベースのファイルに分割し、毎回一部のみをダウンロードします.前述のように、H5 ではライブ ビデオを再生するために .m3u8 ファイルが導入されています.このファイルは HLS に基づいています.プロトコル: ビデオ ストリームのメタデータを格納するファイル。
各 .m3u8 ファイルはいくつかの ts ファイルに対応します. これらの ts ファイルは実際のストレージ ビデオ データです. m3u8 ファイルはいくつかの ts ファイルの構成情報と関連するパスのみを保存します. ビデオが再生されると .m3u8 は動的に変化します , ビデオ タグはこのファイルを解析し、対応する ts ファイルを見つけて再生するため、通常は高速化のために .m3u8 を Web サーバーに配置し、ts ファイルを CDN に配置します。
.m3u8 ファイルは、実際には UTF-8 でエンコードされた m3u ファイルであり、このファイル自体は再生できませんが、再生情報を格納するテキスト ファイルです。
HLS リクエスト フロー
プロセスはおおよそ次のとおりです。
HTTP は m3u8 の URL を要求します。
サーバーは、リアルタイムで更新される m3u8 再生リストを返し、通常、一度に 5 つのデータ セグメントの URL を提供します。クライアントは
m3u8 再生リストを解析し、各セグメントの URL を要求します。シーケンス、ts データ ストリームを取得します。
HLS ライブ遅延
hls プロトコルはライブ ストリームを小さなビデオに分割してダウンロードして再生することがわかっているため、リストに 5 つの ts ファイルが含まれ、各 TS ファイルに 5 秒のビデオ コンテンツが含まれていると仮定すると、全体の遅延は 25 秒になります。これらのビデオを見るとき、アンカーはすでにビデオを録画してアップロードしているため、このような遅延があります. もちろん、リストの長さと単一の ts ファイルのサイズを短くして遅延を減らすことができます. 最終的には、リストの長さを 1 に減らすことができ、ts の期間は 1 秒ですが、これにより遅延が増加します。リクエスト数が多くなり、サーバーへの負担が大きくなります. ネットワーク速度が遅いと時間がかかるとバッファリングが増えるため、Apple が推奨する ts 時間は 10 秒なので、30 秒の遅延が大幅に変わります. そのため、サーバーはストリームを受信し、トランスコードし、保存し、スライスしてから、クライアントに配信します.これが遅延の根本的な原因です.
しかし、H5 ライブ ビデオにはいくつかのかけがえのない利点があります。
普及性が高く、共有やその他の操作に便利です。
動的にリリースできるため、製品要件のリアルタイムの反復と迅速な起動に役立ちます。
アプリをインストールする必要はなく、ブラウザを直接開くだけです。
iOS を例として、オーディオおよびビデオ データの収集 (記録) を示します。
オーディオとビデオのキャプチャと記録に関して、最初に次の概念を明確にします。
ビデオ エンコーディング: いわゆるビデオ エンコーディングとは、特定の圧縮技術を使用して、ビデオ形式のファイルを別のビデオ形式のファイルに変換する方法を指します.使用する iPhone で記録されたビデオは、エンコード、アップロード、およびデコードする必要があります。クライアント側のプレーヤーで再生されます。
コーデック規格: ビデオ ストリーム伝送で最も重要なコーデック規格には、ITU の H.261、H.263、および H.264 があり、HLS プロトコルは H.264 形式でのエンコードをサポートしています。
オーディオ エンコーディング: ビデオ エンコーディングと同様に、元のオーディオ ストリームは特定の規格に従ってエンコードされ、アップロード、デコード、およびプレーヤーで同時に再生されます. もちろん、オーディオにも多くのエンコーディング規格があります, PCM エンコーディング, WMA エンコーディングなど、AACエンコーディングなど。ここで、HLSプロトコルでサポートされているオーディオエンコーディング方式はAACエンコーディングです。
iOS でカメラを使用してオーディオおよびビデオ データを収集する手順は、主に次の手順に分かれています。
iOS でのオーディオとビデオのキャプチャは、AVCaptureSession と AVCaptureDevice を使用して、元のオーディオとビデオのデータ ストリームをキャプチャします。
動画は H264 エンコード、音声は AAC エンコードが行われ、音声と動画のエンコードを実装するためのエンコード ライブラリが iOS にパッケージ化されています。
エンコードされたオーディオおよびビデオ データを組み立ててパッケージ化し、
RTMP 接続を確立してサーバーにプッシュします。
RTMPについて
Real Time Messaging Protocol (略して RTMP) は、Macromedia によって開発されたライブ ビデオ プロトコルであり、現在は Adobe に属しています。HLSと同様にライブビデオに適用できます.違いは、フラッシュベースのRTMPはiOSブラウザーで再生できないことですが、リアルタイムパフォーマンスはHLSよりも優れています. したがって、このプロトコルは通常、ビデオ ストリームをアップロードするために使用されます。つまり、ビデオ ストリームはサーバーにプッシュされます。
ストリーミングについて
いわゆるストリーミングとは, エンコードされたオーディオとビデオのデータをビデオストリーミングサーバーに送信することです. iOS コードでは, RTMP は一般的にストリーミングをプッシュするために使用されます. サードパーティのライブラリ librtmp-iOS を使用してストリーミングをプッシュすることができます. librtmp はいくつかをカプセル化します.コア API は、ユーザーが呼び出すためのものです。たとえば、ストリーミング API など、サーバー アドレスを構成した後、トランスコードされたビデオ ストリームをサーバーにプッシュできます。
では、ストリーミング サーバーを構築するにはどうすればよいでしょうか。
ライブ動画でのユーザー インタラクション
ライブ ブロードキャストでのユーザー インタラクションは、次のように大まかに分けることができます。
ギフトを送ったり、
コメントや弾幕を投稿したりします。
贈答の場合は、DOM と CSS3 を使用して H5 側で贈答ロジックといくつかの特別なギフト アニメーションを実装でき、技術的な難易度はそれほど難しくありません。
弾幕の場合はもう少し複雑で、次の点に注意する必要があります。
リアルタイムの弾幕。Websocket を使用して新しい弾幕をリアルタイムで送受信し、それらをレンダリングできます。Webscoket を
サポートしていないブラウザーの場合は、ロング ポーリングまたはフロントエンド タイマーにダウングレードして、リアルタイムを取得するためのリクエストを送信することしかできません。弾幕;
バレット チャットがレンダリングされるときのアニメーションと衝突検出 (つまり、バレット チャットが重ならない) など。