実行環境

OS:macOS Mojave 10.14.6
Node.js:12.13.1

1. FFmpeg の導入

FFmpeg は、オーディオとビデオを記録・変換・ストリーミングするためのクロスプラットフォームのソフトウェアです

www.ffmpeg.org

こちらを導入します。今回は、以下のように Homebrew を使ってインストールします。

# インストール
brew install ffmpeg

# whichコマンドでパスが通ったことを確認する
which ffmpeg
>/usr/local/bin/ffmpeg

2. 変換してみる

ストリーミングを試してみたい適当な動画ファイルを用意します。用意したら、hls 形式に変換をしてみましょう。用意したファイル名をinput.mp4として、次のコマンドで変換します。

ffmpeg -i input.mp4 -codec copy -map 0 -f segment -vbsf h264_mp4toannexb -segment_format mpegts -segment_list output.m3u8 output-%04d.ts

output.m3u8 と、output-0001.ts から連番のファイルが作成されたと思います。

f:id:toranoana-lab:20200317182913p:plain

これらが変換済みファイルです。

ffmpeg はオプションが、非常に多いです。公式ドキュメントとにらめっこして、利用者の方の記事など参考にしながら使うことをおすすめします。

3. ビューアーを作ってみる

npm init -y
# http-serverをインストール
npm install http-server --save-dev

# http-serverによって配信されるディレクトリ作成
mkdir public

# ストリーミングされるファイルを保管するディレクトリ作成
mkdir public/video

# ストリーミング形式変換前動画ファイル保管先ディレクトリ作成
mkdir input

インストールしたhttp-serverパッケージは、シンプルな http サーバーです。

www.npmjs.com

筆者は、HTML や CSS 、JavaScript のちょっとした動作確認するようなときは、こちらをよく使っています。

ここまで出来たら、ストリーミングファイルのビューアーにする WEB ページを作ります。 public/index.htmlを作成します。

以下のようにしました。

<html>
  <head>
    <meta charset="utf-8" />
    <title>ストリーミング</title>
    <link
      href="https://unpkg.com/video.js/dist/video-js.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
  </head>
  <body>
    <video
      id="view"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls
      width="640"
      height="360"
      preload="auto"
    >
      <source src="./video/output.m3u8" type="application/x-mpegURL" />
    </video>
    <script type="text/javascript">
      videojs("view");
    </script>
  </body>
</html>

CDNを利用して、video.jsを利用しています。 video.jsは、オープンソースHTML5プレーヤーフレームワークです。

videojs.com

作成できたら、今回は変換前ファイルをinputディレクトリに保管し、以下のコマンドで、変換します。

ffmpeg -i input/input.mp4 -codec copy -map 0 -f segment -vbsf h264_mp4toannexb -segment_format mpegts -segment_list public/video/output.m3u8 public/video/output-%04d.ts

コマンドの実行により、public/videoに変換済みファイル郡が保管されます。

ローカルサーバーを起動します。

npx http-server -p 3000

起動出来たら、localhost:3000にアクセスします。アクセスすると以下の画面が表示されるので、ボタンを押すと再生が開始されます。

f:id:toranoana-lab:20200317183912g:plain

4. 少し確認してみる

動画の再生ができましたが、ストリーミングできているのか、少々わかりにくいかもしれません。開発者ツールで、動きを確認してみます。

Chrome の開発者ツールのNetwork タブを開きます。

ページの初期表示段階では、以下がロードされています。分割された動画ファイルは、output-0000.ts だけがダウンロードされています。

f:id:toranoana-lab:20200317184610p:plain

再生を開始すると、output-0001.ts 以降がダウンロードされます。

f:id:toranoana-lab:20200317184604p:plain

速度（Network Conditionの設定）を Slow3Gにするなど、遅延させると順次ダウンロードしている様子がややわかりやすくなります。 f:id:toranoana-lab:20200317184250g:plain ストリーミング用に分割されたファイルは、一個単位では非常に容量が小さく、それぞれのダウンロードは一瞬で終わることが確認できます。

まとめ

FFmpegを使うことで、お手元の開発機でも動画をストリーミングの形式に変換できます。また、開発者ツールでネットワークの速度遅延を設定することで、ストリーミングの挙動を確認することができました。

今回Macで実施しましたが、FFmpegはWindows版もあるのでWindowsをご使用している方でも試していただけます。本記事内で使用しているgif画像も、実はFFmpegで作成しています。「ブログ記事内に動画を使いたいが、動画は対応していない」というときにも役に立つので、ぜひ触ってみてください。