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

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

目次

参考

ffmpeg の導入

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

準備(windows 環境)

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

1
2
3
4
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を作成します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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 を用いて変換し、配信するといったことができそうです。

ではでは。