IMHO

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

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

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

はじめに前回の記事では 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 Linx 上にインストールされた Wowza Streaming Engine を対象とします。 HTTPS サーバー証明書の発行のまえに HTTPS サーバー証明書を発行するにあたって、いくつかのケースがあります。...

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

[この記事は 2023/02/01 に更新されました] 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 アカウントを作成し、トライアルに参加することができます。登録が完了すると、メールが届き、ライセンスキーを入手することができます。...

このサイトについて

このサイトこのサイトは Hugo というオープンソースを利用して、作成されています。 Hugo とは　Go 言語で書かれた静的 (スタティック) サイトジェネレーターです。 WordPress のようなデータベースを利用するウェブサイトとは異なり、データベースを使用をしません。 Markdown 形式のコンテンツとページをデザインしたテンプレート (HTMLテンプレートやスタイルシート) を利用して、静的な (スタティックな) HTMLページを生成しブログを作成します。静的サイトジェネレーター (SSG = Static Site Generator) の利点は、サイトのビューワーからページリクエストに対してすでに生成済みの完成した HTML ページで応答するため、コンテンツのデータベースへの問い合わせ等の遅延がなく、非常に高速なページレスポンスが可能なことです。また、各ページリクエストに対して Web サーバーでの (HTTPレスポンス以外の) 特別なプロセスを必要としないため、Web コンテンツの配信のスケーラービリティが確保できる点も重要な利点です。さらに、SEO (Search Engine Optimization: サーチエンジン最適化) の観点でも、静的なWebページは有利に働きます。このサイトで配信するWebコンテンツはドキュメントやアイディアなどが多いため、このような SSG の利点を踏まえて SSG を利用することにしたのですが、オープンソースであり、シンプルなアーキテクチャであること高速なサイトビルド (ページ生成) 時間で実現できること開発とユーザーのコミュニティが活発で、多くのデザインテンプレートがあることという条件を元にいくつかの SSG を比較したところ、Hugo がこれらの条件に合致したため、Hugoを利用することにしました。デザインテンプレートこのサイトは、PaperMod という、Hugo コミュニティで一般公開されている Hugo テーマ (デザインテンプレート) を利用しています。デザインテンプレートは、Hugoの技術ドキュメントに従って自分の好みのデザインや機能を備えたものを開発することも可能なのですが、コミュニティ内のデザインテンプレートの中でシンプルで見た目がわかりやすいデザインのものでよいものがあったので、このデザインを選びました。商用の技術ブログサイトなどには、「いいね」機能などの様々な便利機能が追加されたりしていますが、このデザインテンプレートはソースコードが GitHub で公開されているため、もし必要になったら公開されたソースコードベースで機能を追加したりすることも可能です。最初はテンプレートに備わった標準の機能でスタートしようと考えて始めています。「あるものを活用する、なければ、開発する」オープンソースのいいところですね。サイトの公開このサイトは Netlify を利用しています。...

Hugo マークダウン構文ガイド

この内容は、Hugo のサンプルサイト用の記事として用意された記事を翻訳したものです。備忘録もかねてこの記事をサイトのブログ記事として登録しています。この記事では、Hugo コンテンツファイルで使用できる基本的な Markdown 構文のサンプルを提供します。また、基本的な HTML 要素が Hugo テーマで CSS で装飾されているかどうかも示します。 ...