はじめに

私が行っている業務で試験的にストリーミング配信をやってみようとなったので、S3 を使って簡易的なストリーミング配信のテストをしたので記事にしてみました。

ストリーミング配信とは

インターネットを介した動画配信や音楽配信の方式で、データをダウンロードして視聴開始するのではなく、データを受信しながら同時に随時再生していくことができることが特徴です。

メリット

インターネット環境があればすぐに視聴することができる
ストレージの空きが不要
セキュアな配信ができる

デメリット

ネットが安定している必要がある

ストリーミング再生をやってみよう

今回は AWS の S3 を使ってストリーミング再生をやってみました。
方法は非常に簡単です。
まずは input.mp4 の動画を用意してください。

そして下記のコマンドを実行します。

ffmpeg -i input.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls output.m3u8

これを実行すると m3u8 ファイルと ts ファイルが複数生成されます。

ffmpeg

オープンソースのマルチメディアフレームワークで、動画や音声を変換処理を行うことができるものです。
主な機能は以下のようなことができます。

動画や音声のデコード
フォーマットの変換
動画の加工

使い方はターミナルで実行かライブラリとしてコードの中で行うこともできます。
今回はターミナルを用いて行いました。

上記のコマンドを見ると hls や m3u8 というコマンドが含まれています。

hls とは

hls とは配信規格のことで http で動画配信を可能にするものです。
http プロトコルで動画配信することができるので、専用のサーバーを用意することがないのも特徴です。
m3u8 と ts ファイルで配信をします。

分割されたビデオファイルを短いセグメントごとにダウンロードして再生することでストリーミング再生を実現しており、オンラインビデオ配信の主要な手段としなっています。

m3u8 とは

HLS 配信をするためのプレイリストファイルです。
これは動画を細切れに分割したファイル（ts ファイル）の URL が記録されています。
m3u8 ファイルに従って、ts ファイルを取得して再生をしています。
最初私は m3u8 ファイルがあれば再生できると思い込んでいましたが、m3u8 ファイル自体はテキストファイルになるため再生することはできません。

あたらめてコマンドの解説

上記の説明を踏まえると ffmpeg を使って mp4 の動画を m3u8 ファイルに書き換えていることがわかります。

ffmpeg -i input.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls output.m3u8

ffmpeg
ffmpeg ライブラリを使用します。
-i input.mp4
-iは input の略で入力したいファイルを指定しています。
-codec: copy
オーディオとビデオをそのままコピーすることを意味しています。
-start_number 0
HLS セグメントファイルの開始番号を 0 にしています。output0.ts から保存されるようになります。
-hls_time 10
HLS セグメントの長さを 10 秒に設定します。
-hls_list_size 0
プレイリストに含めれる最大のセグメント数を指定します。０は無限を意味しますので、全てのセグメントがファイルに含まれるまでを意味します。
-f hls
出力フォーマットを HLS に指定します。
output.m3u8
出力するファイル名を指定します。

このようにしてストリーミング再生に必要なファイルを作成します。

ストリーミング再生用の HTML ファイルの作成

下記のようにしてコードを作成しました。src はそれぞれのコードに編集する必要がありますが、基本的には以下のコードで大丈夫です。

<html>

<head>
    <title>VHS de HLS</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
</head>

<body>
    <video-js id=example-video width=1280 height=720 class="vjs-default-skin" controls>
        <source src="https://mybakettest.s3.ap-northeast-1.amazonaws.com/output/output.m3u8"
            type="application/x-mpegURL">
    </video-js>
    <script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
    <script>
        var player = videojs('example-video');
    </script>
</body>

</html>

S3 にアップしよう！

AWS の登録方法はこちらの記事では割愛させていただきます。
マネコンから S3 を開いてアップロードの行います。
アップロードするファイルは先ほど作成した html ファイル（ここでは smaple.html）と ffmpeg で作成した m3u8 ファイルと ts ファイルを選択します。

S3 にアップした動画の確認

無事に動画を再生することができました！

終わりに

NetflixやYoutubeなど動画サービスはよく使用する技術だったので仕組みを知ることができて嬉しかったです！また、この喜びを読んでくださった方にも伝わる嬉しいです！