第1回はプログレッシブダウンロードの利用方法をお伝えしました。第2回となる本稿ではHTTPストリーミングのVOD（ビデオ・オン・デマンド）の利用方法について説明します。

HTTPストリーミングについて

従来のストリーミングは専用のプロトコルを利用した動画配信でしたが、現在は汎用性の高いHTTPプロトコルを利用したHTTPストリーミングが広く利用されています。

HTTPストリーミングの特徴は以下の3点です。

1. 汎用性の高いHTTPプロトコルを利用
2. マルチビットレート配信（アダプティブストリーミング）
3. マルチデバイス対応

これにより多くの視聴環境に最適な映像配信を行うことができます。

VoDとライブストリーミング

HTTPストリーミングを含むストリーミング配信には大きく分けて2つの配信方法があります。

■VoD（ビデオ・オン・デマンド）
動画ファイルを用意する配信方法で視聴者はいつでも好きなコンテンツを観たり聴いたりすることができます。映画や楽曲のインターネット配信によく利用されます。

■ライブストリーミング
生放送タイプの配信方法で視聴者は配信されている映像をリアルタイムで視聴することができます。コンサートやイベントの現場放送などリアルタイム性を重視するインターネット配信に適しています。

HTTPストリーミングの種類

HTTPストリーミングにはいくつかの種類があります。現在は以下の2つが広く利用されています。

 ■HLS（HTTP Live Streaming）
macOSやiPhoneで知られるAppleが開発したHTTPストリーミングです。
同社のMac、iPhone（iPAD）に加えAndroid端末でも再生することができます。Windows環境で再生するにはFlashPlayerベースのプレイヤーが必要となることが多かったのですが、現在はHTML5+JavaScriptのプレイヤーが公開されているためプラグイン無しで再生することが可能です。非常に高いシェアを持ち、HTTPストリーミングの代表格となっています。

■MPEG DASH（Dynamic Adaptive Streaming over HTTP）
MPEG DASHは”DASH”という名前で知られる国際標準のHTTPストリーミングです。
複数の企業で構成された組織で仕様の策定を行っており、その中には独自のHTTPストリーミングを開発しているAdobe SystemsやMicrosoftも含まれています。こちらもHTML5+Javascriptのプレイヤーで再生することができるためプラグインが不要です。ただしiPhoneのSafariでは再生することができないためスマートフォン向けの動画配信には注意が必要です。大手の動画共有サービスをはじめ、SNSや映像配信サービスに採用されており、今後もシェアを拡大するものと思われます。

HTTPストリーミングの利用方法（VoD）

HTTPストリーミングに必要なものは以下の3点で、基本的な構成は第1回で説明したプログレッシブダウンロードとよく似ています。

1. ストリーミングサーバ（Webサーバで代用可能）
2. 動画コンテンツ
3. 視聴ページ(HTMLファイル)

今回はストリーミングサーバを利用したVOD配信の利用方法を説明します。

配信構成

今回の配信構成では下図のようにストリーミングサーバにアップロードされたmp4ファイルをHLS/MPEG DASHに変換して配信します。

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

視聴者からリクエストを受けたとき、動画ファイルをHTTPストリーミングに変換して視聴者へレスポンスするサーバです。Wowza(Wowza Streaming Engine)やRed5といった専用のストリーミングサーバソフトウェアの他、nginx-rtmp-moduleのようにWebサーバのモジュールを追加して利用することもできます。

今回はHLS/MPEG DASHの両方に対応し、広く活用されているWowzaを利用します。

Wawzaのライセンス取得

Wowzaは有償のサーバソフトウェアです。WowzaのWebサイトでラインセンスの取得(購入)とポータルサイトのアカウント作成が必要となります。今回はライセンスの取得が完了し、ライセンスキーを持っていることを前提に進めます。

Wawzaのセットアップ

セットアップに必要なファイル（インストーラー）とセットアップ方法は以下のWebページに記載されています。

– インストーラ：https://www.wowza.com/pricing/installer
– セットアップ方法：https://www.wowza.com/docs/how-to-install-and-configure-wowza-streaming-engine

今回はLinux（CentOS 7.6）にWowzaをセットアップしてストリーミングサーバとして利用します。

(1) Wowzaのインストーラーをダウンロード
ダウンロードURLはインストーラーのページでご確認下さい。

$ curl -OL https://www.wowza.com/downloads/WowzaStreamingEngine-4-7-7/WowzaStreamingEngine-4.7.7-linux-x64-installer.run

(2) Wowzaのインストーラーに実行権限を付与

$ chmod +x WowzaStreamingEngine-4.7.7-linux-x64-installer.run

(3) Wowzaのインストーラーを実行

$ sudo ./WowzaStreamingEngine-4.7.7-linux-x64-installer.run

(4) License Agreementの確認
使用許諾に関する内容が表示されます。問題がなければ同意します。

Do you accept this agreement? [y/n]:   (同意する場合yを入力しEnterを押す)

(5) Wowzaのライセンスキーを入力
ライセンスキーは購入後、登録したメールアドレスに送信されます。

License Key: []:  (ライセンスキーを入力しEnterを押す)

(6) Wowza Web管理画面のアカウント作成
WowzaはWeb管理画面で配信設定を追加・変更することができます。ここではそのWeb管理画面にログインするためのアカウント情報を入力します。

Enter a user name and password that will be used to manage Wowza Streaming Engine.
User Name: []:         (User名を入力しEnterを押す)
Password: :            (Passwordを入力しEnterを押す)
Confirm Password: :    (Passwordを再入力しEnterを押す)

(7) Wowzaの自動起動
サーバのOS起動時にWowzaを起動するので「y」を入力します。

Start Wowza Streaming Engine automatically [Y/n]: (yを入力しEnterを押す)

(8) Wowzaのインストール実施確認
今まで入力した内容でインストールを実施するかどうかの確認です。問題がなければ「y」を入力します。

Do you want to continue? [Y/n]: (yを入力しEnterを押す)

「Setup has finished installing Wowza Streaming Engine on your computer.」が表示されたらWowzaのインストールは完了です。

(9) Wowza起動確認

$ ps aux |grep "Wowza" (4つのプロセスが表示される)

ファイアウォール設定

CentOS 7.xではファイアウォールによって外部からのアクセスが制限されています。そのためWowzaが利用する通信ポートを外部からアクセスするようにします。

$ systemctl status firewalld (activeであることを確認)
$ sudo firewall-cmd --add-port=8088/tcp --zone=public –permanent (Web管理画面用)
$ sudo firewall-cmd --add-port=1935/tcp --zone=public –permanent (配信用)
$ sudo firewall-cmd --add-port=80/tcp --zone=public –permanent (配信用)
$ sudo firewall-cmd –reload (設定反映のためのreload)

WawzaのWeb管理画面へアクセス

WebブラウザでWowzaのWeb管理画面へアクセスします。

(1) Web管理画面　(「xxx.xxx.xxx.xxx」にはサーバのIPアドレスを入力します)
http://xxx.xxx.xxx.xxx:8088/enginemanager

(2) Web管理画面ログイン
Wowzaインストール時に設定したUser/Passwordを入力します。

(3) LiveEncoder接続Userの作成画面
ライブストリーミングでLiveEncoderがWowzaに接続するときのUser/Password設定画面です。後から追加することもできるので、今回は設定せず次回以降のライブストリーミングを利用する際に設定します。「Done！～」を押すとWowza管理画面のホーム画面へ移動します。

(4) ホーム画面の確認
ホーム画面ではWowzaの全体的なステータスを確認することができます。インストール直後は右上の赤枠のようにパフォーマンス警告が表示されますので「Java Settings」のリンクから設定変更ページへ移動します。

(5) Java Heap Sizeの変更
「Development level」から「Production level」に変更してSaveします。その後、上部に「Restart Now」のボタンが表示されるので、設定反映のためにそのボタンを押してWowzaを再起動します。

(6) Virtual Hostのポート追加
標準ではHTTPで通信する場合もRTMPと同じTCP1935を利用したアクセスのみですが、HTTPの標準ポートであるTCP80でアクセスできるようにします。

上部メニューの「Server」から順に「Virtual Host Setup」->「Basic」->「Edit」->「Host Ports」の項目へ移動します。上の図の赤枠を押すと編集が可能になるのでPortを「1935」から「1935,80」に変更します。変更後にSaveすると、上部に「Restart Now」のボタンが表示されるので、設定反映のためにそのボタンを押してWowzaを再起動します。

配信用ディレクトリの作成とコンテンツのアップロード

Wowzaが稼動するサーバに配信用コンテンツを保存するディレクトリを作成します。また配信用のコンテンツとなる動画ファイルもアップロードします。今回はWinSCPを利用して「wowzaadmin」というLinuxユーザのホームディレクトリに作成、保存しました。

– 配信用ディレクトリ：/home/wowzaadmin/vod-test
– 配信用テストコンテンツ：/home/wowzaadmin/vod-test/cdnw-test.mp4

VoD配信設定の追加

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

■ Applicationの設定
Applicationは配信設定に該当します。今回は以下のような設定内容にします。

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

設定内容が確定したらSaveします。Saveすると上部に「Restart Now」のボタンが表示されるので、設定反映のためにそのボタンを押してApplicationを再起動します。

配信URLの確認（HLS）

赤文字はApplication名、青文字はコンテンツファイル名、緑文字はサブディレクトリ名です。

– サブディレクトリなし
http://xxx.xxx.xxx.xxx/vod-test/_definst_/mp4:cdnw-test.mp4/playlist.m3u8

– 「sub-dir」ディレクトリ内に保存した場合
http://xxx.xxx.xxx.xxx/vod-test/_definst_/sub-dir/mp4:cdnw-test.mp4/playlist.m3u8

配信URLの確認（MPEG DASH）

赤文字はApplication名、青文字はコンテンツファイル名、緑文字はサブディレクトリ名。

– サブディレクトリなし
http://xxx.xxx.xxx.xxx/vod-test/_definst_/mp4:cdnw-test.mp4/manifest.mpd

-「sub-dir」ディレクトリ内に保存した場合
http://xxx.xxx.xxx.xxx/vod-test/_definst_/sub-dir/mp4:cdnw-test.mp4/manifest.mpd

HLSおよびMPEG DASHの視聴環境

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

視聴ページとPlayerの作成（HLS）

映像再生するには視聴ページとなるHTMLファイルにHTML5 VideoまたはHTML5 Video+JavaScriptの記述が必要になります。

iOSのSafariはHLSに対応していますがMSE未対応のためHTML5 Video+JavaScriptのPlayerを利用することができません。そのため、PC向けはHTML5+JavaScript、スマートフォン向けはHTML5 Videoのみ利用するようにします。

– PC向け(macOS含む)

<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/vod-test/_definst_/mp4:cdnw-test.mp4/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/vod-test/_definst_/mp4:cdnw-test.mp4/playlist.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
</script>

今回はGitHubで公開されている「hls.js」を利用します。映像ソースとして配信URLを指定する部分が2ヶ所あるので前述のHLSの配信URLに書き換えます。

– hls.js(GitHub)　https://github.com/video-dev/hls.js
「hls.js」はJavaScriptベースのPlayerなのでSame Origin Policyの制限を受けます。視聴ページとWowzaサーバのドメインが異なる場合、視聴者はWowzaサーバからHLSの映像データを取得することができません。対策としてWowzaでApplicationを作成するときに「CORS」にチェックを入れておくことで、Wowzaサーバは外部ドメインからの取得を許可するヘッダをレスポンスするようになるのでHLSの映像データを取得することができます。

– Mobile向け(iOS,Android)
一般的なHTML5 Videoの記述です。必要に応じて他の属性を追加します。

<video src="http://xxx.xxx.xxx.xxx/vod-test/_definst_/mp4:cdnw-test.mp4/playlist.m3u8" controls></video>

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

視聴ページとPlayerの作成（MPEG DASH）

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

– PC(macOS含む)およびAndroid

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

今回はGitHubで公開されている「dash.js」を利用します。

– dash.js(GitHub)
https://github.com/Dash-Industry-Forum/dash.js

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

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

今回はストリーミングサーバを利用してmp4の動画ファイルをHLS/MPEG DASHに変換して配信する方法を説明しました。変換後のファイルはHTTPで配信されるので、これらをキャッシュして配信しても映像再生は可能です。そのため、HTTPのキャッシュシステムを主力とするCDNととても相性のよい技術です。

多数のユーザが視聴する大規模配信、安定した配信環境が必要なコーポレートサイトの動画などさまざまな場面で活用できます。

CDNetworksの動画配信サービス

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

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

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

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

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■お問い合わせはこちら　>>お問い合わせフォーム
■関連資料のダウンロードはこちら　>> 資料ダウンロード
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

株式会社シーディーネットワークス・ジャパン TEL：03-5909-3373（営業部）