RSS

2019/06/20

HTTPストリーミング/Live~動画配信とその活用法3

Category:

Tag:

livestreaming550

 

第1回はプログレッシブダウンロードの利用方法をお伝えしました。

第2回はHTTPストリーミング(VOD)の利用方法をお伝えしました。

第3回となる本稿ではHTTPストリーミングのLiveの利用方法について説明します。

 

 

HTTPストリーミングの利用方法(Live)

 

HTTPストリーミング(Live)に必要なものは以下の3点です。

– ストリーミングサーバ

– Live Encoder

– 視聴ページ(HTMLファイル)

 

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

 

 

配信構成

 

cdnw-blog_ryokawana_3-1

 

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

 

 

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

 

Live Encoderから送信された映像データを受け取ることが可能なソフトウェアが必要です。

ほとんどの場合、それが可能なサーバソフトウェアとしてストリーミングサーバを利用します。

ストリーミングサーバは前回と同じくWowzaを利用します。

 

 

Wowzaのセットアップ

 

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

 

 

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

 

cdnw-blog_ryokawana_3-2

 

Wowzaが稼動するサーバにLive配信用ディレクトリを作成します。

前回と同じくWinSCPを利用して「wowzaadmin」というLinux Userのホームディレクトリに作成、保存しました。

 

■ 配信用ディレクトリ

/home/wowzaadmin/live-test 

 

 

Live配信設定の追加

 

cdnw-blog_ryokawana_3-3

 

WowzaのWeb管理画面で上部メニューの「Applications」から「Add Application」->「Live」を押します。

「New Application」のウインドウが表示されるのでディレクトリ名と同じ「live-test」と入力し「Add」を押します。

 

■ Applicationの設定

Applicationは配信設定に該当します。

 

cdnw-blog_ryokawana_3-4

 

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

– 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.」と表示され利用可能な状態になります。

 

■ Live Encoderが接続するための認証設定

Applicationの標準設定ではLive Encoderが接続する際に認証を必要とします。

 

cdnw-blog_ryokawana_3-5

 

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

 

cdnw-blog_ryokawana_3-6

 

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

 

cdnw-blog_ryokawana_3-7

 

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

 

 

Live Encoderの設定

 

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

 

■ Wirecastのインストール

Wirecastは有償のソフトウェアです。WirecastのWebサイトでライセンスの取得(購入)が必要となります。

デモモードで動作する無償トライアルも可能です。

 

今回はライセンスの取得、Wirecastのインストール、アクティベーションが完了していることを前提に進めます。

 

■ Wirecastの起動

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

 

cdnw-blog_ryokawana_3-8

 

■ 配信の設定

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

 

cdnw-blog_ryokawana_3-9

 

■ 出力先の選択

配信先を「RTMPサーバー」に設定してから「OK」を押します。

 

cdnw-blog_ryokawana_3-10

 

■ 出力先の詳細設定

Live Encoderがストリーミングサーバへ映像データを送信する際の詳細設定を行います。

 

cdnw-blog_ryokawana_3-11

 

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

– 名前             : wowza-1 (この設定に対する名称を指定します)

– 配信先          : RTMPサーバー

– エンコード    : Default (映像の画質や解像度を指定します)

– アドレス   : rtmp://xxx.xxx.xxx.xxx:1935/live-test

– ストリーム  : myStream

 

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

 

■ 認証情報の設定

ストリーミングサーバのApplicationへの接続には認証設定がされています。

そのため、認証を通過するためのユーザ、パスワードを設定する必要があります。

 

cdnw-blog_ryokawana_3-12

 

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

 

cdnw-blog_ryokawana_3-13

 

Wowzaの「Source Authentication」で設定したユーザ、パスワードを入力します。

「OK」を押すと認証情報が保存されます。

 

出力先の詳細設定画面に戻るので「OK」を押すとLive配信の設定が保存されます。

 

■ 配信する映像の追加

Live配信する映像を追加します。

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

 

cdnw-blog_ryokawana_3-14

 

画面下部に5つのレイヤーが表示されています。

レイヤー1の「+」を押すと「ショットの追加」ウインドウが表示されます。

「ビデオキャプチャ」から「システム機器」に表示されるWebカメラを選択します。

「追加」を押すとレイヤー1にWebカメラの映像が表示されるようになります。

 

cdnw-blog_ryokawana_3-15

 

■ 配信の開始

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

 

cdnw-blog_ryokawana_3-16

 

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

 

cdnw-blog_ryokawana_3-17

 

「フェード」の右にあるボタンを押すと右側の映像ウインドウに映像が表示されるようになります。

左の映像ウインドウは映像ソースとなるWebカメラからの映像、右のウインドウは実際にストリーミングサーバへ送信されている映像が表示されます。

 

 

配信URLの確認(HLS)

 

赤文字はApplication名、青文字はStream名です。

Stream名はVODでのコンテンツ名にあたるものでLive Encoderで任意の文字列を設定します。

ひとつのApplicationに複数のLive映像を送ることができるため、それらを識別するために利用されます。

 

配信URL(HLS)

http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/playlist.m3u8

 

 

配信URLの確認(MPEG DASH)

 

赤文字はApplication名、青文字はStream名です。

 

配信URL(MPEG DASH)

http://xxx.xxx.xxx.xxx/live-test/_definst_/myStream/manifest.mpd

 

 

HLSおよびMPEG DASHの視聴環境

 

視聴にはWebブラウザがその配信形式に対応している必要があります。

主要なOSとWebブラウザによるHLS/MPEG DASHの対応状況は以下の通りです。

 

cdnw-blog_ryokawana_3-18_en

 

 

視聴ページとPlayerの作成(HLS)

 

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

そのため、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ベースのPlayerなのでSame Origin Policyの制限を受けます。 視聴ページとWowzaサーバのドメインが異なる場合、視聴者はWowzaサーバからHLSの映像データを取得することができません。

 

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

 

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

 

■ Mobile向け(iOS,Android)

一般的なHTML5 Videoの記述です。

 

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

 

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

 

■ 視聴ページへアクセス

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

再生ボタンを押すとHLSの映像再生が開始されます。

※今回のHLSのデータ取得はHTTP(非暗号化)なので、視聴ページがSSL/TLSで暗号化されている場合はWebブラウザでブロックされることがあります

 

cdnw-blog_ryokawana_3-19

 

 

視聴ページとPlayerの作成(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ブラウザで視聴ページへアクセスすると、Playerが埋め込み表示されます。

 

cdnw-blog_ryokawana_3-20

 

再生ボタンを押すとHLSの映像再生が開始されます。

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

 

 

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

 

今回はストリーミングサーバを利用してLive Encoderから送信された映像データをHLS/MPEG DASHに変換して配信する方法を説明しました。

 

変換後のファイルはHTTPで配信されるので、これらをキャッシュして配信しても映像再生は可能です。

 

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

 

 

CDNetworksの動画配信サービス

 

CDNetworksは動画配信に特化したプラットフォームを用意しています。日本国内はもとより、グローバルにプラットフォームを展開しており、お客様はそれらをいつでも手軽に利用して、世界中のユーザへ動画を高速かつ安定して配信することができます。

 

また、CDNetworksでは、動画コンテンツを管理するためのオンライン・ビデオ・プラットフォーム(OVP)も併せて提供しており、お客様の動画活用をワンストップでサポートしています。技術的なことに明るくない方も安心してサービスをご利用いただけるよう十分なヒアリングを行い、最適なサービスを提案いたします。

 

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

 

==================================

■サービス導入に関するお問い合わせはこちら >>お問い合わせフォーム

■サービス概要について知りたい方はこちら >>ホームページ

■サービス資料のダウンロードはこちら >>資料ダウンロード

■サービス導入事例やホワイトペーパーのダウンロードはこちら >>資料ダウンロード

==================================

 

☟お気軽にダウンロードください

blog-ma-cta

 

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

 

PAGE TOP