HTTPストリーミング/ライブ～動画配信とその活用法3

Home » Blog » HTTPストリーミング/ライブ～動画配信とその活用法3

Try CDNetworks For Free

Most of our products have a 14 day free trail. No credit card needed.

第1回はプログレッシブダウンロードの利用方法をお伝えしました。第2回はHTTPストリーミング(VOD)の利用方法をお伝えしました。第3回となる本稿ではHTTPストリーミング/ライブの利用方法について説明します。

HTTPストリーミング/ライブの利用方法

HTTPストリーミング/ライブに必要なものは以下の3点です。

– ストリーミングサーバ
– ライブエンコーダ
– 視聴ページ(HTMLファイル)

第2回で説明したVODと異なる点は、動画コンテンツの代わりにライブエンコーダから送信される映像データを利用することです。

配信構成

今回の配信構成では、上の図のようにライブエンコーダから送信された映像データをHLS/MPEG DASHに変換して配信します。

利用するストリーミングサーバ

ライブエンコーダから送信された映像データを受け取ることが可能なソフトウェアが必要です。ほとんどの場合、それが可能なサーバソフトウェアとしてストリーミングサーバを利用します。ストリーミングサーバは前回と同じくWowzaを利用します。

Wawzaのセットアップ

第2回の「Wowzaのセットアップ」をご覧下さい。

配信用ディレクトリの作成

Wowzaが稼動するサーバにライブ配信用ディレクトリを作成します。前回と同じくWinSCPを利用して「wowzaadmin」というLinuxユーザのホームディレクトリに作成、保存しました。

■ 配信用ディレクトリ

/home/wowzaadmin/live-test

Live配信設定の追加

WowzaのWeb管理画面で上部メニューの「Applications」から「Add Application」->「Live」を押します。「New Application」のウインドウが表示されるのでディレクトリ名と同じ「live-test」と入力し「Add」を押します。

■ アプリケーションの設定
アプリケーションは配信設定に該当します。

今回は以下のような設定内容にします。

- Application Description　　: 設定に関する説明を記載します
- Playback Types　　　　　　　: MPEG DASH,Apple HLS (利用する配信形式をチェックします)
- Options　　　　　　　　　　　: CORSにチェックを入れます (jsベースのPlayerに必要です)
- Content Directory　　　　 　: Use the following directory
　　　　　　　　　　　　　　　　: /home/wowzaadmin/live-test   (配信用ディレクトリPathを指定します)
- Closed Caption Sources　　　: None(初期設定のままにします)
- Maximum Connections　　　　　: チェックをしません

設定内容が確定したらSaveします。Saveが正常に完了すると上部に「Saved! Your application is ready to use.」と表示され利用可能な状態になります。

■ライブエンコーダが接続するための認証設定
アプリケーションの標準設定では、ライブエンコーダが接続する際に認証を必要とします。

その認証に利用されるユーザとパスワードの設定を行います。

今回はユーザ名を「wowzalive」、パスワードは任意の文字列に設定します。

「wowzalive」のユーザが追加されていることを確認します。

ライブエンコーダの設定

ライブエンコーダは、Webカメラの映像や動画ファイルの映像などをストリーミングサーバへ送信するソフトウェアまたはハードウェアです。今回はソフトウェアのライブエンコーダとしてよく知られるWirecastを利用します。

■ Wirecastのインストール
Wirecastは有償のソフトウェアです。WirecastのWebサイトでライセンスの取得(購入)が必要となります。デモモードで動作する無償トライアルも可能です。今回はライセンスの取得、Wirecastのインストール、アクティベーションが完了していることを前提に進めます。

■ Wirecastの起動
Wirecastを起動するとWelcomeウインドウが表示されます。「空の書類を作成」を選択して「続行」を押します。

■ 配信の設定
上部メニューの「配信」から「配信の設定」を押します。

■ 出力先の選択
配信先を「RTMPサーバ」に設定してから「OK」を押します。

■ 出力先の詳細設定
ライブエンコーダがストリーミングサーバへ映像データを送信する際の詳細設定を行います。

今回は以下のような設定内容にします。

- 名前         : wowza-1 (この設定に対する名称を指定します)
- 配信先       : RTMPサーバー
- エンコード   : Default (映像の画質や解像度を指定します)
- アドレス　　 : rtmp://xxx.xxx.xxx.xxx:1935/live-test- ストリーム 　: myStream

「live-test」はWowzaで設定したライブ用のアプリケーション名です。「xxx.xxx.xxx.xxx」はストリーミングサーバ(Wowza)のIPアドレスです。「myStream」は、ストリーム名で任意の文字列を指定します。ひとつのアプリケーションに複数のライブ映像を送ることができます。それらを識別するためにストリーム名を利用します。

■ 認証情報の設定
ストリーミングサーバのアプリケーションへの接続には認証設定がされています。そのため、認証を通過するためのユーザ、パスワードを設定する必要があります。

「認証情報の設定」を押すと認証情報を入力するウインドウが表示されます。

Wowzaの「Source Authentication」で設定したユーザ、パスワードを入力します。「OK」を押すと認証情報が保存されます。出力先の詳細設定画面に戻るので「OK」を押すとライブ配信の設定が保存されます。

■ 配信する映像の追加
ライブ配信する映像を追加します。今回はWirecastを起動しているパソコンに接続したWebカメラの映像をライブ配信します。

画面下部に5つのレイヤーが表示されています。レイヤー1の「+」を押すと「ショットの追加」ウインドウが表示されます。「ビデオキャプチャ」から「システム機器」に表示されるWebカメラを選択します。「追加」を押すとレイヤー1にWebカメラの映像が表示されるようになります。

■ 配信の開始
上部メニューの「配信」から「配信の開始」->「開始 RTMPサーバ: wowza-1」を押します。

するとWebカメラの映像がエンコード処理され、その映像データがストリーミングサーバへ送信されるようになります。

「フェード」の右にあるボタンを押すと右側の映像ウインドウに映像が表示されるようになります。左の映像ウインドウは映像ソースとなるWebカメラからの映像、右のウインドウは実際にストリーミングサーバへ送信されている映像が表示されます。

配信URLの確認（HLS）

赤文字はアプリケーション名、青文字はストリーム名です。ストリーム名はVODでのコンテンツ名にあたるもので、ライブエンコーダで任意の文字列を設定します。ひとつのアプリケーションに複数のライブ映像を送ることができるため、それらを識別するために利用されます。

– 配信URL(HLS)
http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/playlist.m3u8

配信URLの確認（MPEG DASH）

赤文字はアプリケーション名、青文字はストリーム名です。

– 配信URL(MPEG DASH)
http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/manifest.mpd

HLSおよびMPEG DASHの視聴環境

視聴にはWebブラウザがその配信形式に対応している必要があります。主要なOSとWebブラウザによるHLS/MPEG DASHの対応状況は以下の通りです。

視聴ページとプレイヤーの作成（HLS）

映像再生するには視聴ページとなるHTMLファイルにHTML5 VideoまたはHTML5 Video+JavaScriptの記述が必要になります。iOSのサファリはHLSに対応していますがMSE未対応のためHTML5 Video+JavaScriptのプレイヤーを利用することができません。

そのため、PC向けはHTML5+JavaScript、スマートフォン向けはHTML5 Videoのみ利用するようにします。

■ PC向け(macOS含む)
今回はGitHubで公開されている「hls.js」を利用します。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video height="300" id="video" controls></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/playlist.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
 // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
 // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
 // This is using the built-in support of the plain video element, without using hls.js.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/playlist.m3u8';
    video.addEventListener('canplay',function() {<
      video.play();
    });
  }
</script>

映像ソースとして配信URLを指定する部分が2ヶ所あるので前述のHLSの配信URLに書き換えます。

■ hls.js(GitHub)
「hls.js」はJavaScriptベースのプレイヤーなので同じオリジンポリシーの制限を受けます。視聴ページとWowzaサーバのドメインが異なる場合、視聴者はWowzaサーバからHLSの映像データを取得することができません。

https://github.com/video-dev/hls.js

対策としてWowzaでアプリケーションを作成するときに「CORS」にチェックを入れておくことで、Wowzaサーバは外部ドメインからの取得を許可するヘッダをレスポンスするようになるのでHLSの映像データを取得することができます。

■ Mobile向け(iOS,Android)
一般的なHTML5 Videoの記述です。

<video src="http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/playlist.m3u8" controls></video>

必要に応じて他の属性を追加します。

■ 視聴ページへアクセス
Webブラウザで視聴ページへアクセスすると、プレイヤーが埋め込み表示されます。再生ボタンを押すとHLSの映像再生が開始されます。
※今回のHLSのデータ取得はHTTP(非暗号化)なので、視聴ページがSSL/TLSで暗号化されている場合はWebブラウザでブロックされることがあります

視聴ページとプレイヤーの作成（MPEG DASH）

映像再生するには視聴ページとなるHTMLファイルにHTML5 Video+JavaScriptの記述が必要になります。WebブラウザがMSEに対応していること、CORSの設定が必要であることは「hls.js」と同じです。

■ PC(macOS含む)およびAndroid
今回はGitHubで公開されている「dash.js」を利用します。

<div>
    <video data-dashjs-player src=" http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/manifest.mpd" controls>
    </video>
</div>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>

■ dash.js(GitHub)

https://github.com/Dash-Industry-Forum/dash.js

■視聴ページへアクセス
Webブラウザで視聴ページへアクセスすると、プレイヤーが埋め込み表示されます。

再生ボタンを押すとHLSの映像再生が開始されます。
※今回のMPEG DASHのデータ取得はHTTP(非暗号化)なので、視聴ページがSSL/TLSで暗号化されている場合はWebブラウザでブロックされることがあります

HTTPストリーミングはCDNを活用しやすい

今回はストリーミングサーバを利用してからライブエンコーダ送信された映像データをHLS/MPEG DASHに変換して配信する方法を説明しました。変換後のファイルはHTTPで配信されるので、これらをキャッシュして配信しても映像再生は可能です。

最新の映像を取得するため、映像リストとなるファイルのキャッシュ期間に注意する必要があるものの、HTTPのキャッシュシステムを主力とするCDNととても相性のよい技術です。多数のユーザが視聴する大規模配信、安定した配信環境が必要なNewsやIRの生放送などさまざまな場面で活用できます。

CDNetworksの動画配信サービス

CDNetworksは動画配信に特化したプラットフォームを用意しています。日本国内はもとより、グローバルにプラットフォームを展開しており、お客様はそれらをいつでも手軽に利用して、世界中のユーザへ動画を高速かつ安定して配信することができます。技術的なことに明るくない方も安心してサービスをご利用いただけるよう十分なヒアリングを行い、最適なサービスを提案いたします。

CDNetwokrsの動画配信サービスをご検討の際にはぜひお気軽にお問い合わせ下さい。

CDNetworksの動画配信サービスに関する詳細をまとめたホワイトペーパーを提供しています。是非ご覧ください。

なお、弊社では、Web会議（30分ほど）でのサービス紹介も承っております。
ご興味、ご関心のあるお客様は、お気軽にお問い合わせフォームよりお申し付けください。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■お問い合わせはこちら　>>お問い合わせフォーム
■関連資料のダウンロードはこちら　>> 資料ダウンロード
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
株式会社シーディーネットワークス・ジャパン TEL：03-5909-3373（営業部）

More To Explore

プレスリリース

［プレスリリース］自社サイトへのHTTPS DDoS攻撃と緩和を観測: 攻撃概要と攻撃上位国

CDNetworksは、2022年11月8日、弊社

2022年12月7日

プレスリリース

CDNetworks、2022カタールW杯のストリーミング配信をアジア屈指OTT企業と展開

『FIFA World Cup Qatar 202

2022年11月30日

プレスリリース

［プレスリリース］2022年達成報告と2023年戦略概要を発表

コンテンツデリバリネットワーク（CDN）、エッジコ

2022年11月2日

HTTPストリーミング/ライブ～動画配信とその活用法3

Table of Contents

Try CDNetworks For Free

Share This Post

HTTPストリーミング/ライブの利用方法

配信構成

利用するストリーミングサーバ

Wawzaのセットアップ

配信用ディレクトリの作成

Live配信設定の追加

ライブエンコーダの設定

配信URLの確認（HLS）

配信URLの確認（MPEG DASH）

HLSおよびMPEG DASHの視聴環境

視聴ページとプレイヤーの作成（HLS）

視聴ページとプレイヤーの作成（MPEG DASH）

HTTPストリーミングはCDNを活用しやすい

CDNetworksの動画配信サービス

More To Explore

［プレスリリース］自社サイトへのHTTPS DDoS攻撃と緩和を観測: 攻撃概要と攻撃上位国

CDNetworks、2022カタールW杯のストリーミング配信をアジア屈指OTT企業と展開

［プレスリリース］2022年達成報告と2023年戦略概要を発表