虎の穴開発室ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

MENU

ローカル環境でストリーミングをとりあえず試したい

こんにちは、虎の穴ラボのおっくんです。

これまで虎の穴開発室ブログで、AWS Elemental MediaConvert を使った動画ストリーミングについての記事を2件公開しています。

toranoana-lab.hatenablog.com

toranoana-lab.hatenablog.com

今回は、もっと手軽にお手元のローカル環境だけでとりあえずストリーミングを試してみたい方に向けて、FFmpeg でのファイル変換を紹介したいと思います。

実行環境

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で作成しています。 「ブログ記事内に動画を使いたいが、動画は対応していない」というときにも役に立つので、ぜひ触ってみてください。

P.S

残念ながら、COVID-19の感染被害の防止の為中止となった技術書典ですが、虎の穴ラボでは用意していた同人誌を技術書典 応援祭にて0円にて頒布しております。 ぜひ御覧ください。 techbookfest.org

加えて今回は、有償版の同人誌も作成しております。Go、Kotlin、Rustに関連する内容をまとめた、内容の濃い薄い本になります。 こちらも、ぜひ入手してお楽しみください。 techbookfest.org

虎の穴ラボではオタクなエンジニアを大募集中です。
3/25にオンラインで「とらのあな採用説明会」を実施することとなりました。
普段の採用説明会は場所が遠くて参加が難しいという方、虎の穴のエンジニアに興味がある方は是非お気軽にご参加ください。

yumenosora.connpass.com

また、「まず業務について聞いてみたい」という方は、カジュアル面談も実施していますので、こちらもフォームから申込みをお願いします。
虎の穴ラボのエンジニアが、ざっくばらんに業務についての質問から「今季何見ました?」というお話まで何でもお応えします。

WantedlyLAPLASでの採用も行っております)

yumenosora.co.jp

news.toranoana.jp