CloudFrontとS3でHLSの動画配信を行う (動画サイト構築までの道①)
はじめに
このシリーズでは React を利用して、ストリーミング動画サイトを構築するために必要な動画周りの配信について解説していくシリーズになります
社内で教育動画(勉強会の録画)などをコンテンツとしてまとめておいて誰でも見れたら良いなと思い、サイト構築を行おうと色々調べた中でストリーミング配信の仕方を説明しているサイトがかなり古いものばかり&説明がわかりづらいと思ったのでハンズオン形式でまとめていきたいと思います
今回はストリーミング再生に必須なHLSというファイルを作成して、React で実際に再生するところまで行いたいと思います。
環境
VSCode
Ubuntu 20.04 (WSL2)
Docker 20.10.12
docker-compose version v2.2.3
git version 2.25.1
AWS で HLS 形式の動画を配信する
まずは HLS 形式の動画配信の設定をしていきます
HLS についてわからない方は以下が参考になるかと思います
今回は S3 に HLS 形式の動画を設置して、CloudFront を通じて React に動画を表示していく構成でやっていきます
1. S3 の準備
AWS コンソールを開いて、「S3」と検索します
「バケット作成」をクリック
「バケット名」に名前を設定します。ここでは「streaminghls-1112」としました。バケット名はすべてのバケットで一意にする必要がありまので各自でつけてください。このあとの「streminghl-1122」はつけた名前で読み替えてください
「バケットを作成」をクリックします
作成に成功したので、一覧から「streaminghls-1112」をクリックします
「フォルダを作成」をクリック
「フォルダ名」に「input」といれて「フォルダ作成」をクリック
同じ要領で「output」というフォルダも作成します
このような状態になっていれば大丈夫です
次に S3 の CORS の設定を行います。ここで CORS の設定を行うことでこのあとlocalhost:3000からアクセスしたときにエラーにならないようにします
「アクセス許可」をクリックします
一番下の「Cross-Origin-Resource Sharing(CORS)」の「編集」をクリックします
エディタに以下を貼り付けます
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"Access-Control-Allow-Origin"
]
}
]
「変更の保存」をクリックします
ここでは CloudFront からのアクセスに対して許可をして、CORS が許可されているというヘッダーを送るように設定しています
最後に「input ディレクトリ」に今回配信する動画を設置します。
(GitHub に動画を test.mp4 という動画を用意しています)
「input ディレクトリ」に移動して「アップロード」をクリック
「ファイルを追加」をクリック
ダウンロードした「test.mp4」を選択して「アップロード」をクリック
ここまでで S3 の準備は終了です
CloudFront の設定
AWS コンソールから「CloudFront」を検索
「ディストリビューションを作成」をクリック
| 項目 | 値 |
|---|---|
| オリジンドメイン | streaminghls-1112.s3.ap-northeast-1.amazonaws.com |
| S3 バケットアクセス | Legacy Access Identity |
| オリジンアクセスアイデンティティ | 新しい OAI を作成をクリック |
| バケットポリシー | はい、バケットポリシーを自動で更新します |
| 項目 | 値 |
|---|---|
| ビューワープロトコルポリシー | Redirect HTTP to HTTPS |
| キャッシュキーとオリジンリクエスト | Legacy cache settings |
| ヘッダー | 次のヘッダーを含める →Origin を選択 |
| レスポンスヘッダーポリシー - オプション | SimpleCORS |
ここで CORS 対応を行っています
レスポンスで SimpleCORS を返すことで Access-Control-Allow-Origin をクライアントに返すことができます
「ディストリビューションを作成」をクリック
これで CloudFront は作成できました
HLS 動画を作成する
現在 input フォルダにあるのはmp4のファイルなのでHLS形式に変換します
AWS コンソールから「MediaConvert」を検索します
「いますぐ始める」をクリック
| 項目 | 値 |
|---|---|
| 入力ファイル URL | s3://streaminghls-1112/input/test.mp4 |
左メニューから「出力グループ」の「追加」をクリック
「Apple HLS」を選択して「選択」をクリック
| 項目 | 値 |
|---|---|
| 送信先 | s3://streaminghls-1112/output/ |
左メニューから 「H264.AAC」をクリック
| 項目 | 値 |
|---|---|
| 名前修飾子 | test |
| 最大ビットレート (ビット/秒) | 500000 |
左メニューから「AWS の統合」をクリック
| 項目 | 値 |
|---|---|
| サービスロールの制御 | 新しいサービスロールを作成し、完全なる... |
「作成」をクリックして、しばらくまってから output フォルダにアクセスするとファイルが作成されています
React で配信を表示する
以下のリポジトリをクローンします
$ cd chapter1
$ docker-compose run --rm app yarn
$ docker-compose up
ここではChakuraUIと配信を表示するためにreact-playerを利用しています
/chapter1/src/App.tsxを開きます
import { Box } from "@chakra-ui/react";
import ReactPlayer from "react-player";
function App() {
return (
<>
<Box>
<h1>動画再生アプリ</h1>
<ReactPlayer
url={"[cloudfrontのアドレス]/output/test.m3u8"}
id="MainPlay"
playing
loop
controls={true}
width="1280px"
height="720px"
/>
</Box>
</>
);
}
export default App;
[CloudFrontのディストリビューションドメイン名]に各自の CloudFront のドメインに置き換えます
「CloudFront」から作成したディストリビューションをクリックして確認します
<ReactPlayer
url={"https://d13pitkuolwx3f.cloudfront.net/output/test.m3u8"}
id="MainPlay"
playing
loop
controls={true}
width="1280px"
height="720px"
/>
そして、localhost:3000にアクセスします
動画が表示できていれば成功です
表示されていない場合は CORS あたりでエラーがでているのでデベロッパーツールで確認して、再度 CloudFront,S3 の設定を確認してみてください
おわりに
今回は HLS を表示するところまで行いました
思ったよりも情報が古かったり、わかりづらかったりで時間がかかってしまいましたがなんとか表示までいけました
次回は Lambda を利用して S3 に動画をアップロードすると output ディレクトリに HLS が変換されてアップロードされる仕組みを作りたいと思います
今回利用したリポジトリは以下になります。
Discussion