LiveInstantly, LLC.

Resources: THEOplayer プレイヤーのデモ Web アプリ

Thu, 10 Nov 2022 09:00:00 +0900

このブログ記事では、サービスのWeb サイト用に THEOplayer Web SDK と統合された実用的なアプリケーションとして、THEOplayer プレーヤーデモ Web アプリケーションを紹介します。

THEOplayer は、THEO Technologies によって開発されたユニバーサルビデオプレーヤーソリューションです。 THEOplayer は、複数のプラットフォーム (HTML5 (Web)、Apple iOS、Apple tvOS、Google Android、Google Android TV、Samsumg Tizen、LG webOS、Amazon FireTV、ROKU など) 用のプレーヤー SDK を提供し、HLS、MPEG-DASH、広告、DRM などを様々な機能をサポートします。

このデモ Web アプリは Nuxt 3、Vue 3、および、Vuetify 3 フレームワークと統合されており、THEOplayer Web SDK で複数のビデオストリームの例を再生します。このプレーヤーの例の Git リポジトリを Github で公開しています: https://github.com/liveinstantly/theoplayer-web-nuxt3-demos .詳細はリポジトリを参照してください。

このデモ Web アプリは Netlify にデプロイされます。デモサイト https://theoplayer.demo.liveinstantly.cloud/ にアクセスして確認してみてください。

現時点では、THEOplayer Web SDK のデモンストレーションはビデオストリームの例のみを使用していますが、THEOplayer Web SDK のより多くの機能とシナリオをデモンストレーションするために、すぐにさらに多くの例を追加する予定です。

Resources: Nuxt v3 フレームワークでの THEOplayer プレイヤーアプリの実装例

Fri, 28 Oct 2022 09:00:00 +0900

このブログ記事では、シンプルなストリーミングプレーヤーアプリの実装例として、THEOplayer Web SDK と Nuxt3 (Vue3/Viteを利用) フレームワークを統合する方法について説明します。

Nuxt は、JavaScript を実行している任意のプラットフォームにデプロイできる最新のパフォーマンスの高い Web アプリケーションを構築するための MIT ライセンスに基づくオープンソースフレームワークです。

Nuxt はビューエンジンとして Vue.js を使用します。 Vue 3 の機能はすべて Nuxt で利用できます。 Nuxt の詳細については、Nuxt 3 の紹介記事を参照してください。

このプレーヤーの実装例では、Nuxt3 CLI (nuxi) ツールによって提供されるスターターテンプレートを使って用意され、Nuxt3 およびコンポジション API を使用して、プレイヤーを統合します。

このプレーヤーの実装例の Git リポジトリを GitHub で公開しています: https://github.com/liveinstantly/theoplayer-web-vue3-example

詳細は、リポジトリの内容を参照してください。

THEOplayer Web SDK を統合するためのステップバイステップ

前提条件

このガイドでは、次の開発ツールが使用されています。

開発ツール	バージョン
npm	8.19.2
yarn	1.22.5
node	v16.18.0

1. Nuxt3 アプリテンプレートを作成する

次のコマンドを実行して、新規の Nuxt3 アプリケーションテンプレートを作成します。

npx nuxi init theoplayer-web-nuxt3-example

コマンド出力は次のようになります。

yarn install
yarn install v1.22.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
 :
[4/4] Building fresh packages...
success Saved lockfile.
$ nuxt prepare
Nuxi 3.0.0-rc.12
√ Types generated in src/.nuxt
Done in 5.76s.

2. Nuxt3 ソースコード群を `./src` ディレクトリに移動する

これは任意のステップですが、本リポジトリでは src ディレクトリを利用します。

Vue Web アプリケーションでは、プロジェクトのルートディレクトリの下の ./src ディレクトリ内のソースファイル/ディレクトリにソースコード群が配置されることを期待されてますが、Nuxt Web アプリケーションの既定では、ソースファイル/ディレクトリがルートプロジェクトディレクトリの下に、ソースコード群がフラットに配置されることが期待されています。混乱を避けるため、このリポジトリでは、Nuxt Web アプリケーションのソースコードを ./src ディレクトに移動します。

Nuxt3 Web アプリケーションのソースファイル/ディレクトリを移動する場合は、以下の手順に従ってください:

2.1. `src` ディレクトリを作成し、`app.vue` を `./src` に移動する

Nuxt3 アプリのスターターテンプレートを作成したら、次のコマンドを実行します:

mkdir src && mv app.vue ./src/

2.2. `tsconfig.json` を変更する

以下のように ./tsconfig.json を変更します: extend プロパティを ./.nuxt/tsconfig.json から ./src/.nuxt/tsconfig.json に変更します。

{
 // https://v3.nuxtjs.org/concepts/typescript
 "extends": "./src/.nuxt/tsconfig.json",
}

3. 必要なコンポーネントをインストールする

次のコマンドを実行して、Vue フレームワークパッケージの依存関係をインストールします。

yarn install

yarn コマンド出力の esbuild モジュールに関する情報メッセージは無視できます。

4.THEOplayer を統合する

4.1 モジュール宣言の追加 (THEOplayer.d.ts)

次のコマンドを実行して、THEOplayer Web SDK の型定義モジュールを含む theoplayer NPM パッケージをインストールします。

yarn add theoplayer

4.2 THEOplayer Web SDK の `Player.vue` を追加

次のコードを src/components フォルダに Player.vue として追加します。このコードは Vue3 Composition API に基づいており、上位の（親の）コンポーネントから指定された source 配列変数を引数として使って、プレイヤーが動作します。

<script setup lang="ts">
import { ref, onMounted } from "vue";

const theoplayer = ref<HTMLElement | null>(null);
const props = defineProps<{ source: Array<any> }>();

function playerInit() {
 if (theoplayer.value != null) {
 console.log(theoplayer.value)
 const player = new window.THEOplayer.Player(theoplayer.value, {
 fluid: true,
 libraryLocation: "//cdn.theoplayer.com/dash/theoplayer/",
 });
 player.source = {
 sources: props.source,
 };
 }
}

onMounted(() => {
 playerInit();
});
</script>

<template>
 <div
 class="theoplayer-container video-js theoplayer-skin vjs-16-9 theoplayer"
 ref="theoplayer"
 ></div>
</template>

<style scoped>
.theoplayer-container {
 margin: 0 auto;
 padding-top: 28.13%;
 width: 50%;
}
</style>

4.3 `Welcome.vue` と `NuxtLogo.vue` を追加する

次のコードを src/components フォルダーに Welcome.vue および NuxtLogo.vue として追加します:

Welcome.vue:

<script setup lang="ts">
import Player from "./Player.vue";
import { ref } from "vue";
const source = ref([
 {
 type: "application/x-mpegurl",
 src: "//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8",
 },
]);
</script>

<template>
 <div class="container">
 <NuxtLogo />
 <h1>Welcome to Nuxt</h1>
 <Player :source="source" v-if="source" />
 </div>
</template>

<style>
body {
 margin: 0;
}

.container {
 height: 100vh;
 width: 100vw;
 background: rgb(1, 42, 53);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

h1 {
 color: white;
 text-align: center;
 font-family: helvetica, arial, sans-serif;
 font-weight: 400;
}
</style>

NuxtLogo.vue:

<template>
 <svg viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8"><g clip-path="url(#a)"><path fill="currentColor" d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z" fill="#80EEC0"></path><path d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z" fill="#00DC82"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h221v65H0z"></path></clipPath></defs></svg>
</template>

<style>
svg {
 width: 50vw;
}
</style>

4.4 `src/global.d.ts` に THEOplayer の型宣言の読み込みを追加する

次のスクリプトコードを src/global.d.ts として追加します。

// Import types for THEOplayer
import theoplayer from "theoplayer";

declare global {
 interface Window {
 THEOplayer: typeof theoplayer;
 }
}

4.5 `app.vue` に THEOplayer JavaScript/CSS モジュールを追加する

次のセクションを src/app.vue に追加して、THEOplayer CSS と JavaScript をインポートします。

<script setup lang="ts">
useHead({
 meta: [
 {
 name: 'viewport',
 content: 'width=device-width, initial-scale=1'
 }
 ],
 link: [
 {
 rel: 'stylesheet',
 href: 'https://cdn.theoplayer.com/dash/theoplayer/ui.css'
 }
 ],
 script: [
 {
 type: "text/javascript",
 src: "https:/cdn.theoplayer.com/dash/theoplayer/THEOplayer.js",
 body: true,
 },
 ],
});
</script>

4.5 `app.vue` のコンポーネントを変更する

このサンプル Web アプリで THEOplayer をレンダリングするには、src/app.vue で NuxtWelcome コンポーネントを (セクション 4.3 で作成された) Welcome コンポーネントに変更します:

<template>
 <div>
 <Welcome />
 </div>
</template>

5. このサンプルアプリケーションコードを実行し、ブラウザで開きます

次のコマンドを実行して、コードをコンパイルし、ローカルサーバーを実行して、サンプルアプリケーションをホストします。

yarn dev

コマンド出力は次のようになります。

Nuxi 3.0.0-rc.12
Nuxt 3.0.0-rc.12 with Nitro 0.6.0

 > Local: http://localhost:3000/

i Vite client warmed up in 2321ms
√ Nitro built in 734 ms

localhost のホスト名と指定されたポートでアプリケーションを参照して、Vue3 Web アプリケーションの動作を確認できます。

このアプリケーション実装例では、一般に公開されているビルトインライセンス付きの THEOplayer プレーヤー SDK を使用しているため、明示的なライセンスなしで THEOplayer の再生機能を有効にすることができますが、ビルトインライセンスではホワイトリストに登録されたホスト名として localhost での動作のみが許可されます。これは、localhost 以外でこのアプリケーションを実行すると、エラーメッセージ ("The given license is invalid!") が表示されることを意味します。

スクリーンショットは次のとおりです:

ローカルの THEOplayer Web SDK を使用する

独自の THEOplayer Web SDK を使用する場合は、(カスタマイズされた) Web SDK をホストする URL を参照するように変更するか、Web SDK を Nuxt3 ソースツリーの src/public フォルダーに配置する必要があります。

次に、以下のファイルを変更して、THEOplayer SDK (JS/CSS とライブラリ) の場所を適切に指定する必要があります。

また、Player クラスの引数に、THEOplayer のポータルで取得したライセンスを設定する必要があります。

src/app.vue
src/components/Player.vue

例えば、SDK ファイルを src/public/js/theoplayer フォルダーに配置すると、src/app.vue と src/components/Player.vue は次のようになります:

src/app.vue:

<script setup lang="ts">
useHead({
 meta: [
 {
 name: 'viewport',
 content: 'width=device-width, initial-scale=1'
 }
 ],
 link: [
 {
 rel: 'stylesheet',
 href: '/js/theoplayer/ui.css'
 }
 ],
 script: [
 {
 type: "text/javascript",
 src: "/js/theoplayer/THEOplayer.js",
 body: true,
 },
 ],
});
</script>

src/components/Player.vue:

 const player = new window.THEOplayer.Player(theoplayer.value, {
 fluid: true,
 libraryLocation: "/js/theoplayer/",
 license: "ライセンス文字列"
 });

最後に

この記事では、シンプルなプレーヤーアプリの実装例として、THEOplayer Web SDK と Nuxt v3 フレームワークを統合する方法について説明しました。

GitHub のリポジトリでこのサンプルアプリのソースコードを参照してください: https://github.com/liveinstantly/theoplayer-web-nuxt3-example

ご不明な点がございましたら、お気軽にお問い合わせください。

Resources: Vue3 フレームワークでの THEOplayer プレイヤーアプリの実装例

Fri, 28 Oct 2022 09:00:00 +0900

このブログ記事では、シンプルなストリーミングプレーヤーアプリの実装例として、THEOplayer Web SDK と Vue.js v3 フレームワークを統合する方法について説明します。

Vue は、ユーザーインターフェイスを構築するための進歩的な JavaScript フレームワークです。これは、標準の HTML/CSS/JavaScript の上に構築され、宣言型のコンポーネントベースのプログラミングモデルを提供します。Vue エコシステムは、フロントエンド開発に必要な一般的な機能のほとんどをカバーしています。しかし、Web は非常に多様で、私たちが Web 上に構築するものは、形態や規模が大幅に異なる場合があります。 Vue は、こういった様々なシナリオに対して、柔軟で段階的に採用できるように設計されています。ユースケースに応じて、Vue はさまざまな方法で使用できます。このため、近年では人気の開発フレームワークになってきています。

ビルドステップなしで静的 HTML を強化する
任意のページに Web コンポーネントとして埋め込む
シングルページアプリケーション (SPA)
フルスタック / サーバーサイドレンダリング (SSR)
Jamstack / 静的サイト生成 (SSG)
デスクトップ、モバイル、WebGL などの様々なプラットフォームをターゲットとする

このプレーヤーの実装例では、Vue CLI ツールによって提供されるスターターテンプレートを使って用意され、Vue3/Vite およびコンポジション API を使用して、プレイヤーを統合しています。

このプレーヤーの実装例の Git リポジトリを GitHub で公開しています: https://github.com/liveinstantly/theoplayer-web-vue3-example

詳細は、リポジトリの内容を参照してください。

THEOplayer Web SDK を統合するためのステップバイステップ

前提条件

このガイドでは、次の開発ツールが使用されています。

開発ツール	バージョン
npm	8.19.2
yarn	1.22.5
node	v16.18.0

1. Vue3 アプリテンプレートを作成する

次のコマンドを実行して、新規の Vue3 アプリケーションテンプレートを作成します。

yarn create vite theoplayer-web-vue-example --template vue-ts

コマンド出力は次のようになります。

yarn create v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@3.1.0" with binaries:
 - create-vite
 - cva

Scaffolding project in C:\srcs\THEOplayer\theoplayer-web-vue-example...

Done. Now run:

 cd theoplayer-web-vue-example
 yarn
 yarn dev

Done in 14.52s.

2. 必要なコンポーネントをインストールする

次のコマンドを実行して、Vue フレームワークパッケージの依存関係をインストールします。

yarn install

yarn コマンド出力の esbuild モジュールに関する情報メッセージは無視できます。

3.THEOplayer を統合する

3.1 モジュール宣言の追加 (THEOplayer.d.ts)

次のコマンドを実行して、THEOplayer Web SDK の型定義モジュールを含む theoplayer NPM パッケージをインストールします。

yarn add theoplayer

3.2 THEOplayer Web SDK の `Player.vue` を追加

<script setup lang="ts">
import { ref, onMounted } from "vue";

const theoplayer = ref<HTMLElement | null>(null);
const props = defineProps<{ source: Array<any> }>();

function playerInit() {
 if (theoplayer.value != null) {
 const player = new window.THEOplayer.Player(theoplayer.value, {
 fluid: true,
 libraryLocation: "//cdn.theoplayer.com/dash/theoplayer/",
 });
 player.source = {
 sources: props.source,
 };
 }
}

onMounted(() => {
 playerInit();
});
</script>

<template>
 <div
 class="theoplayer-container video-js theoplayer-skin vjs-16-9 theoplayer"
 ref="theoplayer"
 ></div>
</template>

<style scoped>
.theoplayer-container {
 margin: 0 auto;
 padding-top: 56.24%;
 width: 100%;
}
</style>

3.3 `Player.vue` コンポーネントを `App.vue` に追加する

src/App.vue の <script setup> セクション (HelloWorld コンポーネントをインポートする命令行の後) に、次のスクリプトコードを追加します。

import Player from "./components/Player.vue";
import { ref } from "vue";
const source = ref([
 {
 type: "application/x-mpegurl",
 src: "//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8",
 },
]);

最初の <div> ブロックの直後の src/App.vue の <template> セクションに次の行を追加します。

 <Player :source="source" v-if="source" />

3.4 `main.ts` に THEOplayer の型宣言の読み込みを追加する

src/main.ts の createApp 関数呼び出しの行の前に、次のスクリプトコードを追加します。

// Import types for THEOplayer
import theoplayer from "theoplayer";

declare global {
 interface Window {
 THEOplayer: typeof theoplayer;
 }
}

3.5 `index.html` に THEOplayer JavaScript/CSS モジュールを追加する

次の行を index.html の <head> セクション (</head> 行の直前) に追加して、THEOplayer CSS をインポートします。

 <link
 rel="stylesheet"
 type="text/css"
 href="//cdn.theoplayer.com/dash/theoplayer/ui.css"
 />

次の行を index.html の <body> セクション (</body> 行の直前) に追加して、THEOplayer JavaScript コードを読み込みます。

 <script
 type="text/javascript"
 src="//cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"
 ></script>

4. このサンプルアプリケーションコードを実行し、ブラウザで開きます

次のコマンドを実行して、コードをコンパイルし、ローカルサーバーを実行して、サンプルアプリケーションをホストします。

yarn dev

コマンド出力は次のようになります。

yarn run v1.22.5
$ vite

 VITE v3.2.0 ready in 750 ms

 ➜ Local: http://127.0.0.1:5174/
 ➜ Network: use --host to expose

localhost のホスト名と指定されたポートでアプリケーションを参照して、Vue3 Web アプリケーションの動作を確認できます。

127.0.0.1 でブラウザアクセスを行った場合、ホワイトリストに登録された文字列の localhost と一致しないため、THEOplayer SDK のプレイヤーは動作しないことに注意してください。

スクリーンショットは次のとおりです:

ローカルの THEOplayer Web SDK を使用する

独自の THEOplayer Web SDK を使用する場合は、(カスタマイズされた) Web SDK をホストする URL を参照するように変更するか、Web SDK を Vue3 ソースツリーの public フォルダーに配置する必要があります。

次に、以下のファイルを変更して、THEOplayer SDK (JS/CSS とライブラリ) の場所を適切に指定する必要があります。

また、Player クラスの引数に、THEOplayer のポータルで取得したライセンスを設定する必要があります。

index.html
src/components/Player.vue

例えば、SDK ファイルを public/js/theoplayer フォルダーに配置すると、index.html と src/components/Player.vue は次のようになります:

index.html:

 <head>
 :
 <link
 rel="stylesheet"
 type="text/css"
 href="/js/theoplayer/ui.css"
 />
 </head>

index.html:

 <body>
 :
 <script
 type="text/javascript"
 src="/js/theoplayer/THEOplayer.js"
 ></script>
 </body>

src/components/Player.vue:

 const player = new window.THEOplayer.Player(theoplayer.value, {
 fluid: true,
 libraryLocation: "/js/theoplayer/",
 license: "ライセンス文字列"
 });

最後に

この記事では、シンプルなプレーヤーアプリの実装例として、THEOplayer Web SDK と Vue.js v3 フレームワークを統合する方法について説明しました。

GitHub のリポジトリでこのサンプルアプリのソースコードを参照してください: https://github.com/liveinstantly/theoplayer-web-vue3-example

ご不明な点がございましたら、お気軽にお問い合わせください。

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

Mon, 24 Oct 2022 09:00:00 +0900

ビデオストリーミングの歴史

インターネットの普及に伴い、様々なシナリオで色々なビジネスに、デジタルビデオがあたりまえのように利用されていますが、デジタルビデオ技術はこれまでに様々な歴史を紡いできています。

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 技術に関するマーケットで実際の互換性問題の解決や推奨事項のガイドライン化などを行いながら、技術の普及につとめています。

また、Apple の HLS は、開発当初の2009年から IETF (Internet Engineering Task Force) に RFC ドラフトとして HLS 技術を提出し、最終的に、2017年に RFC8216 として発表されました。

クライアントの標準化については、HTML5 に <video> タグ / <audio> タグを導入してプラグインなしでビデオ再生を可能にするだけでなく、セグメント化されたビデオによるアダプティブストリーミング技術をサポートするための Media Source Extension (MSE) という技術が、HTML5 のメディア拡張として、Google/Microsoft/Netflix で開発されました。これにより、MPEG-DASH 方式のビデオ再生が JavaScript で実装されたプレイヤーで実現できるようになりました。

ビデオストリーミング技術の現在

現在では、MPEG-DASH と HLS の2つの技術がアダプティブストリーミング技術として、多くのサービスやアプリケーションで利用されています。

ISO/IEC 23009-1 - MEPG-DASH (Dynamic Adaptive Streaming over HTTP)
IETF RFC 8216 HTTP Live Streaming (HLS)

これらのストリーミング技術の再生には、PC (Windows/macOS) では、HTML5 のメディア拡張機能を使った JavaScript のプレイヤーによりブラウザ上で再生することができますが、モバイルデバイスは、Android, iOS のオペレーティングシステムを中心に開発されており、これらのオペレーティングシステムに標準搭載されている OS API・プラットフォーム等を使ったプレイヤーを開発することで再生することができます。

ブラウザ環境向けの JavaScript ベースのプレイヤーとしては、以下のオープンソースのプレイヤーが市場では多く利用されています。

Apple の OS では AVPlayer と呼ばれるプラットフォームを使って開発されていることが多く、HLS のビデオストリームを再生することができます。

Android の OS では Google が開発しているオープンソースの ExoPlayer のプレイヤープラットフォームが使われていることが多く、HLS と MPEG-DASH の両方のビデオストリームを再生することができます。

当社が取り扱う THEOplayer の商用プレイヤー SDK は、同様にアプローチで上記に示したプレイヤーの基本機能をベースに、様々な追加の高度な機能を加え、開発が容易な SDK となっています。

ストリーミングプラットフォーム

上述の通り、ビデオストリーミング技術は、依然として、2つの方式が市場では利用されており、ビデオストリーミングを行うプラットフォームでは一般的に両方の技術方式をサポートする必要がありますが、1つのコンテンツのストリーム入力に対して、リアルタイムで動的に 2つの方式の生成し出力する機能が、いくつかのストリーミングプラットフォームに備わっています。

この動的なストリーム生成は、「動的パッケージング (Just-in-Time Packaging)」と一般的に呼ばれていますが、ライブストリーム、および、オンデマンドストリームの両方に適用できるため、シンプルなワークフローのストリーミングアーキテクチャを構築することができます。

当社が取り扱う Wowza Media Systems 社の製品も上記に示したストリーミングプラットフォームのひとつで、様々な入力方式のコンテンツをサポートし、MPEG-DASH および HLS のストリームの動的パッケージングを行い、入力されたコンテンツのストリーミング配信をすることができます。

最後に

この記事では、ストリーミング技術の歴史と取り巻く技術を簡単にご紹介しました。

デジタルビデオ・オーディオ、および、ストリーミングの技術は年々進化しており、それらの技術やそれを支える製品・ソリューションのキャッチアップが、ビデオストリーミングを使ったシステムやサービスの構築にあたっては重要になっています。当社は、それらの技術の仕組みや背景を正しくキャッチアップしながら、グローバルのメディア企業と連携し、顧客のプロジェクトやサービスをサポートします。

Resources: Wowza Streaming Engine での HLS ストリーミング

Thu, 10 Dec 2020 09:00:00 +0000

はじめに

この記事では、Wowza Streaming Engine での HLS 方式でのストリーミングに関する技術的に詳細な設定・カスタマイズの方法について触れます。

HLS プレイリスト (マニフェスト) について

HLS プレイリストには、EXT-X-VERSION タグと呼ばれる Apple HLS (HTTP Live Streaming) のプレイリスト互換性バージョンを示すタグが含まれています。

Wowza Streaming Engine の HTTPStreamer の既定の設定では、Apple HLS 互換性バージョン 3 のプレイリストを生成します。

#EXT-X-VERSION:3

VOD またはライブアプリケーションの Application.xml (/usr/local/WowzaStreamingEngine/conf/[アプリ名]/Application.xml) 内の以下のパラメーターで HLS プレイリストの互換性バージョンを制御することができます。

Wowza Streaming Engine では、バージョン 3 から 6 までをサポートしています。

項目	内容
XML パス	/Root/Application/HTTPStreamer
プロパティ名 (Name)	cupertinoExtXVersion
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	プレイリストの互換性バージョンを指定する (既定値: 3)

Wowza Streaming Engine では、指定された EXT-X-VERSION (プレイリストの互換性バージョン) に基づいてプレイリスト機能を有効または無効にすることができます。

次の機能は EXT-X-VERSION の値によって制御されます。

浮動小数点形式によるセグメント長
- EXT-X-VERSION が 3 以上の場合、整数形式ではなく浮動小数点形式を使用してセグメント長を表します
コーデック形式
- EXT-X-VERSION が 4 以上の場合、iOS 4.0 以降のコーデック形式 (例: avc1.42c015) を使用して、playlist.m3u8 レスポンスのコーデック値を表します
- EXT-X-VERSION が 4 未満の場合、iOS 4.0 以前のコーデック形式 (例: avc1.66.21) を使用します
- cupertinoCodecStringFormatId (パス名:/Root/Application/HTTPStreamer) プロパティの値によってコーデック形式の制御することも可能です
  - Integer 型で、値が 2 の場合、iOS 4.0 以降のコーデック形式を使用します
  - Integer 型で、値が 1 の場合、iOS 4.0 以前のコーデック形式を使用します

HLS セグメントの長さについて

Wowza Streaming Engine では、HLS ストリーミングを行うためにビデオファイルをセグメントに分割してプレイヤーに提供します。

分割するセグメントの長さは、既定では 10 秒 (10000 ミリ秒) となっていますが、以下のアプリケーションプロパティを変更することでセグメントの長さをカスタマイズすることができます。

注意

HLS アダプティブストリーミングが正しく動作するには、ビデオセグメントの始まりは必ずキーフレーム (I-フレーム) で開始する必要があり、ビデオセグメントの境界はキーフレームの間隔と整合性がとれている必要があります。例えば、10秒のビデオセグメントの場合、2秒、2.5秒、5秒、10秒などのキーフレーム間隔でエンコードされたビデオを入力する必要があります。これにより、再生中に異なるビットレートや解像度のビデオストリーム間で再生の切り替えを正しく行うことができます。

このため、Wowza Streaming Engine に入力するビデオ (VOD ファイルやライブストリーム) は、指定するセグメントの長さに気を付けて入力する必要があります。

VOD ストリーミングのセグメントの長さの設定パラメーター

VOD アプリケーションの Application.xml (/usr/local/WowzaStreamingEngine/conf/[アプリ名]/Application.xml) の以下の項目を設定することで、HLS VOD ストリーミングのセグメントの長さを変更することができます。

項目	内容
XML パス	/Root/Application/HTTPStreamer
プロパティ名 (Name)	cupertinoChunkDurationTarget
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	セグメントの長さ (ミリ秒) を指定する (既定値: 10000)

ライブストリーミングのセグメントの長さの設定パラメーター

ライブ入力デバイス等からのオーディオ・ビデオパケットは、 Wowza Streaming Engine で時刻に基づいてセグメントに分割されます。各セグメントの長さは、cupertinoChunkDurationTarget プロパティによって制御されます。セグメントは、作成時にアクセス可能なセグメントリストに追加されます。リストに格納される項目の最大数は、cupertinoMaxChunkCount プロパティによって制御されます。 MPEG-DASH クライアント (プレイヤー) がストリームを要求すると、Wowza Streaming Engine は最近追加された n 個のセグメントを含むマニフェストを提供します。マニフェストで返されるアイテムの数 (n) は、cupertinoPlaylistChunkCount プロパティによって制御されます。

また、ライブストリームリピーターシステムは、オリジン/エッジの構成で単一のライブストリームを複数のエッジサーバーに配信するために使用されます。エッジサーバーは、ライブストリームを最初に要求するときに、オリジンへセグメント化されたライブストリームのリクエストを行って、クライアントに配信します。 cupertinoRepeaterChunkCount プロパティは、最初の接続後すぐにオリジンからエッジに送信されるセグメントの数を制御します。 cupertinoRepeaterChunkCount は cupertinoPlaylistChunkCount 以上で cupertinoMaxChunkCount 未満であることが最適です。この設定パラメーターは、Live Edge タイプのアプリケーションでリピーター構成となっている場合に利用します。

ライブアプリケーションの Application.xml (/usr/local/WowzaStreamingEngine/conf/[アプリ名]/Application.xml) の以下の項目を設定することで、HLS ライブストリーミングのセグメントの長さを変更することができます。

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	cupertinoChunkDurationTarget
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	セグメントの長さ (ミリ秒) を指定する (既定値: 10000)

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	cupertinoMaxChunkCount
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	WSE 内部で格納する有効なライブストリームのセグメント数を指定する (既定値: 10)

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	cupertinoPlaylistChunkCount
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	プレイリストで提供するライブストリームのセグメント数を指定する (既定値: 5)

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	cupertinoRepeaterChunkCount
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	エッジからオリジンへの最初の接続後、オリジンからエッジにすぐに送信されるセグメント数を指定する (既定値: 5)

HLS Audio-only ストリームの設定

過去の Apple デバイス向けの Apple HLS オーサリングガイドラインでは、 3G ネットワークなどの低帯域ネットワークに向けたアクセスのために、 HLS ストリーミングコンテンツに Audio-only (音声のみ) のストリームを用意することがガイドラインとして設けられていました。

例えば、取得したプレイリスト (例: https://[アドレス]/[アプリ名]/mp4:sample.mp4/playlist.m3u8 ) は以下のような内容となります。

_ao.m3u8 のサフィックスが付いたプレイリスト (以下の例では chunklist_[WowzaセッションID]_ao.m3u8) が、 Audio-only ストリームのプレイリストです。

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-STREAM-INF:BANDWIDTH=868638,CODECS="avc1.42c015,mp4a.40.2",RESOLUTION=512x288
chunklist_w298755728.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=116046,CODECS="mp4a.40.2"
chunklist_w298755728_ao.m3u8

現在のガイドラインには、該当する記載はなくなっているようです。

HTTP Live Streaming (HLS) Authoring Specification for Apple Devices

この Audio-only のストリームが追加されるように HLS プレイリストの変更を行うには、以下のプロパティの設定を行います。

VOD HLS Audio-only ストリームの設定

VOD アプリケーションの Application.xml (/usr/local/WowzaStreamingEngine/conf/[アプリ名]/Application.xml) の以下の項目を設定することで、HLS VOD ストリーミングのプレイリストに Audio-only ストリームを追加します。

項目	内容
XML パス	/Root/Application/HTTPStreamer
プロパティ名 (Name)	cupertinoAutoCreateMultibitratePlaylist
プロパティのタイプ (Type)	Boolean
プロパティの値 (Value) の説明	true に設定する (既定値: false)

ライブ HLS Audio-only ストリームの設定

ライブアプリケーションの Application.xml (/usr/local/WowzaStreamingEngine/conf/[アプリ名]/Application.xml) の以下の項目を設定することで、HLS ライブストリーミングのプレイリストに Audio-only ストリームを追加します。

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	cupertinoCreateAudioOnlyRendition
プロパティのタイプ (Type)	Boolean
プロパティの値 (Value) の説明	true に設定する (既定値: false)

項目	内容
XML パス	/Root/Application/HTTPStreamer
プロパティ名 (Name)	cupertinoAutoCreateMultibitratePlaylist
プロパティのタイプ (Type)	Boolean
プロパティの値 (Value) の説明	true に設定する (既定値: false)

HLS KeyFrames-only プレイリストの設定

Apple のネイティブ HLS プレイヤーでは、VOD コンテンツのトリックプレイ再生をサポートしています。トリックプレイ再生とは、プレーヤーでコンテンツの巻き戻しや早送りをしてコンテンツのタイムラインを探すときに、ビューア―に視覚的な手がかりとなるビデオのサムネイルを提供するものです。

トリックプレイ再生をサポートするために特別な目的のコンテンツを別に作成する必要はなく、ビデオストリームのキーフレーム¹ の場所をプレイヤーに提供するだけです。ビデオストリームのキーフレームの場所を指定するために、Apple iOS 5 以降では KeyFrames-only プレイリスト (Iフレームのみのプレイリスト) を使用します。

この設定はラVODアプリケーションにのみ有効な設定です

Wowza Streaming Engine では、KeyFrames-only プレイリストを動的に生成し、ビデオストリームのキーフレームをストリーミングすることができます。 KeyFrames-only プレイリストは、playlist.m3u8 プレイリストの中で EXT-X-I-FRAME-STREAM-INF タグを使って URL を指定します。 KeyFrames-only プレイリストは EXT-X-I-FRAMES-ONLY タグを使用してキーフレームのみを提供するプレイリストです。 KeyFrames-only プレイリストでは、EXTINF タグはセグメントの長さのかわりにキーフレームの間隔を参照します。

この I-Frames-only のプレイリストが追加されるように HLS プレイリストの変更を行うには、以下のプロパティの設定を行います。

VOD アプリケーションの Application.xml (/usr/local/WowzaStreamingEngine/conf/[アプリ名]/Application.xml) の以下の項目を設定することで、HLS VOD ストリーミングのプレイリストに I-Frames-only プレイリストを追加します。

項目	内容
XML パス	/Root/Application/HTTPStreamer
プロパティ名 (Name)	cupertinoExtXVersion
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	4 以上の値に設定する (既定値: 3)

項目	内容
XML パス	/Root/Application/HTTPStreamer
プロパティ名 (Name)	cupertinoCreateKeyFrameOnlyPlaylist
プロパティのタイプ (Type)	Boolean
プロパティの値 (Value) の説明	true に設定する (既定値: false)

プレイリストのサンプルは以下の通りです。

playlist.m3u8

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-STREAM-INF:BANDWIDTH=868638,CODECS="avc1.42c015,mp4a.40.2",RESOLUTION=512x288
chunklist_w1520434929.m3u8
#EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=875,CODECS="avc1.42c015",URI="chunklist_w1520434929_ko.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=116046,CODECS="mp4a.40.2"
chunklist_w1520434929_ao.m3u8

KeyFrames-only プレイリスト

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:2
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-I-FRAMES-ONLY
#EXTINF:2.0,
#EXT-X-BYTERANGE:999624@376
media_w1520434929_ko_0.ts
#EXTINF:2.0,
#EXT-X-BYTERANGE:999624@376
media_w1520434929_ko_1.ts
#EXTINF:2.0,
#EXT-X-BYTERANGE:999624@376
media_w1520434929_ko_2.ts
#EXTINF:2.0,
#EXT-X-BYTERANGE:999624@376
media_w1520434929_ko_3.ts
 :

HLS Audioストリームの TS パッケージングの設定

Wowza Streaming Engine の既定の設定では、HLS Audio ストリームは、MPEG-2 エレメンタリストリームでパッケージングされます。

以下のプロパティの設定を行うことで、HLS Audio ストリームをビデオストリームと同様に HLS Audio ストリームを　MPEG-2 トランスポートストリーム (TS) でパッケージングを行います。

VOD HLS Audio ストリームの TS パッケージングの設定

項目	内容
XML パス	/Root/Application/HTTPStreamer
プロパティ名 (Name)	cupertinoPacketizeAllStreamsAsTS
プロパティのタイプ (Type)	Boolean
プロパティの値 (Value) の説明	true に設定する (既定値: false)

ライブ HLS Audio ストリームの TS パッケージングの設定

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	cupertinoPacketizeAllStreamsAsTS
プロパティのタイプ (Type)	Boolean
プロパティの値 (Value) の説明	true に設定する (既定値: false)

タイムコードに基づいたライブストリームのセグメントの番号付けの設定

Wowza Streaming Engine では、エンコーダーから受信したライブストリームにタイムコードが含まれている場合に、タイムコードに基づいたセグメント (チャンク) の番号付けを行うことができます。

この設定はライブアプリケーションにのみ有効な設定です

この機能を有効にするには、ライブアプリケーションの Application.xml (/usr/local/WowzaStreamingEngine/conf/[アプリ名]/Application.xml) の以下のプロパティを設定します。

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	cupertinoCalculateChunkIDBasedOnTimecode
プロパティのタイプ (Type)	Boolean
プロパティの値 (Value) の説明	true に設定する (既定値: false)

この機能を有効にすると、セグメントの ID はタイムコードを cupertinoChunkDurationTarget 値で割った (割り算の) 商に等しくなります。

注意: cupertinoCalculateChunkIDBasedOnTimecode プロパティは、時刻同期されたタイムコードを Wowza Streaming Engine に送信するエンコーダーを使う場合のみ有効にしてください。時刻同期されたタイムコードは、UTC またはその他の時刻をベースに同期するようにします。

もし、時刻同期されたタイムコードを送信しないエンコーダーのライブソースストリームと cupertinoCalculateChunkIDBasedOnTimecode が使用されている場合、ソースストリームが再起動するとセグメント ID は 0 で再起動するか、場合によってはランダムな値で再起動します。 HTTP オリジンを使ってプライマリサーバーとバックアップサーバーの2つのソースから取り込まれたライブストリームを取り扱う場合、セグメント ID の整合性がとれなくなってしまうため、特に問題になります。

キーフレームは、I フレーム、または、イントラコード化されたフレームと呼ばれることもあり、ビデオフレームのエンコード時に他のフレームから独立してエンコードされたビデオフレームです。 ↩︎

Resources: Wowza Streaming Engine での MPEG-DASH ストリーミング

Mon, 30 Nov 2020 09:00:00 +0000

はじめに

この記事では、Wowza Streaming Engine での MPEG-DASH 方式でのストリーミングに関する技術的に詳細な設定・カスタマイズの方法について触れます。

MPEG-DASH MPD マニフェストについて

MPEG-DASH サーバーは、メディアプレゼンテーション記述 (MPD) マニフェストファイルで、利用可能なメディアセグメント URL のリストをプレーヤーに提供します。その後、プレイヤーは、中断のない再生を行うために、必要に応じてメディアセグメントを順次要求します。

MPD ファイル内でこのセグメント URL のリストの識別方法を定義する方式をセグメントアドレス方式とは呼び、以下のセグメントアドレス方式があります。

セグメントリスト方式
- 利用可能なすべてのセグメントについて、セグメント URL の完全なリストを提供する方式です
セグメントテンプレート (時刻ベース) 方式
- プレイヤーがセグメント URL リストを作成できるようにするための URL テンプレートを提供する方式です
- セグメント URL にはセグメントごとの開始時刻が含まれます
セグメントテンプレート (セグメント番号ベース) 方式
- プレイヤーがセグメント URL リストを作成できるようにするための URL テンプレートを提供する方式です
- セグメント URL にはセグメントごとのセグメントの番号 (インデックス番号など) が含まます
セグメントベース (BaseURL) 方式
- すべてのセグメントが単一の URL (BaseURL) で識別されるセグメント分割を行わない方式で、セグメントがバイトレンジの HTTP リクエストを通じて取得する方式です

Wowza Streaming Engine の MPEG-DASH サポートでは、セグメントベース方式以外のセグメントアドレス方式の MPD 形式をサポートしていて、プレイヤーは以下の URL フォーマット指定で必要なマニフェスト形式を指定できます。

http://[アドレスまたはホスト名]:[ポート]/[アプリケーション名]/[アプリインスタンス]/[ストリーム名]/manifest**_mv[セグメントアドレス方式]**.mpd

**[セグメントアドレス方式]**には、以下のいずれかを指定します。

mvtime: セグメントテンプレート (時間ベース) 方式
mvlist: セグメントリスト方式
mvnumber: セグメントテンプレート (セグメント番号ベース) 方式

_mv[セグメント形式] の指定がない場合は、mvtime が既定値となります。

MPEG-DASH セグメントの長さについて

Wowza Streaming Engine では、MPEG-DASH ストリーミングを行うためにビデオファイルをセグメントに分割してプレイヤーに提供します。

注意

MPEG-DASH アダプティブストリーミングが正しく動作するには、ビデオセグメントの始まりは必ずキーフレーム (I-フレーム) で開始する必要があり、ビデオセグメントの境界はキーフレームの間隔と整合性がとれている必要があります。例えば、10秒のビデオセグメントの場合、2秒、2.5秒、5秒、10秒などのキーフレーム間隔でエンコードされたビデオを入力する必要があります。これにより、再生中に異なるビットレートや解像度のビデオストリーム間で再生の切り替えを正しく行うことができます。

このため、Wowza Streaming Engine に入力するビデオ (VOD ファイルやライブストリーム) は、指定するセグメントの長さに気を付けて入力する必要があります。

VOD ストリーミングのセグメントの長さの設定パラメーター

VOD アプリケーションの Application.xml (/usr/local/WowzaStreamingEngine/conf/[アプリ名]/Application.xml) の以下の項目を設定することで、MPEG-DASH VOD ストリーミングのセグメントの長さを変更することができます。

項目	内容
XML パス	/Root/Application/HTTPStreamer
プロパティ名 (Name)	mpegdashSegmentDurationTarget (バージョン 4.7.8 以降)
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	セグメントの長さ (ミリ秒) を指定する (既定値: 10000)

ライブストリーミングのセグメントの長さの設定パラメーター

ライブ入力デバイス等からのオーディオ・ビデオパケットは、 Wowza Streaming Engine で時刻に基づいてセグメントに分割されます。各セグメントの長さは、mpegdashSegmentDurationTarget プロパティによって制御されます。セグメントは、作成時にアクセス可能なセグメントリストに追加されます。リストに格納される項目の最大数は、mpegdashMaxSegmentCount プロパティによって制御されます。 MPEG-DASH クライアント (プレイヤー) がストリームを要求すると、Wowza Streaming Engine は最近追加された n 個のセグメントを含むマニフェストを提供します。マニフェストで返されるアイテムの数 (n) は、mpegdashPlaylistSegmentCount プロパティによって制御されます。

また、ライブストリームリピーターシステムは、オリジン/エッジの構成で単一のライブストリームを複数のエッジサーバーに配信するために使用されます。エッジサーバーは、ライブストリームを最初に要求するときに、オリジンへセグメント化されたライブストリームのリクエストを行って、クライアントに配信します。 mpegdashRepeaterSegmentCount プロパティは、最初の接続後すぐにオリジンからエッジに送信されるセグメントの数を制御します。 mpegdashRepeaterSegmentCount は mpegdashPlaylistSegmentCount 以上で mpegdashMaxSegmentCount 未満であることが最適です。この設定パラメーターは、Live Edge タイプのアプリケーションでリピーター構成となっている場合に利用します。

ライブアプリケーションの Application.xml (/usr/local/WowzaStreamingEngine/conf/[アプリ名]/Application.xml) の以下の項目を設定することで、MPEG-DASH ライブストリーミングのセグメントの長さを変更することができます。

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	mpegdashSegmentDurationTarget (バージョン 4.7.8 以降)
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	セグメントの長さ (ミリ秒) を指定する (既定値: 10000)

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	mpegdashMaxChunkCount (バージョン 4.7.8 以降)
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	WSE 内部で格納する有効なライブストリームのセグメント数を指定する (既定値: 10)

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	mpegdashPlaylistChunkCount (バージョン 4.7.8 以降)
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	プレイリストで提供するライブストリームのセグメント数を指定する (既定値: 5)

項目	内容
XML パス	/Root/Application/LiveStreamPacketizer
プロパティ名 (Name)	mpegdashRepeaterSegmentCount (バージョン 4.7.8 以降)
プロパティのタイプ (Type)	Integer
プロパティの値 (Value) の説明	エッジからオリジンへの最初の接続後、オリジンからエッジにすぐに送信されるセグメント数を指定する (既定値: 5)

MPD リダイレクト

サーバーの使用状況の分析や監視を行うための統計情報を提供するために、 Wowza Streaming Engine はそれぞれのストリーミング再生セッションについて HTTP セッションコンテキストを保存します。

通常の HTTP ストリーミング技術では、プレーヤーがマニフェストを要求したときにセッションが作成されるようになっていて、サーバーはプレイヤーが同じ再生セッションで同じマニフェストに対して追加のリクエストを行うことを期待していません。もし同じマニフェストに対してリクエストがあると新しいセッションが作成されますが、これは別の再生セッションとなります。

しかし、MPEG-DASH ライブストリーミングの場合は、プレーヤーが (MPEG-DASH の設計上の理由により) 定期的にDASH MPD マニフェストを再リクエストして、新しいセグメントの発行や古いセグメントの有効期限を識別する必要があります。すると、プレーヤーが DASH MPD マニフェストを再リクエストするたびに新しい HTTP セッションが誤って作成されてしまいます。

Wowza Streaming Engine では、MPD.Location リダイレクト機能 (MPD マニフェスト内部のリダイレクトのメカニズム) か HTTP リダイレクト機能を使用することによりこの問題に対処することができます。

MPD.Location リダイレクト機能

MPD.Location リダイレクト機能は、HTTP リダイレクトと同様の機能を提供する MPEG-DASH MPD マニフェストの MPD.Location 要素のサポートにより、以下のように実現されています。

MPD.Location 要素は、オリジナルの MPD URL のファイル名に Wowza セッション ID を埋め込んだ更新された MPD URL を提供します
プレーヤーは、そのセッション中の以降のすべての MPD リクエストに対して、更新された MPD URL を使用するようになります
MPD.Location 要素は、最初の MPD だけでなく、以降のすべての MPD の中で提供されます
新しいセッションは、リクエストされた MPD URL に Wowza セッション ID が含まれない MPD URL へのリクエストに対してのみ作成されます
- それ以外の場合、サーバーはリクエストに含まれる Wowza セッション ID を使用し、同じ HTTP セッション内で続行します

例えば、元の MPD URL が以下の場合は、

http://[アドレス]:1935/[アプリケーション名]/mp4:sample.mp4/manifest_mpm4sav_mvlist.mpd

新しい URL は次のようになります。

http://[アドレス]:1935/[アプリケーション名]/mp4:sample.mp4/manifest_mpm4sav_mvlist_w1499067310.mpd

w1499067310 は埋め込まれた Wowza セッション ID となります。

MPD HTTP リダイレクト機能

MPEG-DASH MPD HTTP リダイレクト機能を使用すると、Wowza Streaming Engine はプレーヤーからの最初の DASH MPD リクエストに HTTP リダイレクトステータスコード (302, 307 等) で応答するように構成されます。

HTTP リダイレクトのレスポンスに含まれる Location ヘッダーは、MPD URL のファイル名に Wowza セッションID が埋め込まれた、更新された MPD URL を提供します
プレーヤーは、そのセッション中の以降のすべての MPD リクエストに新しい URL を使用するようになります
正しいサーバーが HTTP セッションを作成/管理 (その後、必要に応じてサーバーが MPD URL リダイレクトを実行) するよう、サーバー側の API 呼び出し (httpSession.redirectSession()) を介して実装されたリダイレクト機能は、MPEG-DASH ストリーミングのセッションに関連するリダイレクトの前に実行されます
このリダイレクトの仕組みが期待する効果を発揮するためには、リダイレクト後の MPD URL がプレーヤーで保存されて、その再生セッション中の以降のすべての MPD リクエストにその URL が使用される必要があります

Wowza セッションID の情報を持たない元の MPD URL をセッションで再度使用してはいけません
新しいセッションは、リクエストさえれた MPD URL に Wowza セッション ID の情報が含まれない MPD URL に対してのみ作成され、それ以外の場合、サーバーは提供されたセッション ID を使用して、同じ HTTP セッション内で続行します
既定では、HTTP リダイレクトは 307 (一時リダイレクト) ステータスコードを使用します
- HTTP 1.0 リクエストの場合、サーバーは 302 リダイレクトステータスコードで上書きします
- mpegdashHttpRedirectDisableStatusCode302Override, mpegdashHttpRedirectDefaultStatusCode プロパティを使って、既定の動作を変更できます

DASH MPD HTTP リダイレクト機能を有効にするには、mpegdashHttpRedirectEnabled プロパティを使って構成します。

以下、HTTPリダイレクト機能のパラメーターに関する情報です。

プロパティ名 (Name)	プロパティのタイプ (Type)	プロパティの値 (Value) の説明
mpegdashHttpRedirectEnabled	Boolean	true に設定すると MPEG-DASH MPD ファイルの HTTP リダイレクトが有効になります: 既定値は false です
mpegdashHttpRedirectDefaultStatusCode	Integer	MPEG-DASH MPD ファイルの HTTP リダイレクト応答で使用されるデフォルトのリダイレクトステータスコードを指定します: 既定値は 307 (一時的なリダイレクト) です
mpegdashHttpRedirectDisableStatusCode302Override	Boolean	“HTTP 1.0” プロトコルの DASH MPD の HTTP 要求は、通常、上記のリダイレクトステータスコードではなく、302 リダイレクトステータスコードで応答します。このプロパティを true に設定すると、そのオーバーライドを無効にして、通常のステータスコードを使用することができます: 既定値は false です

その他の設定パラーメーターについて

以下のパラメーターが Wowza Streaming Engine でのMPEG-DASH ストリーミングのカスタマイズのために用意されています。

XML パスが `/Root/Application/HTTPStreamer` のパラメーター

プロパティ名 (Name)	プロパティのタイプ (Type)	プロパティの値 (Value) の説明
mpegdashAdjustCTTSForFirstKeyFrameToZero (バージョン 4.5.0 以降)	Boolean	true に設定すると、VODファイル内のすべてのエンコードされたフレームの CompositionTimeToSample (CTTS) を調整して、MPEG-DASH プレーヤーでの再生を有効にします。このプロパティが設定されていない場合、または、設定されていても値が false に設定されている場合、ビデオの最初のフレームに CTTS 値があると、Wowza Streaming Engine は次のメッセージを `[install-dir]/logs/wowzastreamingengine_access.log` ファイルに記録します : `MediaReaderH264MPEGDash.indexFile[vod/definst/earnings_release_1q16.mp4]: First frame of video has a non-zero CTTS value [200], playback may not work on all browsers, try setting HTTPStreamer/Properties boolean property mpegdashAdjustCTTSForFirstKeyFrameToZero to true`
mpegdashEnableUTCTimingElements	Boolean	false に設定すると、ライブストリーミングの MPEG-DASH MPD マニフェストファイルの UTCTiming 要素を削除します: 既定値は true です (MPD マニフェストファイルに UTCTiming 要素が含まれます)
mpegdashUTCTimingSchemeOrder (バージョン 4.7.0 以降)	String	UTCTiming スキームを順序付けで有効にするための、優先順位が付けられたコンマ区切りのリストを指定します (リストの最初のものが最も優先されます)。有効な値は、`direct`, `http-head`、`http-xsdate`、`http-iso`、`http-ntp`、`ntp`、`sntp` です。既定値は `direct` です (ほとんどの場合この値で問題ありません)。注意: `direct` または `http-head` 以外の値を指定する場合、対応する mpegdashUTCTiming`[スキーム名]` プロパティを構成する必要があります。例えば、`http-xsdate` を指定する場合は、`mpegdashUTCTimingHttpXsDateList` プロパティを構成する必要があります。
mpegdashUTCTimingHttpHeadList (バージョン 4.7.0 以降)	String	HTTP ヘッダー内の日付情報を取得するために HTTP HEAD 要求を行うことができる HTTP URL の優先順のコンマ区切りリストを指定します (リストの最初のものが最も優先されます)。任意の有効な HTTP/HTTPS サーバー URL を指定します: 既定値はローカルの Wowza Streaming Engine サーバー (`${com.wowza.wms.context.ApplicationInstance.MPEGDash.domain}/dashtime.txt`) を指す URLです
mpegdashUTCTimingHttpXsDateList (バージョン 4.7.0 以降)	String	適切な時間を取得するためにリクエストを送信できる HTTP URL の優先順のコンマ区切りリストを指定します。時刻は `xs:dateTime` 形式で返されます。任意の有効な HTTP/HTTPS サーバー URL を指定します。例えば、http://myPublicServer.com/xsdate、https://mySecureServer.com/xsdate です: 既定値は `null` です
mpegdashUTCTimingHttpISOList (バージョン 4.7.0 以降)	String	適切な時間を取得するためにリクエストを送信できる HTTP URL の優先順のコンマ区切りリストを指定します。時刻は ISO タイムコード形式で返されます。任意の有効な HTTP/HTTPS サーバー URL を指定します。例えば、http://myPublicServer.com/xsdate、https://mySecureServer.com/xsdate です: 既定値は `null` です
mpegdashUTCTimingHttpNTPList (バージョン 4.7.0 以降)	String	適切な時間を取得するためにリクエストを送信できる HTTP URL の優先順のコンマ区切りリストを指定します。時刻は NTP タイムスタンプ形式で返されます。任意の有効な HTTP/HTTPS サーバー URL を指定します。例えば、http://myPublicServer.com/ntptime、https://mySecureServer.com/ntptime です: 既定値は `null` です
mpegdashUTCTimingNTPList (バージョン 4.7.0 以降)	String	適切な時刻を取得するために NTP プロトコル (IETF RFC 5905 で定義) が利用可能な優先順位が付けられたコンマ区切りのサーバーのリストを指定します。有効な NTP サーバー名または IP アドレスを指定します。例えば、time-a.nist.gov、time-b.nist.gov、129.6.15.29 です: 既定値は `null` です
mpegdashUTCTimingSNTPList (バージョン 4.7.0 以降)	String	適切な時刻を取得するために SNTP プロトコル (IETF RFC 5905 で定義) が利用可能な優先順位が付けられたコンマ区切りのサーバーのリストを指定します。有効な SNTP サーバー名または IP アドレスを指定します。例えば、time-a.nist.gov、time-b.nist.gov、129.6.15.29 です: 既定値は `null` です

XML パスが `/Root/Application` のパラメーター

プロパティ名 (Name)	プロパティのタイプ (Type)	プロパティの値 (Value) の説明
mpegdashMinBufferTime (バージョン 4.5.0 以降)	Integer	MPEG-DASH MPD の minBufferTime 属性を変更します: 既定値は 6000 (ライブストリームの場合) または 1500 (VODストリームの場合) です
mpegdashAddMPDSegmentBaseURL (バージョン 4.6.0 以降)	Boolean	`<BaseURL>` タグを MPD に含めるかどうかを制御します。 `<BaseURL>` の挿入を有効にするには値を true に設定します: 既定値 false です

Resources: Wowza Streaming Engine を使ったライブストリーミング (3)

Fri, 20 Nov 2020 09:00:00 +0000

はじめに

前回の記事では FFmpeg で生成したマルチビットレートの RTMP ライブストリーム (マルチストリーム) をアップロードして、 Wowza Streaming Engine 経由でストリーミング配信を行うための設定を紹介しました。

この記事では、RTMP のシングルビットレートのライブソースを Wowza Streaming Engine に入力し、 Wowza Streaming Engine のトランスコーディング機能を使ってマルチビットレートのライブストリームを生成して、アダプティブストリーミングのライブストリーミング配信を行うための方法を紹介します。

ライブソースのオリジンからマルチビットレートのストリームを Wowza Streaming Engine へ入力する際に十分なネットワーク帯域が確保できない場合、一番画質のよいライブソースのみを Wowza Streaming Engine へ入力し、Wowza Streaming Engine でマルチビットレートの生成を行って、アダプティブストリーミングのライブストリーミング配信を実現することができます。

作業の手順は、以下の通りです。

ライブソースストリームの入力セキュリティの設定 (省略)
FFmpeg によるビデオファイルを使った RTMP ライブソースの入力 (省略)
ライブトランスコーダーの設定
ライブストリーミング再生のテスト

Big Buck Bunny サイトのビデオコンテンツをサンプルとして使うストリーミングコンテンツとします。

配信で利用するビデオファイルはこちらを利用しました。

手順1: ライブソースの入力セキュリティの設定 (省略)

前回の記事で作成した設定を利用するため、ここでは省略します。

手順の詳細は、前回の記事を参照します。

手順2: ライブトランスコーダーの設定

Wowza Streaming Engine のライブトランスコーダーを設定すると、入力したライブソースのトランスコードを行うことができます。

ライブトランスコーダーを設定するには、以下の手順で行います。

ここでは既存のトランスコーダーテンプレートを利用します。

Wowza Streaming Engine Manager 管理 UI にログインし、上部メニューバーの [Application] をクリックします。
左のメニューから [live] アプリケーションをクリックし、[Transcoder] をクリックします。
[Edit] ボタンを押します。

以下のパラメーター情報を入力して、[Save] ボタンをクリックします。

パラメーター	値
Template Directory	既定のテンプレートを利用するため、既定値のままとします
Transcoder Options	チェックボックスを有効にしたままにします (Match source stream name to template name)
Fallback Template	“Transrate (Default)” (既定値) を選択します

トランスコーダーの “Status” が “Not Enabled” の場合、[Enable Transcoder] をクリックします。
画面上部の情報バーの [Restart Now] ボタンをクリックします。
アプリケーションの再起動が完了したら、準備完了です。

また、[Transcoder] 画面では、トランスコーダーのテンプレートをクリックすると、トランスコーダーで生成するストリームの詳細を表示することができます。

トランスコーダーの生成するストリームごとに有効・無効の設定が異なる場合がありますが、トランスコーダーのテンプレートの詳細画面から、プリセット名 (Preset) をクリックすると、そのストリームを有効・無効を変更することができます。

ここでは、以下の通り、160p, 360p, source を有効にします (既定値のとおり)。

注意: トランスコーダーを動作させる際には、Wowza Streaming Engine が動作している環境の CPU スペックがトランスコード処理の合計に対して十分なキャパシティがあるかを確認してください。

手順3: FFmpeg によるビデオファイルを使ったライブソースの入力

前回の記事と同様に以下の FFmpeg コマンドで、ビデオファイルから生成したライブソースを Wowza Streaming Engine に入力します。

ffmpeg -threads 4 -re -stream_loop -1 \
 -i ~/videos/bbb_sunflower_1080p_30fps_normal.mp4 \
 -rtmp_live live -pix_fmt yuv420p -r 30 \
 -map 0✌️0 -c:v libx264 -preset veryfast -tune animation \
 -b:v 1500k -profile:v high -s:v 1280x720 -minrate:v 1500k -maxrate:v 1500k -bufsize:v 3000k \
 -flags:v +cgop -g 60 -x264opts keyint=60:keyint_min=60:no-scenecut \
 -sc_threshold 0 -crf 23 -vsync 1 \
 -map 0:1 -c:a aac -b:a 64k -ac 2 \
 -af:a aresample=async=1:min_hard_comp=0.100000:first_pts=0 \
 -f flv rtmp://[username]:[password]@[wowza_hostname]:1935/live/livestream1

この FFmpeg コマンドでは前回利用したビデオフィルターによるビットレートや時刻情報の埋め込みは行いません

ライブソースストリームの入力が開始したら、上部メニューバーの [Applications] をクリックし、左のメニューから既定のライブアプリケーション (live) をクリックします。次に、左のメニューから [Incoming Streams] をクリックすると、livestream1 という名前の入力ストリームとトランスコーダーで生成したライブストリームが入力ストリームとして表示されていることが確認できます。

[View by Group] をクリックすると、複数のストリームをまとめたストリームグループが表示されます。

これらのグループは、トランスコーダーテンプレートで定義されたグループで、以下の例では、livestream1_all と livestream1_mobile の 2 つのグループが表示されています。

ストリームグループは、トランスコーダーテンプレートで自由にグループを定義できるため、必要に応じて、トランスコーダーのテンプレートを新しく作成したり、既存のテンプレートを変更したりします。

手順4: ライブストリーミング再生のテスト

手順3でライブストリームの入力が完了したら、ライブストリームの配信ができる状態になります。

ライブストリームの再生 URL は以下のように構成されます。

ngrp というプレフィックス名を使うことでストリームグループにアクセスすることができます。

ストリーミング形式	URL
HLS	https://[WowzaStreamingEngineのドメイン名]/[アプリケーション名]/ngrp:[入力ストリーム名]/playlist.m3u8
DASH	https://[WowzaStreamingEngineのドメイン名]/[アプリケーション名]/ngrp:[入力ストリーム名]/manifest.mpd

[アプリケーション名] は、この例では live となります。

[入力ストリーム名] は、この例では livestream1_all または livestream1_mobile となります。

Web プレイヤーを使って、再生のテストを行います。

まとめ

この記事では、FFmpeg で生成したシングルビットレートの RTMP ライブストリームをアップロードし、 Wowza Streaming Engine 経由でマルチビットレートのトランスコードを行って、アダプティブストリーミング配信を行うための設定を紹介しました。

Wowza Streaming Engine を利用することで、RTMP, RTSP, SRT 等のライブストリームを Apple HLS, MPEG-DASH などのストリーミング形式に変換することができるようになります。また、CDN と組み合わせを行うことで大規模なアダプティブストリーミング配信を実現することも可能となります。

Resources: Wowza Streaming Engine を使ったライブストリーミング (2)

Tue, 10 Nov 2020 09:00:00 +0000

はじめに

前回の記事では FFmpeg で生成した RTMP ライブストリーム (シングルストリーム) をアップロードして、 Wowza Streaming Engine 経由でストリーミング配信を行うための設定を紹介しました。

この記事では、アダプティブストリーミングのライブストリーミング配信を行うための方法を紹介します。

作業の手順は、以下の通りです。

ライブソースストリームの入力セキュリティの設定 (省略)
FFmpeg によるビデオファイルを使った RTMP ライブソースの入力
SMIL ファイルの作成
ライブストリーミング再生のテスト

Big Buck Bunny サイトのビデオコンテンツをサンプルとして使うストリーミングコンテンツとします。

配信で利用するビデオファイルはこちらを利用しました。

手順1: ライブソースの入力セキュリティの設定 (省略)

前回の記事で作成した設定を利用するため、ここでは省略します。

手順の詳細は、前回の記事を参照します。

手順2: FFmpeg によるビデオファイルを使ったライブソースの入力

以下のコマンドを実行し、ビデオファイルとスクリプトファイルをダウンロードします。スクリプトファイルは Gist で公開しているシェルスクリプトを利用します。

cd ~/
mkdir videos
cd videos
curl -O https://download.blender.org/demo/movies/BBB/bbb_sunflower_1080p_30fps_normal.mp4
curl -LO https://gist.github.com/liveinstantly/7969cc44d14e96c98434cf4e8744a15f/raw/88d2a83c77e01ff32262db04f739e5755efbd6a5/ffmpeg_filelive_abr_transcode.sh
chmod +x ffmpeg_filelive_abr_transcode.sh
curl -O https://wowzademostorage1.blob.core.windows.net/transcoding/liveencode_spec_sample.txt

以下のコマンドを実行して、ビデオのトランスコードとライブソースの入力を行います。

このスクリプトでは、ビデオファイルから複数のビットレートのライブストリームを生成し、Wowza Streaming Engine に入力します。生成する複数のライブストリームの詳細は liveencode_spec_sample.txt ファイルで定義します。

./ffmpeg_filelive_abr_transcode.sh -f ~/videos/bbb_sunflower_1080p_30fps_normal.mp4 -s ./liveencode_spec_sample.txt -h **[WowzaStreamingEngineのドメイン名]** -a **live** -u **[username]** -p "**[password]**"

liveencode_spec_sample.txt ファイルは、コンマ区切りのファイルになっていて、以下の情報が含まれています。

ストリーム名	解像度(幅)	解像度(高さ)	ビットレート	プロファイル
livestream1	1280	720	1500	high
livestream2	960	540	800	baseline
livestream3	640	360	500	baseline

ライブソースストリームの入力が開始したら、上部メニューバーの [Applications] をクリックし、左のメニューから既定のライブアプリケーション (live) をクリックします。次に、左のメニューから [Incoming Streams] をクリックすると、 livestream1, livestream2, livestream3 という名前のストリームが入力されていることが確認できます。

手順3: SMIL ファイルの作成

アダプティブストリーミング配信のために SMIL ファイルを作成します。

以下の SMIL ファイル (XML ファイル) を作成し /usr/local/WowzaStreamingEngine/content ディレクトリに追加します。

liveencode_spec_sample.txt ファイルの詳細情報に従って、以下のように SMIL ファイルを定義します。

<?xml version="1.0" encoding="UTF-8"?>
<smil title="Sample SMIL file for Live Adaptive Streaming">
 <body>
 <switch>
 <video height="720" src="livestream1" systemLanguage="eng" width="1280">
 <param name="videoBitrate" value="1500000" valuetype="data"></param>
 <param name="audioBitrate" value="128000" valuetype="data"></param>
 </video>
 <video height="540" src="livestream2" systemLanguage="eng" width="960">
 <param name="videoBitrate" value="800000" valuetype="data"></param>
 <param name="audioBitrate" value="64000" valuetype="data"></param>
 </video>
 <video height="360" src="livestream3" systemLanguage="eng" width="640">
 <param name="videoBitrate" value="500000" valuetype="data"></param>
 <param name="audioBitrate" value="64000" valuetype="data"></param>
 </video>
 </switch>
 </body>
</smil>

手順4: ライブストリーミング再生のテスト

手順2でライブストリームの入力が完了したら、ライブストリームの配信ができる状態になります。

ライブストリームの再生 URL は以下のように構成されます。

ストリーミング形式	URL
HLS	https://[WowzaStreamingEngineのドメイン名]/[アプリケーション名]/smil:[SMILファイル名]/playlist.m3u8
DASH	https://[WowzaStreamingEngineのドメイン名]/[アプリケーション名]/smil:[SMILファイル名]/manifest.mpd

[アプリケーション名] は、この例では live となります。

[SMILファイル名] は、この例では adaptivelivestream となります。

Web プレイヤーを使って、再生のテストを行います。

まとめ

この記事では、FFmpeg で生成したマルチビットレートの RTMP ライブストリームをアップロードして、 Wowza Streaming Engine 経由でストリーミング配信を行うための設定を紹介しました。

Wowza Streaming Engine を利用することで、RTMP, RTSP, SRT 等のライブストリームを Apple HLS, MPEG-DASH などのストリーミング形式に変換することができるようになります。また、CDN と組み合わせを行うことで大規模な HTTP ベースのアダプティブストリーミング配信を実現することも可能となります。

Resources: Wowza Streaming Engine を使ったライブストリーミング (1)

Fri, 30 Oct 2020 09:00:00 +0000

はじめに

この記事では、Wowza Streaming Engine でライブストリーミング配信を行うためのセットアップを行います。

ライブ配信は、Wowza Streaming Engine にライブソースストリームを入力し、そのライブストリームをストリーミング方式に変換して、ライブストリーミング配信を行います。

作業の手順は、以下の通りです。

ライブソースストリームの入力セキュリティの設定
FFmpeg によるビデオファイルを使った RTMP ライブソースの入力
ライブストリーミング再生のテスト

Big Buck Bunny サイトのビデオコンテンツをサンプルとして使うストリーミングコンテンツとします。

配信で利用するビデオファイルはこちらを利用しました。

手順1: ライブソースの入力セキュリティの設定

Wowza Streaming Engine にライブソースストリームを入力する際にパスワードで認証を行うことにより、ライブソースの入力セキュリティを確保することができます。

ライブソースの入力セキュリティを設定にするには、以下の手順で行います。

Wowza Streaming Engine Manager 管理 UI にログインし、上部メニューバーの [Server] をクリックします。
左のメニューから [Source Authentication] をクリックします。
[+Add Source] ボタンを押します。
以下のパラメーター情報を入力して、[+Add] ボタンをクリックします。

パラメーター値

Source User Name ソース認証のユーザー名: 例: livestream1

Source Password (Confirm Password) ソース認証のパスワード

注意: ユーザー名とパスワードの値は、大文字と小文字が区別され、英数字、ピリオド (.)、アンダースコア (_)、およびハイフン (-) 文字のみを含めることができます。
上部メニューバーの [Applications] をクリックし、左のメニューから既定のライブアプリケーション (live) をクリックします。
左のメニューから [Source Security] をクリックし、ソースセキュリティの設定を確認します。
- [RTMP Sources] が [Require password authentication] (パスワード認証を必要とする) となっているかを確認する。
- もし設定が異なる場合は、[Edit] ボタンをクリックし、設定変更を行う。

パラメーター	値
Source User Name	ソース認証のユーザー名: 例: `livestream1`
Source Password (Confirm Password)	ソース認証のパスワード

手順2: FFmpeg によるビデオファイルを使ったライブソースの入力

以下のコマンドを実行し、ビデオファイルをダウンロードします。

cd ~/
mkdir videos
cd videos
curl -O https://download.blender.org/demo/movies/BBB/bbb_sunflower_1080p_30fps_normal.mp4

ビデオのダウンロードが完了したら、FFmpeg ツールを使ってダウンロードしたビデオファイルから、次の FFmpeg コマンドを使って、RTMP ライブソースストリームを生成し、Wowza Streaming Engine の live アプリケーションに入力します。

ライブソースストリームの入力 URL には、手順1で設定したソース認証のユーザー名 ([username]) とソース認証のパスワード ([password]) を正しく指定します。

ffmpeg -threads 4 -re -stream_loop -1 \
 -i ~/videos/bbb_sunflower_1080p_30fps_normal.mp4 \
 -rtmp_live live -pix_fmt yuv420p -r 30 \
 -map 0✌️0 -c:v libx264 -preset veryfast -tune animation \
 -b:v 1500k -profile:v high -s:v 1280x720 -minrate:v 1500k -maxrate:v 1500k -bufsize:v 3000k \
 -flags:v +cgop -g 60 -x264opts keyint=60:keyint_min=60:no-scenecut \
 -sc_threshold 0 -crf 23 -vsync 1 \
 -filter:v drawtext=:text=(bitrate=1500K):fontsize=32:x=32:y=32:box=1:boxcolor=white:fontcolor=black,drawtext=:text=%{localtime}:x=32:y=64:fontsize=32:box=1:boxcolor=white:fontcolor=black,drawtext=:text=%{pts\\:hms}:x=32:y=96:fontsize=32:box=1:boxcolor=white:fontcolor=black \
 -map 0:1 -c:a aac -b:a 64k -ac 2 \
 -af:a aresample=async=1:min_hard_comp=0.100000:first_pts=0 \
 -f flv rtmp://[username]:[password]@[wowza_hostname]:1935/live/livestream1

この FFmpeg を使ったコマンドでは、ビデオファイルを 1280x720 の解像度でエンコードしたストリームで RTMP ストリームを生成しています。エンコード時に、ビデオフィルター機能を使って、現在の日時・時刻の情報を映像に埋め込む処理をしています。

ライブソースストリームの入力が開始したら、上部メニューバーの [Applications] をクリックし、左のメニューから既定のライブアプリケーション (live) をクリックします。次に、左のメニューから [Incoming Streams] をクリックすると、livestream1 という名前のストリームが入力されていることが確認できます。

手順3: ライブストリーミング再生のテスト

手順2でライブストリームの入力が完了したら、ライブストリームの配信ができる状態になります。

ライブストリームの再生 URL は以下のように構成されます。

ストリーミング形式	URL
HLS	https://[WowzaStreamingEngineのドメイン名]/[アプリケーション名]/[入力ストリーム名]/playlist.m3u8
DASH	https://[WowzaStreamingEngineのドメイン名]/[アプリケーション名]/[入力ストリーム名]/manifest.mpd

[アプリケーション名] は、この例では live となります。

[入力ストリーム名] は、この例では livestream1 となります。

Web プレイヤーを使って、再生のテストを行います。

まとめ

この記事では、FFmpeg で生成した RTMP ライブストリームをアップロードして、Wowza Streaming Engine 経由でストリーミング配信を行うための設定を紹介しました。

Resources: Wowza Streaming Engine を使った VOD ストリーミングのセットアップ

Tue, 20 Oct 2020 09:00:00 +0000

はじめに

この記事では、Wowza Streaming Engine で VOD (ビデオ・オンデマンド) でストリーミングコンテンツの配信を行うためのセットアップを行います。

作業の手順は、以下の通りです。

アダプティブストリーミング用の VOD ファイルの作成
SMIL ファイルの作成
ビデオファイルのアップロード
Wowza Streaming Engine のセットアップ
アダプティブストリーミング再生のテスト

Big Buck Bunny サイトのビデオコンテンツをサンプルとして使うストリーミングコンテンツとします。

配信で利用するビデオファイルはこちらを利用しました。

手順1: アダプティブストリーミング用の VOD ファイルの作成

アダプティブストリーミング方式でのストリーミング再生では、プレイヤーのネットワーク接続の帯域幅に合わせて複数のビットレートと解像度のビデオを切り替えながら、ストリーミングビデオを再生します。まず、FFmpeg ツールを使って、オリジナルのビデオファイルから、複数のビットレートの MP4 ファイルを作成します。

Ubuntu Linux への FFmpeg のインストールは以下のコマンドを実行します。

sudo apt install ffmpeg

参考までに、利用した FFmpeg のバージョンは以下になります。

$ ffmpeg -version
ffmpeg version 4.4.2-0ubuntu0.22.04.1 Copyright (c) 2000-2021 the FFmpeg developers

FFmpeg を使った複数ビットレートの MP4 のトランスコードにあたり、Gist で公開しているシェルスクリプトを利用します。以下のコマンドを実行して、ビデオのダウンロード、トランスコードを行います。

cd ~/
mkdir videos
cd videos
curl -O https://download.blender.org/demo/movies/BBB/bbb_sunflower_1080p_30fps_normal.mp4
curl -LO https://gist.github.com/liveinstantly/adfdcdeb8ab2a4ecb7fe2b3844ef5cac/raw/a2b0272dd06f9676a02cc6f0ff812123e0490742/ffmpeg_abr_transcode.sh
curl -O https://wowzademostorage1.blob.core.windows.net/transcoding/encode_spec_sample.txt
chmod +x ffmpeg_abr_transcode.sh
./ffmpeg_abr_transcode.sh bbb_sunflower_1080p_30fps_normal.mp4 BigBuckBunny-h264-1080p-30fps encode_spec_sample.txt
mkdir bigbuckbunny-1080p-30fps-h264
mv BigBuckBunny-h264-1080p-30fps*.mp4 bigbuckbunny-1080p-30fps-h264/

生成された MP4 ビデオファイルは以下の通りです。

BigBuckBunny-h264-1080p-30fps_0400_320x180.mp4
BigBuckBunny-h264-1080p-30fps_0650_640x360.mp4
BigBuckBunny-h264-1080p-30fps_1000_640x360.mp4
BigBuckBunny-h264-1080p-30fps_1500_960x540.mp4
BigBuckBunny-h264-1080p-30fps_2250_960x540.mp4
BigBuckBunny-h264-1080p-30fps_3400_1280x720.mp4
BigBuckBunny-h264-1080p-30fps_4700_1920x1080.mp4
BigBuckBunny-h264-1080p-30fps_6000_1920x1080.mp4

手順2: SMIL ファイルの作成

アダプティブストリーミング方式での配信用に SMIL ファイルを作成します。

下記の XML (SMIL) ファイルを ~/videos/bbb_h264_1080p_30fps.smil に保存します。

<?xml version="1.0" encoding="UTF-8"?>
<smil title="Big Buck Bunny H264 1080p 30fps Adaptive Bitrate sample content">
 <body>
 <switch>
 <!-- BigBuckBunny-h264-1080p-30fps_0400_320x180.mp4 -->
 <video width="320" height="180" src="bigbuckbunny-1080p-30fps-h264/BigBuckBunny-h264-1080p-30fps_0400_320x180.mp4" systemLanguage="eng">
 <param name="videoBitrate" value="400000" valuetype="data"></param>
 <param name="audioBitrate" value="64000" valuetype="data"></param>
 </video>
 <!-- BigBuckBunny-h264-1080p-30fps_0650_640x360.mp4 -->
 <video width="640" height="360" src="bigbuckbunny-1080p-30fps-h264/BigBuckBunny-h264-1080p-30fps_0650_640x360.mp4" systemLanguage="eng">
 <param name="videoBitrate" value="650000" valuetype="data"></param>
 <param name="audioBitrate" value="64000" valuetype="data"></param>
 </video>
 <!-- BigBuckBunny-h264-1080p-30fps_1000_640x360.mp4 -->
 <video width="640" height="360" src="bigbuckbunny-1080p-30fps-h264/BigBuckBunny-h264-1080p-30fps_1000_640x360.mp4" systemLanguage="eng">
 <param name="videoBitrate" value="1000000" valuetype="data"></param>
 <param name="audioBitrate" value="64000" valuetype="data"></param>
 </video>
 <!-- BigBuckBunny-h264-1080p-30fps_1500_960x540.mp4 -->
 <video width="960" height="540" src="bigbuckbunny-1080p-30fps-h264/BigBuckBunny-h264-1080p-30fps_1500_960x540.mp4" systemLanguage="eng">
 <param name="videoBitrate" value="1500000" valuetype="data"></param>
 <param name="audioBitrate" value="64000" valuetype="data"></param>
 </video>
 <!-- BigBuckBunny-h264-1080p-30fps_2250_960x540.mp4 -->
 <video width="960" height="540" src="bigbuckbunny-1080p-30fps-h264/BigBuckBunny-h264-1080p-30fps_2250_960x540.mp4" systemLanguage="eng">
 <param name="videoBitrate" value="2250000" valuetype="data"></param>
 <param name="audioBitrate" value="64000" valuetype="data"></param>
 </video>
 <!-- BigBuckBunny-h264-1080p-30fps_3400_1280x720.mp4 -->
 <video width="1280" height="720" src="bigbuckbunny-1080p-30fps-h264/BigBuckBunny-h264-1080p-30fps_3400_1280x720.mp4" systemLanguage="eng">
 <param name="videoBitrate" value="3400000" valuetype="data"></param>
 <param name="audioBitrate" value="128000" valuetype="data"></param>
 </video>
 <!-- BigBuckBunny-h264-1080p-30fps_4700_1920x1080.mp4 -->
 <video width="1920" height="1080" src="bigbuckbunny-1080p-30fps-h264/BigBuckBunny-h264-1080p-30fps_4700_1920x1080.mp4" systemLanguage="eng">
 <param name="videoBitrate" value="4700000" valuetype="data"></param>
 <param name="audioBitrate" value="128000" valuetype="data"></param>
 </video>
 <!-- BigBuckBunny-h264-1080p-30fps_6000_1920x1080.mp4 -->
 <video width="1920" height="1080" src="bigbuckbunny-1080p-30fps-h264/BigBuckBunny-h264-1080p-30fps_6000_1920x1080.mp4" systemLanguage="eng">
 <param name="videoBitrate" value="6000000" valuetype="data"></param>
 <param name="audioBitrate" value="128000" valuetype="data"></param>
 </video>
 </switch>
 </body>
</smil>

注意: SMIL ファイルは階層化されたディレクトリには配置できないため、ソースファイルを階層化する場合は src 属性を相対パスで記載します。

手順3: ビデオファイルのアップロード

Wowza Streaming Engine では VOD 配信用に以下の3つのアプリケーションのタイプがあります。

タイプ	説明
VOD	単一サーバー向けのアプリケーション (VOD ファイルを読み込み、プレーヤーにストリーミングするために使用します)
VOD Edge	メディアキャッシュソースから VOD ファイルを取り込み、VOD ファイルをプレーヤーにストリーミングするために使用します
VOD HTTP Origin	ビデオ・オンデマンドファイルのオリジンとして動作し、HTTP ストリーミングプロトコル (MPEG-DASH および Apple HLS) を使用して HTTP キャッシングインフラストラクチャに配信するために使用します

Wowza Streaming Engine のインストール後の既定のセットアップでは、"VOD" タイプのアプリケーションが自動的にセットアップされていて、既定では [インストール先のディレクトリ]\content フォルダから VOD ファイルを読み込みます。

手順1と手順2で作成したファイルを content フォルダにコピーしても構いません。

この記事では、メディアキャッシュ機能を使って外部のクラウドストレージにアップロードした VOD ファイルを配信するよう設定します。

外部のクラウドストレージとして、Azure Storage を使ってみます。Azure CLI の手順を以下に説明しますので、「Azure CLI をインストールする方法」を参考に Azure CLI をインストールしてください。

export AZ_LOCATION=japanwest
export AZ_RESOURCE_GROUP=YourResourceGroup
export AZ_STORAGE_ACCOUNT=wowzavodstorage
az group create --resource-group ${AZ_RESOURCE_GROUP} --location ${AZ_LOCATION}
az storage account create --name ${AZ_STORAGE_ACCOUNT} --resource-group ${AZ_RESOURCE_GROUP} --location ${AZ_LOCATION} --sku Standard_LRS
AZ_STORAGE_KEY=$(az storage account keys list --account-name ${AZ_STORAGE_ACCOUNT} --resource-group ${AZ_RESOURCE_GROUP} | jq -r .[0].value)
az storage container create --name vod --account-name ${AZ_STORAGE_ACCOUNT} --account-key "${AZ_STORAGE_KEY}"
cd ~/videos/
az storage copy -s bigbuckbunny-1080p-30fps-h264 --destination-container vod --account-name ${AZ_STORAGE_ACCOUNT} --account-key ${AZ_STORAGE_KEY} --recursive

手順4: Wowza Streaming Engine のセットアップ

コンテンツのアップロードが完了したら、以下の手順で Wowza Streaming Engine のセットアップを行います。

メディアキャッシュの有効化

メディアキャッシュ機能を有効にするには、以下の手順で行います。

Wowza Streaming Engine Manager 管理 UI にログインし、上部メニューバーの [Server] をクリックします。
左のメニューから [Media Cache] をクリックします。
“Status: Enabled” と表示されている場合は、すでに有効になっているため、以降のステップは必要はありません。
[Enable Media Cache] ボタンを押します。
画面上部に [Media Cache enabled. You must restart the server for changes to take effect.] と表示されたら、[Restart Now] ボタンをクリックします。

メディアキャッシュソースの追加

メディアキャッシュソースとして、Azure Blob Storage を追加するには、以下の手順で行います。

Wowza Streaming Engine Manager 管理 UI にログインし、上部メニューバーの [Server] をクリックします。
左のメニューから [Media Cache] をクリックします。
[Source] タブをクリックし、[+Add Media Cache Source] ボタンを押します。

以下のパラメーター情報を入力して、[+Add] ボタンをクリックします。

パラメーター	値
Source Name	Azure Blob Storage のメディアソースキャッシュの任意の名前: 例: `Azure:wowzavodstorage`
Description	Azure Blob Storage のメディアソースキャッシュの説明 (任意)
Source Type	メディアキャッシュソースのタイプ: `Azure`
Prefix	メディアキャッシュソースのプレフィックス: `azblob/`
Blob Storage Account Name	Azure Blob Storage アカウントの名前: `wowzavodstorage`
Blob Storage Account Access Key	Azure Blob Storage アカウント鍵: `${AZ_STORAGE_KEY}` の値

VOD Edge アプリケーションの作成

VOD Edge アプリケーションの作成は、以下の手順で行います。

Wowza Streaming Engine Manager 管理 UI にログインし、上部メニューバーの [Applications] の ▼ をクリックし、[Add Application] をクリックします。
VOD Edge のボタンをクリックし、[Enter a name for your new application] のテキストボックスに “vodedge” と入力し、[+Add] ボタンをクリックします。
[Playback Types] では、配信に必要となる方式の項目をチェックします (ここではすべての項目をチェックします)。
[Media Cache Source] では、[All Media Cache Sources are available] を選択します。
[Closed Caption Sources] では、配信に必要となる字幕形式の項目をチェックします (ここではすべての項目をチェックします)。
[Save] ボタンをクリックし、VOD Edge アプリケーション設定を保存します。

手順5: アダプティブストリーミング再生のテスト

手順3でコンテンツのアップロードと手順4が完了したら、VOD ファイルの配信ができる状態になります。

SMIL ファイルのメディアキャッシュソースの再生 URL は以下のように構成されます。

http(s)://[Wowza Streaming Engine のドメイン名]/[VOD Edgeアプリケーション名]/_definst_/smil:[Media Cache Source Prefix][Media Source の Path]/[Manifest]

[Manifest] は playlist.m3u8 または manifest.mpd

VOD コンテンツの再生 URL は、以下の通りです。

ストリーミング形式	URL
HLS	https://[WowzaStreamingEngineのドメイン名]/vodedge/_definst_/smil:azblob/bbb_h264_1080p_30fps.smil/playlist.m3u8
DASH	https://[WowzaStreamingEngineのドメイン名]/vodedge/_definst_/smil:azblob/bbb_h264_1080p_30fps.smil/manifest.mpd

Web プレイヤーを使って、再生のテストを行います。

メディアキャッシュソース上の MP4 ファイルに対して、RTMP や RTSP での配信も可能です。

再生 URL の中の “smil:” の代わりに “mp4:” を使います。

まとめ

この記事では、VOD ファイルをクラウドストレージにアップロードして、Wowza Streaming Engine 経由でストリーミング配信を行うための設定を紹介しました。

Wowza Streaming Engine を利用することで、マルチビットレートの MP4 ファイルを Apple HLS, MPEG-DASH などのストリーミング形式に変換することができるようになります。

複数の Wowza Streaming Engine サーバーを導入することでスケーラビリティ高い配信を実現することもできます。また、さらに CDN と組み合わせを行うことで大規模な HTTP ベースのアダプティブストリーミング配信を実現することも可能となります。

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

Thu, 15 Oct 2020 09:00:00 +0000

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

ビデオストリーミング技術の紹介でも触れたように、現在、ビデオストリーミングは 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 の両方でアクセスできるようにするためには、以下の設定を行います。

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

設定が完了すると、以下の 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 までご連絡ください。

Resources: Let's Encrypt を使った Wowza Streaming Engine の HTTPS 証明書のセットアップ

Sat, 10 Oct 2020 09:00:00 +0000

はじめに

前回の記事では Wowza Streaming Engine のセットアップを行いました。セットアップされたストリーミングサーバーは HTTPS サーバー証明書が設定されていないため、ストリーミングコンテンツや管理 UI は HTTP を使ってアクセスしました。

実際のサービスを公開する場合、HTTPS によるサービス提供が必要となります。これは、サーバーサービス群の通信路のセキュリティ確保だけではありません。ほとんどのウェブホスティングサービスの HTTPS 強制に伴って、Web ベースのプレイヤーをホストするサーバー (HTTPS) とコンテンツ (HTTP) の組み合わせは、既定で混在コンテンツを許可しないブラウザーポリシーのため、再生ができなくなる、という問題があります (前回の記事を参照)。

今回、Wowza Streaming Engine サーバーの以下のサービスに対して、HTTPS サーバー証明書の設定を行います。

サービス	ポート番号	説明	設定箇所
HTTPS ストリーミング	443	既定の HTTPS を使ったコンテンツストリーミング	conf/VHost.xml
REST API インターフェース	8087	既定の REST API インターフェースを HTTPS に変更	conf/Server.xml
Wowza Streaming Engine Manager 管理サービス	8090	管理画面へのアクセスを HTTPS 経由で行う	manager/conf/tomcat.properties

この記事では、前回の記事に引き続き、Ubuntu Linux 上にインストールされた Wowza Streaming Engine を対象とします。

HTTPS サーバー証明書の発行のまえに

HTTPS サーバー証明書を発行するにあたって、いくつかのケースがあります。

HTTPS サーバー証明書とは、サーバーのドメイン名に対して権威のある証明書発行機関 (証明書の認証局) により証明された証明書ですので、セットアップしたサーバーの外部公開 IP アドレスに対して、ドメイン名が割り当てられていることが必須となります。

一般的に、サービス公開を行うにあたって独自ドメイン名をお持ちの場合が多いため、その場合は、独自ドメインに対する HTTPS サーバー証明書の発行となります。証明書の発行の依頼側がドメインの所有や指定したドメイン名のサーバーの所有を証明することにより、権威のある証明書発行機関は、依頼した者が正当なドメイン名の所有者であることを認め、証明書を発行します。

クラウドベンダーが提供する環境に展開する場合、そのクラウドベンダーの提供するドメイン名を使うことができる場合があります。その場合は、クラウドベンダーのドメインに対する HTTPS サーバー証明書の発行となります。このケースでは、クラウドの利用者はクラウドベンダーのドメインの所有者ではありません。証明書の発行の依頼側がドメイン名のサーバーの所有を証明することにより、権威のある証明書発行機関は、依頼した者が正当なドメイン名の所有者であることを認め、証明書を発行します。

独自ドメインを所有しておらず、セットアップしたサーバーにドメイン名が割り当てられていない場合、それでも HTTPS サーバー証明書が必要な場合は、 Wowza Media Systems から提供されている StreamLock というマネージドサービスを利用することができます。このサービスでは、サーバーの外部公開 IP アドレスを登録すると、[ランダムなホスト名].streamlock.net というドメイン名で HTTPS サーバー証明書を発行することができます。サービスに登録した IP アドレスに対して [ランダムなホスト名].streamlock.net のドメイン名を独自の DNS で管理し、証明書発行機関に発行を依頼します。これにより、発行された HTTPS サーバー証明書を提供することができるという仕組みとなっています。このため、外部公開 IP アドレスが動的に変更されるホストでは利用することができません。固定の外部公開 IP アドレスを利用するようにしてください。

ケース別のまとめとしては、以下の通りです。

ケース	発行方法
独自ドメイン名が割り当てられたサーバー	証明書発行機関に発行を依頼する
クラウドベンダーのドメイン名が割り当てられたサーバー	証明書発行機関に発行を依頼する
独自ドメイン名を所有しておらず、ドメイン名の割り当てがないサーバー	Wowza Media Systems の StreamLock サービスを利用する

この記事では、Let’s Encrypt と呼ばれている、フリーで自動化された証明書の発行を行う証明書発行機関を使った証明書の発行を紹介します。 Let’s Encrypt は、「世界中の HTTPS Web サイトの普及」というミッションのもと、様々なスポンサーの支援を受けて、HTTPS 証明書を無料で提供してくれています。

Wowza Media Systems の StreamLock サービスについては、Wowza のドキュメント記事: Get SSL/TLS certificates from the Wowza Streaming Engine StreamLock service を参照ください。

HTTPS サーバー証明書の発行

この記事では、HTTPS サーバー証明書を発行に Certbot ツールを利用します。 Certbot ツールは、Let’s Encrypt 証明書発行機関に対して証明書の発行処理を、コマンドラインで利用することができるツールです。

Certbot ツールのインストール

以下のコマンドを実行して Certbot ツールをインストールします。

sudo apt install certbot -y

Certbot ツールには、証明書の発行と設置 (run)、証明書の発行のみ (certonly)、証明書の更新 (renew) などの作業に合わせたサブコマンドが用意されています。 Apache や NGINX などの HTTP サーバーとも統合されており、証明書の発行と設置 (run) のサブコマンドを利用することで、証明書発行の自動化が行えるようになっています。また、証明書発行機関がドメイン名所有の検証を行うためのオプションとして、以下のオプションが用意されています。

オプション	説明
standalone	シンプルなスタンドアロンの Web サーバーを起動し、ドメイン名の所有を検証する (HTTPによる検証)
webroot	既に起動している Web サーバーの webroot ディレクトリに検証のためのファイルを配置して検証する (HTTPによる検証)
manual	手動で検証のための手続きを行う (DNS による検証、および、HTTPによる検証)

DNS による検証
- ドメイン名の所有者は、所有している DNS の DNS レコードに指定されたランダムな値の TXT レコードを登録します
- 証明書発行機関 (認証局) は、その DNS レコードに指定した値が正しく設定されているかを確認する、ことでドメイン名の所有を検証します
HTTP による検証
- ドメイン名の所有者は、ドメイン名の Web サーバー上に、指定されたランダムな値を保持するテキストファイルを配置します
- 証明書発行機関 (認証局) は、そのテキストファイルがHTTP経由で正しく取得でき、指定された値がファイルに含まれているかを確認する、ことでドメイン名の所有を検証します

以下のコマンドで certbot コマンドのオプションの詳細を確認することができます。また、Certbot のドキュメントはこちらから確認することができます。

certbot --help

注意: Certbot ツールの既定の設定では、/etc フォルダなど管理者権限が必要なディレクトリへの書き込みが必要なため、sudo コマンドを使って実行するようにします

ケース別のドメイン名所有の検証方法について

HTTPS サーバー証明書を発行するにあたって、いくつかのケースがあり、上でその説明しました。ここでは、それのケースのうち、ドメイン名の割り当てがある場合、証明書の発行のためのドメイン名所有の検証方法について説明します。

ケース1: 独自ドメインを所有している

独自ドメインを所有している場合、以下の2つの方法で、ドメイン名所有の検証が可能です。

DNS による検証
HTTP による検証

ケース2: クラウドのドメインを利用したドメイン名をサーバーに割り当てている

クラウドベンダーのドメインを利用している場合、そのドメインの所有や管理はクラウドベンダーが行っているため、DNS による検証を利用することができません。この場合は、HTTP によるドメイン名所有の検証のみが利用可能です。

HTTP による検証

DNS 検証を使った発行

DNS 検証を使った証明書発行は、--manual オプションを使って、以下のコマンドを実行します。

sudo certbot certonly --manual --domain [ドメイン名] --email [Eメールアドレス] --agree-tos --preferred-challenges dns

出力結果:

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Requesting a certificate for wowza-01.stream.liveinstantly.cloud

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please deploy a DNS TXT record under the name:

_acme-challenge.[ドメイン名].

with the following value:

KDXCIHSTiqQnl1J410aharFz7jz1-NZ8jha0ajajKjqePhhdc <== 検証用のランダムな文字列

Before continuing, verify the TXT record has been deployed. Depending on the DNS
provider, this may take some time, from a few seconds to multiple minutes. You can
check if it has finished deploying with aid of online tools, such as the Google
Admin Toolbox: https://toolbox.googleapps.com/apps/dig/#TXT/_acme-challenge.wowza-01.stream.liveinstantly.cloud.
Look for one or more bolded line(s) below the line ';ANSWER'. It should show the
value(s) you've just added.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Press Enter to Continue

ここでツールの実行が一旦停止し、ユーザーに DNS TXTレコードの追加を促します。所有しているドメインの DNS に TXT レコードの検証用のランダムな文字列を追加したら、[Enter] キーを押して継続します。

ドメイン名所有の検証が完了すると、以下のように出力され、/etc/letsencrypt/live/[ドメイン名]/ 以下のフォルダに発行された証明書が保存されます。

Let’s Encrypt で発行された証明書の有効期間は 90 日間となります。

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/[ドメイン名]/fullchain.pem
Key is saved at: /etc/letsencrypt/live/[ドメイン名]/privkey.pem
This certificate expires on 2021-01-08.
These files will be updated when the certificate renews.

NEXT STEPS:
- This certificate will not be renewed automatically. Autorenewal of --manual certificates requires the use of an authentication hook script (--manual-auth-hook) but one was not provided. To renew this certificate, repeat this same certbot command before the certificate's expiry date.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
If you like Certbot, please consider supporting our work by:
 * Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate
 * Donating to EFF: https://eff.org/donate-le
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

HTTP 検証を使った発行

HTTP 検証を使った証明書発行は、Web サーバーを別途必要とします。セットアップしたストリーミングサーバーには、Web サーバーをセットアップしていないため、--standalone オプションを使うことにします。

証明書の発行は、以下のコマンドを実行します。

注意: 80番ポートを使ったサービスが起動していないことを事前に確認してください

sudo certbot certonly --standalone --domain [ドメイン名] --email [Eメールアドレス] --agree-tos

HTTP によるドメイン所有の検証は、Certbot ツールが起動した Web サーバーにより自動化され、証明書の発行が完了すると、以下のように出力さます。発行された証明書は、同様に、/etc/letsencrypt/live/[ドメイン名]/ 以下のフォルダに保存されます。

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Requesting a certificate for [ドメイン名]

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/[ドメイン名]/fullchain.pem
Key is saved at: /etc/letsencrypt/live/[ドメイン名]/privkey.pem
This certificate expires on 2021-01-08.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
If you like Certbot, please consider supporting our work by:
 * Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate
 * Donating to EFF: https://eff.org/donate-le
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Wowza Streaming Engine への HTTPS サーバー証明書の設定

Certbot ツールを使って発行した HTTPS 証明書 (およびサーバー秘密鍵) は、以下のディレクトリに格納されています。

HTTPS 証明書 (X.509 証明書): /etc/letsencrypt/live/[ドメイン名]/cert.pem
サーバー秘密鍵: /etc/letsencrypt/live/[ドメイン名]/privkey.pem

/etc/letsencrypt/live/ ディレクトリ以下に最新の HTTPS 証明書が保存され、 /etc/letsencrypt/archives ディレクトリ以下に古い HTTPS 証明書も含めた過去に発行したすべての証明書が含まれます。

PEM 形式のファイルとして保存されており、証明書や鍵のバイナリデータが BASE64 方式でエンコードされたテキスト形式のファイルとなっています。

HTTPS 証明書の内容を確認するには、OpenSSL コマンドを使って、以下のコマンドを実行します。

sudo openssl x509 -text -in /etc/letsencrypt/live/[ドメイン名]/cert.pem

注意: 管理者権限のみアクセス可能となっているため、sudo コマンドを使って openssl コマンドを実行します

Wowza Streaming Engine で HTTPS 証明書を利用するためには、Java Key Store 形式 (.jks) に変換する必要があります。

HTTPS 証明書とサーバー秘密鍵を Java Key Store 形式 (.jks) に変換する

Java Key Store 形式 (.jks) は、X.509 証明書や対応する秘密鍵などをパスワードに基づく鍵で保護された1つのファイルに保管することが可能な鍵ストアファイル形式です。 Java SE ランタイムに含まれる keytool と呼ばれるツールを使って管理することができます。このツールでは、PKCS#12 形式から JKS 形式に変換することが可能なため、まず、OpenSSL コマンドを使って PKCS#12 形式の鍵ストアを作成し、その後、JKS 形式の鍵ストアファイルを作成します。

PKCS#12 形式 (.p12) は、IETF で既定されたフォーマット仕様で、JKS 形式と同様に、X.509 証明書や対応する秘密鍵などをパスワードに基づく鍵で保護された1つのファイルに保管することが可能な鍵ストアファイル形式です

以下のコマンドを実行して、PKCS#12 形式の鍵ストアファイルを作成し、作成した PKCS#12 形式の鍵ストアファイルを JKS 形式の鍵ストアファイルに変換します。

export DOMAIN=[ドメイン名]
sudo openssl pkcs12 -export -legacy \
 -in /etc/letsencrypt/live/${DOMAIN}/fullchain.pem \
 -inkey /etc/letsencrypt/live/${DOMAIN}/privkey.pem \
 -out ${DOMAIN}.p12 -password pass:[パスワード文字列]
sudo /usr/local/WowzaStreamingEngine/java/bin/keytool -v -importkeystore \
 -destkeystore ${DOMAIN}.jks -deststoretype jks -deststorepass [JKSパスワード文字列] \
 -srckeystore ${DOMAIN}.p12 -srcstoretype pkcs12 -srcstorepass [パスワード文字列]

HTTPS ストリーミングを設定する

既定の設定では、HTTPS (443番ポート) は有効になっていません。

以下の手順で、Wowza Streaming Engine の Virtual Host 設定に HTTPS ポート設定を追加します。

/usr/local/WowzaStreamingEngine/conf/VHost.xml を編集し、以下の部分を有効にします (XMLのコメントアウト  を削除します)。

 <!-- 443 with SSL -->
 <HostPort>
 <Name>Default SSL Streaming</Name>
 <Type>Streaming</Type>
 <ProcessorCount>${com.wowza.wms.TuningAuto}</ProcessorCount>
 <IpAddress>*</IpAddress>
 <Port>443</Port>
 <HTTPIdent2Response></HTTPIdent2Response>
 <SSLConfig>
 <KeyStorePath>${com.wowza.wms.context.VHostConfigHome}/conf/keystore.jks</KeyStorePath>
 <KeyStorePassword>[JKSパスワード文字列]</KeyStorePassword>
 <KeyStoreType>JKS</KeyStoreType>
 <DomainToKeyStoreMapPath></DomainToKeyStoreMapPath>
 <SSLProtocol>TLS</SSLProtocol>
 <Algorithm>SunX509</Algorithm>
 <CipherSuites></CipherSuites>
 <Protocols></Protocols>
 <AllowHttp2>false</AllowHttp2>
 </SSLConfig>
 <SocketConfiguration>
 <ReuseAddress>true</ReuseAddress>
 <ReceiveBufferSize>65000</ReceiveBufferSize>
 <ReadBufferSize>65000</ReadBufferSize>
 <SendBufferSize>65000</SendBufferSize>
 <KeepAlive>true</KeepAlive>
 <AcceptorBackLog>100</AcceptorBackLog>
 </SocketConfiguration>
 <HTTPStreamerAdapterIDs>cupertinostreaming,smoothstreaming,sanjosestreaming,dvrchunkstreaming,mpegdashstreaming</HTTPStreamerAdapterIDs>
 <HTTPProviders>
 <HTTPProvider>
 <BaseClass>com.wowza.wms.http.HTTPCrossdomain</BaseClass>
 <RequestFilters>*crossdomain.xml</RequestFilters>
 <AuthenticationMethod>none</AuthenticationMethod>
 </HTTPProvider>
 <HTTPProvider>
 <BaseClass>com.wowza.wms.http.HTTPClientAccessPolicy</BaseClass>
 <RequestFilters>*clientaccesspolicy.xml</RequestFilters>
 <AuthenticationMethod>none</AuthenticationMethod>
 </HTTPProvider>
 <HTTPProvider>
 <BaseClass>com.wowza.wms.http.HTTPProviderMediaList</BaseClass>
 <RequestFilters>*jwplayer.rss|*jwplayer.smil|*medialist.smil|*manifest-rtmp.f4m</RequestFilters>
 <AuthenticationMethod>none</AuthenticationMethod>
 </HTTPProvider>
 <HTTPProvider>
 <BaseClass>com.wowza.wms.http.HTTPServerVersion</BaseClass>
 <RequestFilters>*ServerVersion</RequestFilters>
 <AuthenticationMethod>none</AuthenticationMethod>
 </HTTPProvider>
 </HTTPProviders>
 </HostPort>

JKS鍵ストアファイルをコピーします

sudo cp ${PWD}/${DOMAIN}.jks /usr/local/WowzaStreamingEngine/conf/
sudo ln -s /usr/local/WowzaStreamingEngine/conf/${DOMAIN}.jks /usr/local/WowzaStreamingEngine/conf/keystore.jks

Wowza Streaming Engine を再起動する

sudo systemctl restart WowzaStreamingEngine

HTTPS 証明書が正しくロードされ、443 ポート番号が正しくセットアップされたか、 Wowza Streaming Engine ログ (/usr/local/WowzaStreamingEngine/logs/wowzastreamingengine_access.log) を確認します。

以下の3行の出力がログに含まれていれば、正しくセットアップされています。

_defaultVHost_ SSL ([any]:443): keyStorePath:/usr/local/WowzaStreamingEngine/conf/keystore.jks
_defaultVHost_ Bind attempt ([any]:443:4)
_defaultVHost_ Bind successful ([any]:443)

また、以下のコマンドを実行し、443 ポートにアクセスできるかどうかも確認します。

curl https://[ドメイン名]/ServerVersion

Wowza Streaming Engine のバージョン情報が表示されれば問題ありません。

REST API インターフェスで HTTPS を有効する

既定では Wowza Streaming Engine の REST API インターフェースは HTTP/8087 となっています。

以下の手順で、REST API インターフェースを HTTPS で公開するよう設定を変更します。

/usr/local/WowzaStreamingEngine/conf/Server.xml を編集し、以下のように設定します。

 <RESTInterface>
 :
 <SSLConfig>
 <Enable>true</Enable>
 <KeyStorePath>${com.wowza.wms.ConfigHome}/conf/keystore.jks</KeyStorePath>
 <KeyStorePassword>[JKSパスワード文字列]</KeyStorePassword>
 <KeyStoreType>JKS</KeyStoreType>
 <SSLProtocol>TLS</SSLProtocol>
 <Algorithm>SunX509</Algorithm>
 <CipherSuites></CipherSuites>
 <Protocols></Protocols>
 </SSLConfig>
 <IPWhiteList>*</IPWhiteList>
 :
 </RESTInterface>

または、以下のコマンドで Server.xml を変更することも可能です。

cat /usr/local/WowzaStreamingEngine/conf/Server.xml | \
 xmlstarlet edit --update "/Root/Server/RESTInterface/SSLConfig/Enable" --value "true" | \
 xmlstarlet edit --update "/Root/Server/RESTInterface/SSLConfig/KeyStorePath" --value "\${com.wowza.wms.ConfigHome}/conf/keystore.jks" | \
 xmlstarlet edit --update "/Root/Server/RESTInterface/SSLConfig/KeyStorePassword" --value "[JKSパスワード文字列]" | \
 | xmlstarlet format -t | xmlstarlet c14n > /tmp/Server.xml
sudo cp /tmp/Server.xml /usr/local/WowzaStreamingEngine/conf/Server.xml

JKS鍵ストアファイルをコピーします

sudo cp ${PWD}/${DOMAIN}.jks /usr/local/WowzaStreamingEngine/conf/
sudo ln -s /usr/local/WowzaStreamingEngine/conf/${DOMAIN}.jks /usr/local/WowzaStreamingEngine/conf/keystore.jks

Wowza Streaming Engine を再起動する

sudo systemctl restart WowzaStreamingEngine

RESTServer: Bind attempt ([any]:8087)
RESTServer: Bind successful ([any]:8087)
Wowza REST API started
RESTServer: SSL:Yes

また、以下のコマンドを実行し、8087 ポートに　HTTPS でアクセスできるかどうかも確認します。

curl https://[ドメイン名]:8087/ -u [ユーザー名]:[パスワード]

Wowza Streaming Engine のバージョン情報が表示されれば問題ありません。

管理 UI からアクセスする場合は、Wowza Streaming Engine Manager 管理サービスの HTTPS を有効にする必要があります

Wowza Streaming Engine Manager 管理サービスの HTTPS を有効する

既定では Wowza Streaming Engine Manager 管理サービスは、HTTP/8086 となっています。

以下の手順で、管理サービスを HTTPS/8090 で公開するよう設定を変更します。

/usr/local/WowzaStreamingEngine/manager/conf/tomcat.properties.xml を編集し、以下のように設定します。
```
httpsPort=8090
httpsKeyStore=conf/keystore.jks
httpsKeyStorePassword=[JKSパスワード文字列]
```

JKS鍵ストアファイルをコピーします

sudo cp ${PWD}/${DOMAIN}.jks /usr/local/WowzaStreamingEngine/manager/conf/
sudo ln -s /usr/local/WowzaStreamingEngine/manager/conf/${DOMAIN}.jks /usr/local/WowzaStreamingEngine/manager/conf/keystore.jks

Wowza Streaming Engine を再起動する

sudo systemctl restart WowzaStreamingEngineManager

REST API インターフェースの HTTPS を有効にした場合は、管理 UI にアクセスし、"[+] Server" をクリックし、REST API インターフェースのホスト名を https://[HTTPS 証明書のドメイン名]:8087 に設定し、[Sign In] をクリックしてログインします。

まとめ

この記事では、Let’s Encrypt で発行した証明書を使って、Wowza Streaming Engine の HTTPS 証明書のセットアップを行いました。

Certbot ツールを利用すると、証明書の発行前後にカスタムのイベントフックスクリプトを動作させることができるため、DNS レコードの追加・更新の自動化が可能となったり、証明書の有効期限が切れに合わせて自動更新スクリプトを cron で動作させたり、などの運用も可能となります。

Certbot で発行した証明書から JKS 形式のファイルを生成するスクリプトを Gist で公開しています。

Resources: Wowza Streaming Engine のインストールとセットアップ

Wed, 30 Sep 2020 09:00:00 +0000

Wowza Streaming Engine とは

Wowza Streaming Engine は Wowza Media Systems が開発しているストリーミングサーバーのソフトウェア製品です。ビデオ・オンデマンドやライブのビデオストリーミングのためのプラットフォームの構築に利用することができます。 MPEG-DASH, Apple HTTP Live Streaming (HLS), Adobe RTMP など主要なストリーミングプロトコルに対応し、同時に、ビデオチャットなどに用いられる遅延の少ない WebRTC のようなプロトコルにも対応します。

Java VM 上で動作するプラットフォームで、Windows/macOS/Linux の各 OS で動作します。オンプレミスのデータセンターだけでなく、各クラウド上の仮想マシンやコンテナーで動作させることもできます。

この記事では、Ubuntu Linux にインストールし、ビデオ・オンデマンドストリーミングの動作確認をします。

Wowza Streaming Engine のインストール

Wowza Streaming Engine のトライアルライセンスの入手

Wowza Streaming Engine を動作させるにはライセンスキーが必要となりますが、 Wowza Media Systems ではトライアル用のライセンスを無料で提供しています。

Wowza Streaming Engineのトライアルでは、以下を提供します。

最も安定しスケーラービリティの高いビデオストリーミングのためのソフトウェアを提供
ライブ、ビデオ・オンデマンドのための REST/Java API を提供
フル機能を提供する30日間のトライアル

こちらから Wowza アカウントを作成し、トライアルに参加することができます。登録が完了すると、メールが届き、ライセンスキーを入手することができます。

Wowza Streaming Engine のダウンロード

次に Wowza Streaming Engine ソフトウェアをダウンロードします。先ほど、登録した Wowza アカウントを使って、Wowza Portal にログインし、 [Downloads] タブから Linux 用のインストーラーをダウンロードします。

ダウンロードした Linux 用インストーラーのファイル名は WowzaStreamingEngine-4.8.21+6-linux-x64-installer.run です。

Ubuntu Server への Wowza Streaming Engine のインストール

Ubuntu Server Linux がインストールされているコンピューターにインストールします。この記事では、記事作成時の最新の LTS (Long-Term Support) 版の Ubuntu Server 22.04 LTS を使います。

以下のコマンドを実行して、ダウンロードしたインストーラーを使ってインストールを行います。

[WSE_USERNAME]: 管理 UI へのログインのユーザー名を指定します
[WSE_PASSWORD]: 管理 UI のログインユーザーのパスワードを指定します
- パスワードに指定可能な文字は、英数字と4種類の記号 (@ . _ -) になります
[WSE_LICENSEKEY]: Wowza Streaming Engine のトライアル用ライセンスキーを入力します。

chmod +x WowzaStreamingEngine-4.8.21+6-linux-x64-installer.run
./WowzaStreamingEngine-4.8.21+6-linux-x64-installer.run --prefix /usr/local \
 --username [WSE_USERNAME] --password [WSE_PASSWORD] --licensekey [WSE_LICENSEKEY]

以下のメッセージが表示されたら、セットアップウィザードに従ってインストールします。インストールパラメーターはコマンドラインで指定しているため、[Enter] キーを押していけば進められます。

----------------------------------------------------------------------------
Welcome to the Wowza Streaming Engine Setup Wizard.

----------------------------------------------------------------------------
Please read the following License Agreement. You must accept the terms of this
agreement before continuing with the installation.

Press [Enter] to continue:

以下のメッセージに [Y] キーを入力してインストールします。

Start Wowza Streaming Engine automatically [Y/n]: Y
> 自動的に Wowza Streaming Engine を起動しますか？

Do you want to continue? [Y/n]: Y
> 入力した情報でインストールを継続しますか？ (インストール前の最終確認)

Wowza Streaming Engine へのネットワーク接続確認

Wowza Streaming Engine をインストールすると、以下の Java コンポーネントが動作します。

Wowza Streaming Engine: ストリーミングサーバー本体
Wowza Streaming Engine Manager: ストリーミングサーバーの管理のためのウェブサービス

Wowza Streaming Engine はインストール後の既定の構成では、それぞれのコンポーネントで以下のポート番号を利用します。インストールした環境に合わせてファイアウォールの設定を行ってください。

ポート番号	プロトコル	コンポーネント	概要
1935	TCP	Wowza Streaming Engine	ストリーミング用の既定のポート
8086	TCP	Wowza Streaming Engine	管理インターフェス用の既定のポート
8087	TCP	Wowza Streaming Engine	REST API 用の既定のポート
8088	TCP	Wowza Streaming Engine Manager	管理ウェブサービス用の既定のポート

Wowza Streaming Engine に正しくアクセスできるかどうか、以下のコマンドを実行することで確認できます。

curl http://[hostname or ip address]:1935/ServerVersion
curl http://[hostname or ip address]:8086/ServerVersion

正しくアクセスできた場合は、以下の出力が確認できます。

<html><head><title>Wowza Streaming Engine 4 Trial Edition (Expires: Apr 15, 2023) 4.8.21+6 build20230125151621</title></head><body>Wowza Streaming Engine 4 Trial Edition (Expires: Apr 15, 2023) 4.8.21+6 build20230125151621</body></html>

Wowza Streaming Engine をインストールすると、ビデオ・オンデマンド (vod) とライブ (live) のタイプの単一サーバーアプリケーションがインストールされますので、これを利用します。

その他のアプリケーションタイプが用意されており、スケーラービリティの高い構成を行うこともできます。

Wowza Streaming Engine の管理 UI (Wowza Streaming Engine Manager) へのアクセス

Wowza Streaming Engine をインストールすると、管理のためのウェブサービス (管理 UI) もインストールされます。ブラウザーで以下のURLにアクセスし、設定した管理 UI のユーザー名とパスワードでログインすると、管理画面が表示されます。

http://[hostname or ip address]:8088/

外部公開のホスト名・IPアドレスの設定

インストールした環境がクラウド環境やコンテナ環境の場合、ホストのIPアドレスと外部に公開されているIPアドレスが異なる場合があります。この場合、以下のコマンドを実行して VHost.xml を書き換ることで、管理 UI のトップ画面で [Test Player] ボタンを押した際に、外部公開のURLが正しく表示されるようになります。

sudo mv /usr/local/WowzaStreamingEngine/conf/VHost.xml /usr/local/WowzaStreamingEngine/conf/VHost.xml.old
sudo xmlstarlet edit --update "/Root/VHost/Manager/TestPlayer/IpAddress" --value "[hostname or ip address]" /usr/local/WowzaStreamingEngine/conf/VHost.xml | xmlstarlet format -t > /usr/local/WowzaStreamingEngine/conf/VHost.xml.new

ビデオ・オンデマンドサンプルコンテンツの再生

インストールした Wowza Streaming Engine には、<install-root>/content フォルダにサンプルコンテンツが含まれています。 HTTP 経由でサンプルコンテンツの再生を行います。

サンプルコンテンツの再生 URL は、管理 UI のトップ画面で [Test Playback…] ボタンを押すと表示されます。

HLS: <http://[hostname or ip address]:1935/vod/mp4:sample.mp4/playlist.m3u8>
MPEG-DASH: <http://[hostname or ip address]:1935/vod/mp4:sample.mp4/manifest.mpd>
RTMP: rtmp://[hostname or ip address]:1935/vod/mp4:sample.mp4
RTSP: rtsp://[hostname or ip address]:1935/vod/mp4:sample.mp4

注意: インストール直後の状態は、HTTPS (TLS) サーバー証明書の発行・設定を行っていないため、HTTPS 経由で再生することはできません。別の記事で、TLS 証明書の設定方法を紹介します。

Wowza Test Player で HTTP のサンプルコンテンツは再生できないため (以下の注意点を参照)、この記事では、オープンソースの Web プレイヤー (http://testplayer.demo.liveinstantly.cloud/) を使って、HLS, MPEG-DASH のコンテンツの再生を確認します。

注意: Wowza Test Player 以外にも様々な組織や企業が提供しているほとんどの Web ベースのテスト用ストリーミングプレイヤーは HTTPS でホストされていますが、ほぼすべてのブラウザーが HTTP/HTTPS 混在のウェブコンテンツのブラウジングを許可しないため、それらのプレイヤーでは HTTP コンテンツの再生ができません。

また、VLC メディアプレイヤーを使うと、HLS, MPEG-DASH 以外にも、RTMP/RTSP の各ストリーミングプロトコルの再生確認ができますので、VLC メディアプレイヤーも使って確認します。

メニューバーから [Media] -> [Open Network Stream…] を選択し、以下の URL を入力して再生することができます。

LiveInstantly, LLC.

Resources: THEOplayer プレイヤーのデモ Web アプリ

Resources: Nuxt v3 フレームワークでの THEOplayer プレイヤーアプリの実装例

THEOplayer Web SDK を統合するためのステップバイステップ

前提条件

1. Nuxt3 アプリ テンプレートを作成する

2. Nuxt3 ソースコード群を ./src ディレクトリに移動する

2.1. src ディレクトリを作成し、app.vue を ./src に移動する

2.2. tsconfig.json を変更する

3. 必要なコンポーネントをインストールする

4.THEOplayer を統合する

4.1 モジュール宣言の追加 (THEOplayer.d.ts)

4.2 THEOplayer Web SDK の Player.vue を追加

4.3 Welcome.vue と NuxtLogo.vue を追加する

4.4 src/global.d.ts に THEOplayer の型宣言の読み込みを追加する

4.5 app.vue に THEOplayer JavaScript/CSS モジュールを追加する

4.5 app.vue のコンポーネントを変更する

5. このサンプル アプリケーション コードを実行し、ブラウザで開きます

ローカルの THEOplayer Web SDK を使用する

最後に

Resources: Vue3 フレームワークでの THEOplayer プレイヤーアプリの実装例

THEOplayer Web SDK を統合するためのステップバイステップ

前提条件

1. Vue3 アプリ テンプレートを作成する

2. 必要なコンポーネントをインストールする

3.THEOplayer を統合する

3.1 モジュール宣言の追加 (THEOplayer.d.ts)

3.2 THEOplayer Web SDK の Player.vue を追加

3.3 Player.vue コンポーネントを App.vue に追加する

3.4 main.ts に THEOplayer の型宣言の読み込みを追加する

3.5 index.html に THEOplayer JavaScript/CSS モジュールを追加する

4. このサンプル アプリケーション コードを実行し、ブラウザで開きます

ローカルの THEOplayer Web SDK を使用する

最後に

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

ビデオストリーミングの歴史

アダプティブストリーミング

ビデオストリーミング技術の現在

ストリーミングプラットフォーム

最後に

Resources: Wowza Streaming Engine での HLS ストリーミング

はじめに

HLS プレイリスト (マニフェスト) について

HLS セグメントの長さについて

VOD ストリーミングのセグメントの長さの設定パラメーター

ライブストリーミングのセグメントの長さの設定パラメーター

HLS Audio-only ストリームの設定

VOD HLS Audio-only ストリームの設定

ライブ HLS Audio-only ストリームの設定

HLS KeyFrames-only プレイリストの設定

HLS Audioストリームの TS パッケージングの設定

VOD HLS Audio ストリームの TS パッケージングの設定

ライブ HLS Audio ストリームの TS パッケージングの設定

タイムコードに基づいたライブストリームのセグメントの番号付けの設定

Resources: Wowza Streaming Engine での MPEG-DASH ストリーミング

はじめに

MPEG-DASH MPD マニフェストについて

MPEG-DASH セグメントの長さについて

VOD ストリーミングのセグメントの長さの設定パラメーター

ライブストリーミングのセグメントの長さの設定パラメーター

MPD リダイレクト

MPD.Location リダイレクト機能

MPD HTTP リダイレクト機能

その他の設定パラーメーターについて

XML パスが /Root/Application/HTTPStreamer のパラメーター

XML パスが /Root/Application のパラメーター

Resources: Wowza Streaming Engine を使ったライブストリーミング (3)

はじめに

手順1: ライブソースの入力セキュリティの設定 (省略)

手順2: ライブトランスコーダーの設定

手順3: FFmpeg によるビデオファイルを使ったライブソースの入力

手順4: ライブストリーミング再生のテスト

まとめ

Resources: Wowza Streaming Engine を使ったライブストリーミング (2)

はじめに

手順1: ライブソースの入力セキュリティの設定 (省略)

手順2: FFmpeg によるビデオファイルを使ったライブソースの入力

手順3: SMIL ファイルの作成

手順4: ライブストリーミング再生のテスト

まとめ

1. Nuxt3 アプリテンプレートを作成する

2. Nuxt3 ソースコード群を `./src` ディレクトリに移動する

2.1. `src` ディレクトリを作成し、`app.vue` を `./src` に移動する

2.2. `tsconfig.json` を変更する

4.2 THEOplayer Web SDK の `Player.vue` を追加

4.3 `Welcome.vue` と `NuxtLogo.vue` を追加する

4.4 `src/global.d.ts` に THEOplayer の型宣言の読み込みを追加する

4.5 `app.vue` に THEOplayer JavaScript/CSS モジュールを追加する

4.5 `app.vue` のコンポーネントを変更する

5. このサンプルアプリケーションコードを実行し、ブラウザで開きます

1. Vue3 アプリテンプレートを作成する

3.2 THEOplayer Web SDK の `Player.vue` を追加

3.3 `Player.vue` コンポーネントを `App.vue` に追加する

3.4 `main.ts` に THEOplayer の型宣言の読み込みを追加する

3.5 `index.html` に THEOplayer JavaScript/CSS モジュールを追加する

4. このサンプルアプリケーションコードを実行し、ブラウザで開きます

XML パスが `/Root/Application/HTTPStreamer` のパラメーター

XML パスが `/Root/Application` のパラメーター

メディアキャッシュソースの追加

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

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

ビデオ・オンデマンドサンプルコンテンツの再生