ビデオストリーミング技術の紹介

経営する企業のブログページで掲載したオリジナル記事 ("ビデオストリーミング技術の紹介") の転載です。 ビデオストリーミングの歴史 インターネットの普及に伴い、様々なシナリオで色々なビジネスに、デジタルビデオがあたりまえのように利用されていますが、デジタルビデオ技術はこれまでに様々な歴史を紡いできています。 2000年代から様々なビデオストリーミング技術が各社で開発され、色々な技術が世の中に溢れていきました。独自のプロトコルで独自のサーバー・クライアント技術を使ったストリーミング技術が開発され、それぞれの技術に精通する必要があり大変な時期でした。これらの技術では、再生するビデオやオーディオの品質はクライアントとサーバー間の通信で制御することもできましたが、ルーター製品やネットワークアドレス変換 (NAT) などのネットワーク環境によって、通信ができないなどの制限もありました。 と同時に、加速度的に普及する HTTP 技術とビデオストリーミングの親和性のために、2000年代後半に、HTTP ベースのアダプティブストリーミングのビデオ配信技術が各社で開発されました。ストリーミングの世界は、アダプティブストリーミングにより、これまでのビデオストリーミング技術がアップデートされました。単純な HTTP ダウンロードでビデオをファイルを再生する際には、たとえビデオをダウンロードしながら再生できたとしても、ビデオのダウンロード速度(ネットワークのバンド幅)とビデオの品質の関係が問題になってきます。 つまり、ビデオの品質(ビデオの1秒間のデータ容量)がダウンロード速度(1秒間にダウンロードできる容量)よりも遅い(大きい)場合は、ビデオの再生が追いつかず、ビデオが途中で止まってしまうということになります。 この問題を解決しようとするのが、アダプティブストリーミングという技術です。 アダプティブストリーミングでは、ビデオを複数のセグメントに分割し、分割したビデオごとにダウンロードして再生することを基本としました。1つのビデオのセグメントは、例えば、2~10秒という長さのビデオで、これらの分割したビデオセグメント群を様々な品質(ビットレート)と解像度でそれぞれ準備することで、ビデオを再生するプレイヤーは、ビデオを配信する Web サーバーとの通信の速度や状態によって、どの品質と解像度のビデオセグメントを再生するか選ぶことができるようになります。 この技術によって、再生するクライアントは、接続しているネットワークのバンド幅に合わせて、再生するビデオの品質をスイッチしながら再生することができ、途中でビデオが止まることがなく再生することができるようになります。 また、HTTP ベースのストリーミングであるため、HTTP キャッシングが可能な CDN (コンテンツ デリバリ ネットワーク) を使って、ストリーミングサーバーの負荷を最小限にしながら、大規模なエンドユーザー向けにビデオストリーミングを配信することができます。 アダプティブストリーミング アダプティブストリーミングとして、当時、3つのストリーミング技術が開発され、それぞれの技術では、ライブ、ビデオオンデマンドのどちらのビデオ配信シナリオをサポートし、専用のクライアントプレイヤーがそれぞれ用意されました。 Adobe HTTP Dynamic Streaming (HDS) Apple HTTP Live Streaming (HLS) Microsoft Smooth Streaming 当時の HTML 技術には、<video> タグや <audio> タグは定義されておらず、リッチメディアと呼ばれるビデオなどのメディアは、ブラウザーのプラグインを使って実装されたプレイヤーで再生されていました。このため、多くのユーザーに向けて配信するためには、コンテンツの配信側は、それぞれのプラグインに対応する3つのストリーミング方式に対応する必要がありました。 モバイルデバイスの普及、マルチデバイス化とともに、ビデオストリーミング技術の標準化やクライアントの標準化が課題となり、様々な企業がビデオストリーミングの技術の発展に寄与してきました。 ビデオストリーミング技術の標準化においては、MPEG-DASH (Dynamic Adaptive Streaming over HTTP) は、2012 年に最初に国際標準として制定されたアダプティブストリーミング技術で、Microsoft や Adobe は、これまで培った技術と経験をベースに、この MPEG-DASH の技術の開発に貢献しました。また、Akamai, Ericsson, Microsoft, Netflix, Qualcomm, Samsung が設立メンバーとして設立した DASH Industry Forumという団体において、標準化された MPEG-DASH 技術に関するマーケットで実際の互換性問題の解決や推奨事項のガイドライン化などを行いながら、技術の普及につとめています。...

2022/10/24 Â· @shigeyf

シンプルな Web プレイヤーの開発と展開

ストリーミング プレイヤーの開発 ビデオストリーミング技術の紹介でも触れたように、 現在、ビデオストリーミングは Web 技術との親和性が高く、ストリーミングビデオは Web ブラウザー上で、 JavaScript を使って開発されたプレイヤーで再生することができるようになっています。 普及している2つのストリーミングプロトコル (HLS, MPEG-DASH) のビデオストリームを再生することができる、 実績のあるオープンソースのプレイヤーがあります。以下のプレイヤーです。 HLS の再生: hls.js | Github MPEG-DASH の再生: dash.js | GitHub この記事では、これらを使って、Web プレイヤーをホストするページを開発します。 hls.js プレイヤー:シンプルなコード もっともシンプルな hls.js の再生プレイヤーのページのコードは以下の通りです。 hls.js が提供する Hls クラスを使ってビデオプレイヤーを初期化し、再生したい HLS ストリームの URL を プレイヤーにロードすることでビデオストリームの再生をトリガーすることができます。 ビデオプレイヤーを表示するためには、プレイヤーを表示するための HTML 要素をアタッチします。 以下のコード例では、<video> タグで HLS の再生をネイティブサポートしているプレイヤー (Safari など) も 対応できるようにしてあります。その場合は、HLS ストリームの再生に hls.js を使いません。 より細かなコントロールを行うためのアプリケーションの開発を行うには、Hls クラスの API の詳細を確認します。 hls.js API ドキュメント を参照します。 <body> <!-- プレイヤーのコンテナ要素 --> <div class="hls-js-container"> <video id="hls-js-player" controls width="640px"></video> </div> <!...

2020/10/15 Â· @shigeyf