2020年11月9日月曜日

HLSでFlashPlayerを使用しないwebストリーミング配信環境の構築(さくらのクラウド,Centos, Nginx,FFmpeg) | ライタス株式会社

こんにちわ。
10月より新入社員として入社しました田所です。

前回記事にしました、さくらのクラウド上で構築したストリーミングサーバーを更に進化させていきたい思います!!
前回のストリーミングサーバーの構築記事↓
https://blog.litus.co.jp/2020/10/centosnginx.html


前回構築したストーリングサーバーでは再生するにはFlashPlayerが必要でした。
FlashPlayerは2020年にサポート終了することもありますし、Chromeでは再生するにはいちいち許可したりする必要があり、なるだけ使用は避けたい、というところで終了しました。
なので今回はこのRTMPを使用したストリーミングサーバーを生かしつつ、FlashPlayerを使用しないでストリーミング配信できる環境に進化させます!
具体的にはHLS (HTTP Live Streaming)というプロトコルを使用します。
↓参考記事
https://engineer.dena.com/posts/2018.12/knowledge-for-livestreaming
.m3u8っていう拡張子のデータに映像を記録したプレイリストがはいってるわけですね。
なるほど、なるほど。この.m3u8の配信映像データがあれば、いい感じにwebで動画を再生できるというわけ
例のごとく前例はもちろんたくさんありました。
FFmpegというライブラリを使います。
こいつをNginxと組み合わせることで PCからRTMP配信→Nginx経由でFFmpegに.m3u8のデータを生成してもらう→.m3u8データを再生するJavaScriptコードが入ったHTMLを配置(Nginxのwebサーバー)
って感じです。
というわけで今回もイメージを作成↓
基本は前回のさくらのクラウドの環境をそのまま使って
  • FFmpegをインストール
  • nginx.conf書き換え(FFmpegを実行する旨等記載)
  • htmlファイルの書き換え
これらの追加作業をするだけです。

今回の参考にさせていただいた記事
https://qiita.com/khagi/items/b99f5a36846d9ab65daa
https://qiita.com/nabeyaki/items/9ddece8231af8e691c3a

さっそく行きましょう!!


1.FFmpegをインストール

前回の記事の通りさくらクラウドのサーバーにSSHで入った所から始めます


FFmpegをダウンロード
FFmpeg Static Builds
cd /usr/local/share/
wget https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-arm64-static.tar.xz
tar Jxf ffmpeg-git-arm64-static.tar.xz

ffmpegをインストール
ln -s /usr/local/share/ffmpeg-git-arm64-static.tar.xz/ffmpeg /usr/bin/ffmpeg
シンボリックリンクを作成して、コマンドで実行できるようにしている

ffmpeg確認
ffmpeg -version
正常にインストールされていればバージョン情報がみれる
これでFFmpegのインストールは終了です

2.nginx.conf書き換え

vimで編集
vim /etc/nginx/nginx.conf
下記のように設定しました。
rtmp {
   server {
     listen 1935;
     allow play all;
     access_log /var/log/nginx/rtmp_access.log;
     application live1 {
     live on;
     exec ffmpeg -i rtmp://localhost/live1/$name -async 1 -vsync cfr -acodec copy -c:v libx264 -b:v 128K -f flv rtmp://localhost/live2/$name_low;
   }
   application live2 {
     live on;
     hls on;
     hls_path /var/www/vhosts/live_stream;
     hls_variant _low  BANDWIDTH=300000;
   }
}

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    server {
        listen 80;
        server_name  localhost;
        location / {
        root html;
        index index.html index.htm;
        }
        location /live_stream {
        types {
            application/vnd.apple.mpegurl m3u8;
        }
        root /var/www/vhosts/;
        }
    }
}

rtmpのlive2内の
hls_path /var/www/vhosts/live_stream;
このディレクトリ内にFFmpegが頑張ってコンバートしたデータが入ってくれます。 なのでこのディレクトリがない場合は作成しておきます。
mkdir -p /var/www/vhosts/live_stream
これでnginxの設定は終了です。

Nginx起動
/usr/sbin/nginx
この時点でOBSで配信を開始すれば/var/www/vhosts/live_streamにFFmpegが作った.m3u8等が生成されていることを確認します。
OBSの設定は前回の記事のままで問題ありません。
「配信開始」を押します。
エラー警告もなく、右下が緑になっていればサーバーに接続ができています。
ではサーバー側で/var/www/vhosts/live_streamをのぞいてみます。
[root@ホスト名 ~]# ls /var/www/vhosts/live_stream/
test.m3u8  test_low-28.ts  test_low-29.ts  test_low-30.ts  test_low-31.ts  test_low.m3u8
無事、hls配信に必要なデータが生成されています。
※ちなみにファイル名の「test」の部分はOBSの配信設定のストリームキーの値です。

3.htmlファイルの書き換え

headタグ

<link href="http s://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet"></link>

bodyタグ

<source src="http://サーバーグローバルIPアドレス/live_stream/test_low.m3u8" type="application/x-mpegURL"></source>
</video-js>
<script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
<script>
  var player = videojs('example-video');
</script>



※「サーバーグローバルIPアドレス」、「test_low.m3u8」の部分は自身の環境に沿って書き換えてください
これでwebからアクセスすればみれるはずです。

完璧!!!

再生ボタンをワンポチで動画が見れます(^^



が、遅延がヤバイ(笑)

30秒くらいの遅延が確認できました(汗)


症状の原因に下記の可能性があるかと思います。
  • FFmpeg自体が重たい
    topコマンド実行したら
    FFmpegさんのCPU使用率120%越えでむせび泣いてました(笑)
    →他に軽いソフトがあれば検討
  • ひとつのサーバーでNginxがRTMPとWeb両方を担っているのがキツい

    →RTMPとWebの役割を分けて行うと改善するかも??
  • サーバースペック的にストリーミング配信自体がきつい

    現在のさくらのクラウドサーバーのスペックは 仮想コア: 2, メモリ: 4GB
    →スケールアップで改善するかも??
  • 設定が悪い(OBS,Nginx,FFmpeg)
    →OBSのビットレートやキーフレーム,FFmpegの実行コマンドのパラメーター等を変えると改善するかも??
等が考えられそうです。

次回は色んな方法を模索し負荷を減らして遅延の少ない配信を目指します


後Dockerコンテナ化してどこでも簡単に使いまわせるようにしてみたいと思います
これからも精進いたします!!😉
それでは。

0 件のコメント:

コメントを投稿