2020-02-24

ストリーミングを試してみる

ストリーミングのためには、ストリーミングのための形式に動画の変換が必要。
変換に使えるツールと、再生用のライブラリを見つけたので、やってみる。

参考

ffmpeg の導入

mp4 からストリーミングのための.m3u8を作成するための、ffmpegを導入します。
導入については、新卒エンジニアの開発日記 - FFmpeg で動画変換！各 OS ごとのインストール方法と使い方まとめでまとめられているとおりです。
こちらの windows 環境向けを参考にして導入しました。

準備(windows 環境)

ffmpeg の導入ができたら、サーバーを用意します。
任意のディレクトリで、以下を入力してゆきます。

npm init -y
npm install http-server --save-dev
mkdir public
mkdir public\viddeo

これができたら、public\viddeoの中に動画の元データを置いてあげます。
今回は、input.mp4 とします。

以下のコマンドを用いて、.m3u8ファイルと.tsファイルを作成します。

1	ffmpeg -i public\video\input.mp4 -codec copy -map 0 -f segment -vbsf h264_mp4toannexb -segment_format mpegts -segment_time 5 -segment_list public\video\output.m3u8 public\video\output-%03d.ts

このコマンドは、- mp4 を変換して hls ストリーミング再生を実装してみるを参考にしました。
実行により、以下のファイルが作成されました。

1
2
3

output-000.ts
output-001.ts
output.m3u8

表示するページの作成

以下のように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"
      controls
      width="640"
      height="360"
      preload="auto"
      poster="poster.png"
    >
      <source src="./video/output.m3u8" type="application/x-mpegURL" />
    </video>
    <script type="text/javascript">
      var player = videojs("view", {
        html5: {
          hls: {
            withCredentials: true,
          },
        },
      });
      player.play();
    </script>
  </body>
</html>

video タグにサンプルを参考にclass="video-js vjs-default-skin vjs-big-play-centered"を割り当てています。
こちらの中で、class=”video-js”は必須でした。動画プレーヤーの UI が画面上に広がってしまう状況になりました。
サンプルでは flash へのオプション設定も行っていましたが、html5 だけにしました。

確認

npx http-serverでサーバーを起動します。
起動出来たら、localhost:8080にアクセスします。

アクセスした様子は以下の通り。

poster="poster.png"を割り当てたので、再生前は「動画」と書かれた画像が表示され、再生ボタンを押すと表示が始まります。
player.play();を行っているので、自動再生が基本ですが、私は自動再生を禁止するアドオンを Chrome に入れているので自動再生されません。
アドオンを入れていない Edge などでは、自動再生します。
Chrome でも一度再生ボタンを押した後のリロードでは自動再生します。

再生している動画は、SAKURAさんで公開されているフリー素材を使用しています。

今回は mp4 をストリーミング用にファイルを変換して、ストリーミング再生する WEB ページを作ってみました。
ffmpeg ですが、mp4 から gif 画像も作れたりと面白いツールだと感じました。(まだ全然使いこなせていませんが)。
10 秒前後のサンプル動画なので、問題ありませんが、長い動画になるほどストリーミングにする意義が出てくるはずです。

動画をアップロードして、別タスクで ffmpeg を用いて変換し、配信するといったことができそうです。

ではでは。

Octo's blog

ストリーミングを試してみる

目次

参考

ffmpeg の導入

準備(windows 環境)

表示するページの作成

確認