CloudFront + S3を用いて動画をストリーミング形式で再生させたい

[何をしたかったか]
・急遽1カ月程度の期間限定動画公開サイトを作成したいとお願いされた。
 但し、金銭授受が発生するため、Youtubeが使えない。
 (限定公開する際に通常はアクセス権限を金銭による制御を行う事は禁止されている)
・既に金銭授受は完了しているため、新たに料金徴収はできない。
 (最悪料金はこちらで支払い、Vimeoを使ってもらうという手段も考えたが見合わせた)
・動画ファイルがそれなりに大きいので、ストリーム再生を行う必要がある。
・とはいえ、URLを知っている人であれば誰でもアクセス可能なレベルのアクセス制限で構わない

[対応方法]
自身の知っている知識では、AWSかAzureのどちらかで構築を考えたが、以下を理由に今回はAWSで構築する事にした。
 ・AWSの方が普段から使っているため、手が早く動かせる(12時間以内位で用意する必要があったため)
 ・S3 + CroudFrontという構成は良く聞くし、世の中も大半がそのノウハウベースが多かったので
 ・Azureの通信料金が意外に高そうであったため

[調べながら対応した内容]
●動画編集方法
これは以前調べていた&使った事があったので調べながらという部類ではないが一応記載。
無料で使えそうなのは、AviUtl位であるが、正直超玄人向きで、とりあえずパワポ感覚で作成したいいう人には全く向かない(私も何度か使ったが苦行であった…)。
他の無料版は、動画作成時間が5分しか作れない、でかいバナーが入る、動画編集できても出力解像度が酷いなどで基本サンプル利用みたいなものばかりである。
そのため、ここは悩まずにさっさとソフト決めて作り始めた方が結果的には時間の無駄にならない。
なお、当方はサブスクリプション形式もあるPower Directorを使う事にした。
最初は多少時間かかったが、1時間もすればパワポ感覚で使える様になった。

●ストリーム動画の対応方法
S3でmp4のファイルをそのまま動画配置したのでは、ストリーム再生にはならない。
CloudFrontをRTMPとして公開すればmp4のままでもストリーム再生になるっぽいが、iOSで再生が困難っぽそうなのと、今後ももしかしたら利用したいという要望があったため、この方法はやめることにした。
(CloudFrontのRTMP形式は2020/12/31でEOLのため)
よって、HTS(HTTP Live Streaming)形式でストリーム対応を行う事にした。
よくサイトなどで紹介されている方法では、S3(mp4) → Elemental MediaConvert → S3(M3U8)形式に変換する方法が紹介されているが、今回は出来るだけ安く対応したかった。
結果、私のPCにVideoProcというソフトが何かのタイミングでインストールされていたので、以下の方法で変換が行えた。
動画変換&動画編集&音声変換の方法|VideoProc使い方

●アクセス権限
今回はURLさえ知っていればアクセスできるレベルなので、アクセス権限の設定は不要であった。
そのため、CloudFrontのRestrict Viewer Access(Use Signed URLs or Signed Cookies)の設定はoffにしておく必要があったのに、onにしてしまっていたので多少時間ロスした。

●動画URLの決定方法
S3に直接アクセスする場合のURLは、S3 Management Consoleから対象オブジェクトのURLを確認するなど簡単に把握することができる。
一方、今までCloudFront経由でS3のオブジェクトにアクセスした事が無かったので、少し調べないと分からなかった。
結果、アクセス権限の設定さえ合っていれば、 https:///<フォルダ名>/<オブジェクト名> でアクセスできた。
(バケット名はドメイン名の部分で変換されるため不要、フォルダ名はバケット直下のオブジェクトの場合は不要だがフォルダを掘ってる場合は必要)

●動画再生方法
HTSのフォーマットであるM3U8は、iOSではそのまま再生できるが、Windowsなどの機器ではそのまま再生することができない。
以下の参考リンクにvideo.jsを用いてブラウザで表示する方法紹介されていたので、それを利用することでブラウザ上で再生することができた。
なお、動画再生用のHTMLと、動画の場所は同じところに設定したので、CORSの設定は特に行わなかったが無事再生できた。

●その他
・Origin Pathを設定すれば、コンテキストパスを設定することができるが、S3を利用する場合は空にしておけばいいと思う。
ディストリビューションを作成または更新する場合に指定する値 - Amazon CloudFront
ドメインのみのアクセスした場合の設定は、CloudFrontのDefault Root Objectで行える。
 なお、ドメインのみのアクセスなどは考慮しないで今回は良いので、エラーページを用意してそちらに振った。
・ファイルストレージをS3以外に利用できれば動画ファイルだけ配置するだけにできるのでは?と思ったが、以下が理由で駄目だと思い試していない。
 Dropboxなどのファイルストレージサービス:オブジェクト単位にランダムなURLが生成されるため、M3U8形式はファイル分割されかつ連番でアクセスできないと多分駄目だと思うので諦めた(zip化したり、自力でインデックス書き換えるなどすればできるのかもしれない)
 Githubなどのリポジトリサービス:ブラウザでURLアクセスしても実行形式にならないため

[参考リンク]
S3 + CloudFrontでまずはおったてるというところがとても参考になりました。
S3+CloudFrontで静的サイトを配信する - Qiita
上記構成でまずは構築して、このサイト見ながら少しずつストリーム動画再生できる様に組み替えていきました。
AWS Elemental MediaConvertでストリーミング配信(前編) - 虎の穴開発室ブログ
Cloud Frontの入力設定に関して、日本語でそれぞれの入力値に関する記載が行われていた。
そんなに参照はしなかったが、もしもの時に参考になるかと思い、メモ。
AWS CloudFront | STAY KOBE
まじめに作るならこれ位はしないと駄目やけど今回の要件としてはオーバースペックだったので試してないです。
www.datastadium.co.jp

【最新版】PowerDirector 18 Ultra 通常版

【最新版】PowerDirector 18 Ultra 通常版

  • 発売日: 2019/10/18
  • メディア: DVD-ROM