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

ブログ post

By 福島茂之

作成: 2020年10月15日

最終更新: 2023年03月25日

カテゴリ:

Blog

パートナー:

open-source

タグ:

7分で読めます(目安)

ストリーミングプレイヤーの開発

ビデオストリーミング技術の紹介でも触れたように、現在、ビデオストリーミングは 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>

  <!-- hls.js 本体のロード -->
  <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
  <!-- hls.js プレイヤー制御のアプリケーションコード -->
  <script>
    (function() {
      var video = document.getElementById('hls-js-player');
      var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
      if (Hls.isSupported()) {
        // HTML Media Source Extension (MSE) をサポートするブラウザー向け (hls.js を利用する)
        var hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
      }
      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        // ブラウザーの <video> タグがネイティブで HLS をサポートするブラウザー向け
        video.src = videoSrc;
      }
    });
  </script>
</body>

dash.js プレイヤー：シンプルなコード

もっともシンプルな dash.js の再生プレイヤーのページのコードは以下の通りです。 dash.js が提供する MediaPlayer クラスを使ってビデオプレイヤーを初期化し、再生したい MPEG-DASH ストリームの URL をプレイヤーにロードすることでビデオストリームの再生をトリガーすることができます。

ビデオプレイヤーを表示するためには、プレイヤーを表示するための HTML 要素をアタッチします。

より細かなコントロールを行うためのアプリケーションの開発を行うには、MediaPlayer クラスや他のクラスの API の詳細を確認します。 dash.js API ドキュメントを参照します。

<body>
  <!-- プレイヤーのコンテナ要素 -->
  <div class="dash-js-container">
    <video id="dash-js-player" controls width="640px"></video>
  </div>

  <!-- dash.js 本体のロード -->
  <script src="//cdn.dashjs.org/v4.6.0/dash.all.min.js"></script>
  <!-- dash.js プレイヤー制御のアプリケーションコード -->
  <script>
    (function() {
      var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
      var player = dashjs.MediaPlayer().create();
      player.initialize(document.querySelector("#dash-js-player"), url, true);
    })();
  </script>
</body>

ビデオストリームの再生テスト

プレイヤーを実装した HTML ページ (index.html などのコンテンツ) を用意した後は、 NGINX で HTML コンテンツをホストすることでローカル環境でも簡単に開発・テストが行えます。

HTML コンテンツがカレントディレクトリにある状態で、以下のコマンドを実行します。このコマンド実行では、Docker を使って NGINX をコンテナーでホストします。

docker image pull nginx
docker run --name docker-nginx -p 80:80 -d -v .:/usr/share/nginx/html nginx

開発・テストが終わったら、以下のコマンドで実行しているコンテナーを停止・削除することができます。

docker stop docker-nginx && docker rm docker-nginx

実践的な再生テスト用のプレイヤーアプリケーション

以下の要件を満たすアプリケーションを開発しました。開発したプレイヤーのソースコードは GitHub リポジトリを参照してください。

ユーザーが入力ボックスに指定したストリームを再生できること
hls.js と dash.js を手動で切り替えて再生できること

テスト用のプレイヤーアプリケーション

テスト用のストリーミングプレイヤーの展開 (ホスティング)

「Wowza Streaming Engine のインストールとセットアップ」でも触れた通り、最新のブラウザーでは、ほぼすべてのブラウザーが HTTP/HTTPS 混在ウェブコンテンツのブラウジングを許可しません。

今回は、テスト用のプレイヤーを開発したいので、ストリーミングサーバーが HTTPS (TLS) をサポートしない場合でもストリーム再生のテストが実行できるように、HTTP/HTTPS の両方でアクセスできるページを簡単に用意します。

つまり、HTTP ストリームは HTTP でアクセスしたホストで再生し、HTTPS ストリームは HTTPS でアクセスしたホストで再生します

展開先のサービスの選択

自宅環境などにサーバーを用意してホストする場合を除いては、一般的にホスティングサービスを利用します。 Netlify , Vercel , Heroku などのよく利用されているホスティングサービスには、無料のプランがあり、これらを使うことが可能です。

ただし、ここ数年で HTTP サポートを停止し、強制的に HTTPS を利用するように構成されるサービスがほとんどです。

HTTP/HTTPS の両方でホストが可能で、可能な限り安価で展開をするための方法として、Microsoft Azure Cloud を利用する方法をここでは紹介します。

Azure Storage を静的 Web サイトをホストする
- Azure Storage は HTTP/HTTPS の両方のプロトコルでのアクセスをサポートします
- Azure Web App サービスは、Web ホストの動作時間に対して課金されますので割高となりますが、Azure Storage はコンテンツの容量だけしか課金されません
- Azure Static Web App サービスは、HTTPS のみサポートし、HTTP はサポートされません
Azure CDN を使って Azure Storage にホストした静的 Web サイトを公開する (独自のカスタムドメインを利用する場合のみ)
- Azure Storage ではカスタムドメインの HTTPS 証明書のサポートをしていないため、独自のカスタムドメインを利用して HTTPS を利用する場合は Azure CDN を利用する必要があります

Azure Storage アカウントの作成と静的 Web ホストの設定

下記の 3 つの作業ステップを Azure ドキュメントの記事を参考に実施します。

Azure Storage アカウントを作成します
- 参照記事: ストレージアカウントを作成する
静的 Web サイトをホストするよう構成します
- 参照記事: Azure Storage で静的 Web サイトをホストする
- 参考: 概念: 静的な Web サイト
アプリケーションの Web コンテンツを Azure Storage にアップロードします
- 参照記事: ファイルをアップロードします

静的 Web サイトを HTTP/HTTPS の両方でアクセスできるようにするためには、以下の設定を行います。

[設定] -> [構成] -> [安全な転送が必須] = “無効”

Azure Storage 設定

設定が完了すると、以下の URL でアクセスすることができるようになります。

[ストレージアカウント名] および [XX] は作成したアカウントに合わせて置き換えてください。

Azure CDN の設定 (オプション)

今回は、独自のドメインを使ってホストを HTTP/HTTPS で公開したいので以下のような構成の作業を行います。

下記の 3 つの作業ステップを Azure ドキュメントの記事を参考に実施します。

静的な Web サイトを Azure CDN と統合し、CDN エンドポイントで公開します
- Azure CDN の種類を選び、CDN プロファイルを作成します
- CDN のプロファイルが作成できたら、静的 Web サイトを公開するエンドポイントを作成します
- 参照記事: 静的な Web サイトを Azure CDN と統合する
独自のカスタムドメインを CDN エンドポイントに追加します
- 参照記事: カスタムドメインをエンドポイントに追加する
CDN エンドポイントに追加したカスタムドメインで HTTPS が有効となるよう構成します
- 有効となるよう構成すると、バックグラウンドで自動的に、ドメインの所有を検証し、カスタムドメインのたｍの HTTPS 証明書を発行します
- 10~30 分ほど時間がかかります
- 参照記事: Azure CDN カスタムドメインで HTTPS を構成する

まとめ: ホストされたテスト用プレイヤーアプリケーションのサイト

今回は、HLS と MPEG-DASH ストリームの再生のためのシンプルなテスト用プレイヤーアプリケーションを作成し、 HTTP/HTTPS の両方でアクセスできるホスト上に独自ドメインを使って展開しました。

以下のサイトで展開しています。

HTTP: http://testplayer.demo.liveinstantly.cloud/
HTTPS: https://testplayer.demo.liveinstantly.cloud/

また、開発したプレイヤーのソースコードは GitHub リポジトリを参照してください。

今後は、様々なコンテンツの再生のためのプレイヤーのオプションなど設定項目なども入力できるように、プレイヤーのアプリケーションの拡張を行う予定です。また、フィードバックがありましたら、 GitHub Issues までご連絡ください。