CentOS7+Apache2.4+Python3.6環境でmp4動画をHLS配信(video.js)

昨今ではWebサイト上で動画を再生させることも少なくないですが、通信速度に合わせて遅延なくHTTPプロトコルで送信できるHLSによる動画配信をしてみましたので、手順をまとめておきます。

今回の技術は主にWebサイト上の背景を動画にしたりする用途で等で使えます。

環境・前提条件・使用技術など

CentoOS7.6
Apache2.4
Python3.6

今回は、上記の環境が準備済みの状況から始めます。

Pythonのインストールは以下の記事を参考にしてください。

Python3.6+Django2.2のインストール・アプリ生成【Djangoファイルの基本構成】

環境確認

$ cat /etc/redhat-release 
CentOS Linux release 7.6.1810 (Core) 

# apachectl -V
Server version: Apache/2.4.28 (Unix)

$ python3.6 --version
Python 3.6.8

$ cat /etc/redhat-release

CentOS Linux release 7.6.1810 (Core)

# apachectl -V

Server version: Apache/2.4.28 (Unix)

$ python3.6 --version

Python 3.6.8

▶▶▶ AWSより安くクラウドVPS

HLS形式とは？

HLS形式は、米アップルによって開発された、動画をストリーミング送信するためのプロトコルの1つで、HTTPライブストリーミングを意味する英語「HTTP Live Streaming」の略から来ています。

元動画を細切れにした「MPEG-2 TS」ファイルの再生順や、暗号化の鍵、コンテンツのバリエーションなどを書き込んだM3U8形式の「プレイリスト」に記載しておきます。
これらのファイルをWebサーバーから順次配信することで、ネット環境に応じて低ビットレートでも再生しやすくなっています。

HLS形式についての詳細は以下などをご覧下さい。
https://k-tai.watch.impress.co.jp/docs/column/keyword/515059.html

今回の設定手順

ffmpegのインストール
配信したいmp4動画をffmpegでM3U8形式に分割
video.jsの設置

ffmpegのインストール

まず、配信したい動画(mp4形式)を分割するためのツールffmpegをインストールします。

インストール手順は以下で紹介されていたものを参考にさせて頂きました。
https://fukatsu.tech/centos-ffmpeg

Nuxリポジトリを追加

NuxリポジトリはEPELリポジトリに依存しているので、EPELリポジトリが有効になっていない時は、以下のように有効化します。

$ sudo yum install epel-release

1	$ sudo yum install epel-release

Nuxリポジトリを有効化

Nuxリポジトリを有効にしてGPGキーをインポートします。

$ sudo rpm -v --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro
$ sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm

1 2	$ sudo rpm -v --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro $ sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm

yumでインストール

リポジトリが有効になったら、FFmpegをインストールします。

$ sudo yum -y install ffmpeg ffmpeg-devel

1	$ sudo yum -y install ffmpeg ffmpeg-devel

インストール・バージョンの確認

$ ffmpeg -version
ffmpeg version 2.8.15 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-36)
configuration: --prefix=/usr --bindir=/usr/bin --datadir=/usr/share/ffmpeg --incdir=/usr/include/ffmpeg --libdir=/usr/lib64 --mandir=/usr/share/man --arch=x86_64 --optflags='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic' --extra-ldflags='-Wl,-z,relro ' --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libvo-amrwbenc --enable-version3 --enable-bzlib --disable-crystalhd --enable-gnutls --enable-ladspa --enable-libass --enable-libcdio --enable-libdc1394 --enable-libfdk-aac --enable-nonfree --disable-indev=jack --enable-libfreetype --enable-libgsm --enable-libmp3lame --enable-openal --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libvorbis --enable-libv4l2 --enable-libx264 --enable-libx265 --enable-libxvid --enable-x11grab --enable-avfilter --enable-avresample --enable-postproc --enable-pthreads --disable-static --enable-shared --enable-gpl --disable-debug --disable-stripping --shlibdir=/usr/lib64 --enable-runtime-cpudetect
libavutil      54. 31.100 / 54. 31.100
libavcodec     56. 60.100 / 56. 60.100
libavformat    56. 40.101 / 56. 40.101
libavdevice    56.  4.100 / 56.  4.100
libavfilter     5. 40.101 /  5. 40.101
libavresample   2.  1.  0 /  2.  1.  0
libswscale      3.  1.101 /  3.  1.101
libswresample   1.  2.101 /  1.  2.101
libpostproc    53.  3.100 / 53.  3.100

$ ffmpeg -version

built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-36)

configuration: --prefix=/usr --bindir=/usr/bin --datadir=/usr/share/ffmpeg --incdir=/usr/include/ffmpeg --libdir=/usr/lib64 --mandir=/usr/share/man --arch=x86_64 --optflags='-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector-strong --param=ssp-buffer-size=4 -grecord-gcc-switches -m64 -mtune=generic' --extra-ldflags='-Wl,-z,relro ' --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libvo-amrwbenc --enable-version3 --enable-bzlib --disable-crystalhd --enable-gnutls --enable-ladspa --enable-libass --enable-libcdio --enable-libdc1394 --enable-libfdk-aac --enable-nonfree --disable-indev=jack --enable-libfreetype --enable-libgsm --enable-libmp3lame --enable-openal --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libvorbis --enable-libv4l2 --enable-libx264 --enable-libx265 --enable-libxvid --enable-x11grab --enable-avfilter --enable-avresample --enable-postproc --enable-pthreads --disable-static --enable-shared --enable-gpl --disable-debug --disable-stripping --shlibdir=/usr/lib64 --enable-runtime-cpudetect

libavutil 54. 31.100 / 54. 31.100

libavcodec 56. 60.100 / 56. 60.100

libavformat 56. 40.101 / 56. 40.101

libavdevice 56. 4.100 / 56. 4.100

libavfilter 5. 40.101 / 5. 40.101

libavresample 2. 1. 0 / 2. 1. 0

libswscale 3. 1.101 / 3. 1.101

libswresample 1. 2.101 / 1. 2.101

libpostproc 53. 3.100 / 53. 3.100

以上でffmpegのインストールは完了です。

配信したいmp4動画をffmpegでM3U8形式に分割

ffmpegのインストールが完了したら、ffmpegを使ってmp4形式の動画をM3U8形式に分割します。

以下のサイトを参考に、m3u8 と ts を作るところまで実施します。
https://k-tai.watch.impress.co.jp/docs/column/keyword/515059.html

インストールもそうなのですが、内容は上記サイトをほぼそのままなので割愛します。

“HLSの録画”という部分は今回の対象外なので”HLSの作成”というところだけ実施し、M3U8形式のファイル作成まで実施しました。

video.jsの活用

一応、ここまでで作成したM3U8形式の動画をHTML上のvideoタグで指定すれば再生はされます。

しかしながら、HLSは先述の通り、米アップル社によって開発されたプロトコルなので、ブラウザによって再生出来るものと出来ないものがあります。

具体的には、EdgeやSafariでは再生出来ますが、ChromeやFirefoxではネイティブでは再生できません。

そこで、ChromeやFirefoxでも再生できるようにするにvideo.jsというライブラリを活用します。

video.jsはバージョンによって設定が少し異なるようです。以前は複数のJSファイルの設置が必要だったようですが、最新版ではvideo.jsだけの読み込みで可能となっています。

video.jsは以下GitHubより最新版をダウンロードしてください。

GitHub

video.jsを任意のディレクトリに設置し、HTML上から指定すると以下のような形になります。

<html>
  <head>
    ...
    <link href="[任意URL]/video-js.css" rel="stylesheet">
  </head>
  <body>
    <video-js id=example-video class="vjs-default-skin covervid-video" data-setup='{"fluid": true}' muted autoplay loop>
      <source src="[任意URL]/hls/playlist.m3u8" type="application/x-mpegURL">
    </video-js>

    <script src="[任意URL]/video.min.js"></script>
    <script>
      var player = videojs('example-video');
    </script>
  </body>
</html>

<html>

<head>

...

</head>

<body>

<video-js id=example-video class="vjs-default-skin covervid-video" data-setup='{"fluid": true}' muted autoplay loop>

</video-js>

var player = videojs('example-video');

</script>

</body>

</html>

[任意URL]の部分は各環境に合わせてください。

今回はWEBサイトの背景用なので(上記サンプルは背景指定ではありません)、video-jsタグのオプションは横幅をブラウザサイズとし、自動・ループ再生でChromeやFirefoxでも再生できる指定です。

video.jsの設定方法はチュートリアルをご覧下さい。

一応、こちらの設定で意図通りHLSの分割読込形式でWEBサイトの背景の動画再生ができました。

画像では数回目のアクセスなのでdisk cacheになっていますが、chromeでも再生可能でした。