Help us understand the problem. What is going on with this article?

AWS+hls.jsでストリーミング再生(その1)

動画を配信するためにhls.jsを使ってみました。
動画を扱ったのが初めてだったので、まとめておきます。

ストリーミング再生?HLS??

ストリーミング再生とは、本当に簡単に言うと「動画ファイルを細切れにして、ちょっとずつ読み込んで再生する方法」です。
動画(でかい)を一括で読み込んで再生すると、データの取得に時間がかかりますし、もし途中で見るのをやめるような場合はその分無駄が生じます。
ストリーミング再生では、細切れにされた動画を順番に取得して再生するので、動画を読み込みながら再生をすることが可能です。見なかった分のデータは取得しないので、一括で動画データを取得する方法と比べると、そういった意味では効率がいいと言えます。

HLSはHTTPを使用してストリーミング再生するプロトコルです。
HLSはHTTP Live Streamingの略で、Appleが開発した動画配信のプロトコルです。
HLSはプレイリストファイル(.m3u8)とセグメントファイル(.ts)ファイルで構成されます。
セグメントファイルは動画を細切れにしたもので、プレイリストファイルにはセグメントファイルをどの順番で再生するかなどの情報が書かれています。

使ったもの

今回使用したもの:point_down:
・S3:動画ファイルの置き場所
・Amazon Elastic Transcoder:mp4の動画をHLS形式に変換
・firebase:ストリーミング再生するフロント側の場所

1.動画を用意する

動画はmp4形式のものを用意しました(というか作ってもらった)。

専用のバケットを作成し、動画をアップロードします。
スクリーンショット 2019-11-29 16.33.30.png
上の画像のhls_sampleというフォルダは、Elastic TranscoderでHLS形式に変換したものを入れる予定です(現段階ではフォルダの中身は空です)。

2.HLS形式に変換する

Elastic Transcoderでmp4の動画をHLS形式に変換します。
変換するまでにやることは
1.パイプラインを作成する
2.ジョブを実行する
です。

まずはパイプラインの作成から・・・
スクリーンショット 2019-12-03 11.56.08.png
Elastic TranscoderでCreate New Pipelineをクリックします。
作成するpipelineに関する設定をします。
スクリーンショット 2019-12-03 11.58.44.png
・Pipeline Name:パイプラインの名前。パッと見て目的がわかるような名前がいいと思います。
・Input Bucket:HLS形式に変換する動画ファイルを格納しているS3バケットの名前。上記1で作成したものを指定します。
・IAM Role:このパイプライン用のロール。特別な事情が無ければ、デフォルトのままでOKです。
Configuration for Amazon S3 Bucket for Transcoded Files and Playlists以下の項目は変換後のファイルに関するものです。
・Bucket:変換したファイルを格納するバケット名。
・Storage Class:S3のストレージクラスを指定します。StandardかReduce Redundancy(低冗長化)から選択できますが、今回はデフォルトのままStandardにしました。
スクリーンショット 2019-12-03 12.15.14.png
Configuration for Amazon S3 Bucket for Thumbnailsはサムネイルに関する項目です。
・Bucket:パイプラインに送信したジョブのサムネイルを保存する用のS3バケット名を指定します。
・Storage Class:S3のストレージクラスを指定します(上と同じです)。
その他の項目はデフォルトのままです。
詳しくは公式ドキュメントをご覧ください。
ここまで設定した後、右下のCreate Pipelineを押すとパイプラインが作成されます。

さて、次はジョブを作ります。
スクリーンショット 2019-12-03 13.43.36.png
Create New Jobを押します。
Jobの詳細を設定する画面が表示されるので、
スクリーンショット 2019-12-03 19.26.31.png

今回はこのように設定しました。
上から順に各項目を見ていくと、
・Pipeline:先ほど作成したパイプラインを指定します。
・Output Key Prefix:Elastic Transcoderが生成するファイル名の先頭につける値です。今回はS3バケット内のhls_sampleというフォルダにHLS形式のファイルを出力したいので、そのように入力しています。
・input Key:S3のバケットにアップロードした、変換したいファイルの名前です。
・Preset:この変換で使用するプリセットです。今回はHLSに変換したいので、HLS_400Kを選びました。
※HLSのエンコーディング等に関することはこちらが参考になりました。
・Segment Duration:セグメントファイルの最長時間です。1~60秒の間の値を指定します。今回は10秒。
・Output Key:出力されるファイル(セグメントファイル、プレイリスト両方)の名前になります。
ただし、セグメントファイルに関しては生成されるファイルが一つではないので、その下の欄のSegment Filename Previewにあるように、Output Key+連番.tsというファイル名で保存されます。

その他の値はデフォルトです。
詳しくは公式ドキュメントをご覧ください。

ここまで設定できたら、右下のCreate New Jobをクリックします。
少し時間がかかりますが、ステータスがCompleteになれば完了です。
アウトプット先に指定したS3のバケットを確認してみると、
スクリーンショット 2019-12-03 19.53.12.png
いますね。
プレイリストファイルである.m3u8ファイルと、4つのセグメントファイル(.ts)が作成されました。
これでmp4ファイルからHLS形式のファイルに変換することができました。

長くなってしまいそうなので・・・

再生する部分は別の記事に分けます・・・
続きはこちら

参考にさせていただいた記事

大変勉強になりました。ありがとうございます。
https://qiita.com/mechamogera/items/a91848b0c3b6fe9f18f5
https://dev.classmethod.jp/references/amazon-elastic-transcoder-hls/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした