ホームページ >ウェブフロントエンド >H5 チュートリアル >H5 ライブビデオ放送
H5 ライブビデオ放送
- 大家讲道理オリジナル
- 2017-05-28 10:56:445006ブラウズ
トレンドに追いつくために、この記事では、ビデオライブ ブロードキャストにおける基本的なプロセスと主要な技術ポイントを紹介します。これにはフロントエンド テクノロジーも含まれますが、これに限定されません。
1 H5 はライブビデオストリーミングを行うことができますか?
もちろん、H5 は長い間人気があり、テクノロジーのあらゆる側面をカバーしています。
ビデオ録画には、強力な webRTC (Web Real-Time Communication) を使用できます。これは、Web ブラウザーでリアルタイムの音声会話やビデオ会話をサポートするテクノロジーです。欠点は、PC でのみサポートされていることです。 chr一部、モバイルのサポートは理想的ではありません。
ビデオの再生には、HLS (HTTP Live Streaming) プロトコルを使用してライブ ストリームを再生できます。設定は単純で、video タグを直接使用するだけです。ビデオタグ再生 HLS プロトコルビデオ: 3
|
> |
=」 77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" /> <p クラス=「警告」>あなたのブラウザはサポートをしていません HT ML5 ビデオ。 / p> </ビデオ> 2 HLS プロトコルとは正確には何ですか? 簡単に言うと、ストリーム全体が小さな HTTP ベースのファイルに分割され、毎回ダウンロードされるのは少数だけです。前述したように、H5 でライブビデオを再生すると、.m3u8 ファイルが導入されます。 HLS プロトコルに基づいており、ビデオ ストリームのメタデータを保存するファイルです。 各 .m3u8 ファイルは複数の ts ファイルに対応しており、これらの ts ファイルはビデオを保存する実際のデータであり、ビデオの再生時に .m3u8 ファイルの構成情報と関連パスのみが保存されます。変更すると、ビデオ タグはこのファイルを解析し、対応する ts ファイルを見つけて再生するため、通常は高速化するために、.m3u8 が Web サーバーに配置され、ts ファイルが cdn に配置されます。 .m3u8 ファイルは実際には UTF-8 でエンコードされた m3u ファイルであり、再生情報のテキスト ファイルが保存されるだけです: 1 #外部- -メディア- SEQUENCE 最初の TS シャードのシーケンス番号#EXT- - TARGETDURATION 各シャード TS 最大期間 #EXT X-ALLOW-CACHE キャッシュ #EXT -NENDLIST＃extinf（秒単位）は、それに続くuriに対してのみ有効です。 ts ts ファイル: HLS リクエストプロセスは: hls プロトコルは、ダウンロードと再生のためにライブ ストリームを短いビデオに分割することがわかっているため、リストに 5 つの ts ファイルが含まれていると仮定すると、各 TSファイルには 5 秒のビデオ コンテンツが含まれているため、全体の遅延は 25 秒になります。これらのビデオを見るときには、ホストがすでにビデオを録画してアップロードしているため、これによって遅延が発生します。もちろん、リストの長さと 1 つの ts ファイルのサイズを短くして、極端にリストの長さを 1 に、ts の期間を 1 秒に減らすこともできます。ただし、これにより数値は増加します。ネットワーク速度が遅い場合、タイミングによってバッファリングが増加するため、Apple が公式に推奨する ts 期間は 10 秒であるため、これにより 30 秒の遅延が発生します。参考: developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html4 ライブビデオストリーミングの全体的なプロセスは何ですか? ライブビデオは大きく分けて次のとおりです: 2 ビデオプレーヤー: コンピューター上のプレーヤー、携帯電話上のネイティブプレーヤー、または h5 ビデオタグなどがあります。現在、携帯電話上のネイティブプレーヤーがメインです。 3 ビデオサーバー: 通常は nginx サーバーで、ビデオ録画側から提供されるビデオ ソースを受け入れ、ビデオ プレーヤー側にストリーミング サービスを提供するために使用されます。 簡単なプロセス: 最初にいくつかの概念を明確にします: コーディングおよびデコーディング規格: ビデオストリーミング伝送で最も重要なコーディングおよびデコーディング規格には、ITU の H.261、H.263、および H.264 が含まれ、その中で HLS プロトコルは H.264 形式のエンコーディングをサポートしています。 エンコーディング: ビデオのエンコーディングと同様に、元のオーディオ ストリームは、特定の標準に従ってエンコード、アップロード、デコードされ、プレーヤーで再生されます。もちろん、オーディオには、PCM エンコーディング、WMA エンコーディングなどの多くのエンコーディング標準があります。 、および AAC エンコーディング。お待ちください。ここでの HLS プロトコルでサポートされているオーディオ エンコーディング方式は AAC エンコーディングです。 Session 2 ビデオの場合は H264 エンコード、オーディオの場合は AAC エンコード iOS には、オーディオとビデオをエンコードするためのカプセル化されたエンコード ライブラリがあります。 3 エンコードされたオーディオおよびビデオ データをパケットに組み立てます。 4 RTMP 接続を確立し、サーバーにプッシュします。 で記述されているため、iOS の場合は、既にコンパイルされたコーディング ライブラリを使用できます。 x264 エンコード: https://github.com/kewlbear/x264-ios faac エンコード: https://github.com/fflydev/faac-ios-build ffmpeg エンコード: https:// github.com/kewlbear/FFmpeg-iOS-build-script フィルターの追加など、ビデオに特殊効果を追加したい場合は、通常、エンコード前にフィルター ライブラリを使用しますが、これにより、これにより、ビデオ データのアップロードにある程度の遅れが生じます。 簡単なプロセス: 6 前述の ffmpeg とは何ですか? 以前の x264 と同様に、ffmpeg は実際にはエンコード ライブラリのセットです。Xvid と同様に、Xvid は MPEG4 プロトコルに基づくコーデック、x264 は H.264 プロトコルに基づくエンコーダーであり、ffmpeg はさまざまなオーディオ、ビデオを統合します。エンコードとデコードのプロトコルをパラメータを設定することで、MPEG4、H.264 などのプロトコルに基づいたエンコードとデコードを実行できます。ここでのデモでは、x264 エンコード ライブラリを使用します。 7 RTMP とは何ですか? Real Time Messaging Protocol (略して RTMP) は、Macromedia によって開発され、現在は Adobe に属しているビデオ ライブ ブロードキャスト プロトコルのセットです。 HLS と同様に、ライブ ビデオ ブロードキャストに適用できます。違いは、RTMP は Flash に基づいており、iOS ブラウザでは再生できないことですが、リアルタイム パフォーマンスは HLS よりも優れています。したがって、このプロトコルは通常、ビデオ ストリームをアップロードするために使用されます。つまり、ビデオ ストリームがサーバーにプッシュされます。 これが hls と rtmp の比較です: 8 プッシュ ストリーミング いわゆるプッシュ ストリーミングとは、エンコードしたオーディオとビデオ データをビデオ ストリーミング サーバーに送信することです。一般的には rtmp です。ストリーミングには、サードパーティのライブラリ librtmp-iOS を使用できます。 librtmp は、ユーザーが呼び出せるようにいくつかのコア api をカプセル化します。それが面倒な場合は、既製の iOS ビデオ ストリーミング SDK を使用できます。これも rtmp に基づいています。 https://github.com/runner365/LiveVideoCoreSDK 9 ストリーミング サーバーのセットアップ アップロードするビデオ ストリームは rtmp プロトコルに基づいているため、サーバーは次のようにする必要があります。 rtmp もサポートしています。おそらく次の手順が必要です。 2 nginx の rtmp 拡張機能をインストールします。現在、最も一般的に使用されているのは https://github.com/arut/nginx-rtmp-module 3 nginx conf ファイルを構成します。 1 サーバー{
聞いてください 1935;
チャンク_size 4000; Application hls{＃＃rtmpプッシュリクエストパスpath /local/var/www /hls; } 4 インスタンスを表します。つまり、将来生成されるファイル名を自分で設定できます。詳しい設定については、https://github.com/arut/nginx-rtmp-module/wiki/ 10 HTML5 ページでライブビデオを再生しますか? ウェブキット > <source src="http: // 10.66.69.77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" /> <p class="warning">あなたの ブラウザ は ではありません サポート HTML5 ビデオ. </p> </ビデオ> ; webkit-playsinline 属性 が video タグに追加されることに注意してください。この属性は、iOS の uiwebview でビデオを全画面表示せずに再生できるようにするためのものです。全画面表示では、uiwebview に allowedInlineMediaPlayback= を設定する必要があります。 Videojs は業界で比較的成熟しており、たとえば、iOS ではビデオ タグを使用し、PC ではフラッシュを使用するなど、さまざまなプラットフォームに応じてさまざまな戦略を選択できます。 11 落とし穴のまとめ Jian 上記の手順に基づいて、著者は iOS ビデオの録画、収集、アップロード、ライブ ストリームを配信する nginx サーバー、ライブ ビデオを再生するための h5 ページの実装までのデモを作成しました。 、プロセスの完全なセット、要約 以下にいくつかの落とし穴があります: 1 AVCaptureSession を使用してビデオをキャプチャする場合、AVCaptureVideoDataOutputSampleBufferDelegate プロトコルを実装する必要があり、同時に - (void)captureOutput:(AVCaptureOutput *)captureOutput DidOutputSampleBuffer: (CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection ビデオ ストリームをキャプチャする場合、didOutputSampleBuffer メソッドは、didDropSampleBuffer メソッドではなく、その時点で一度だけトリガーされることに注意してください。メソッド呼び出しが間違っていることがわかるまでに長い時間がかかりました。 2 rtmp を使用してストリームをプッシュする場合、rmtp アドレスは rtmp:// で始まる必要があり、IP アドレスは localhost ではなく実際の IP アドレスを記述する必要があります。同時に、localhost であるため、ポート番号を追加する必要があります。携帯電話からアップロードすると認識されません。 将来いくつかの落とし穴が追加され、コードを貼り付ける必要があるものもありますが、これらはここにリストされています。 12 業界サポート 現在、Tencent Cloud、Baidu Cloud、Alibaba Cloud には、ビデオ録画からビデオ再生、ストリーミングまで、一連の SDK があり、ビデオ ライブ ブロードキャストに基づいたソリューションが提供されています。欠点は、手数料がかかること、そして可能であれば自分で導入するのは難しくないことです。 デモアドレス: https://github.com/lvming6816077/LMVideoTest/ 以上がH5 ライブビデオ放送の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。 |
