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

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

１．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のインストールは終了です

２．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の配信設定のストリームキーの値です。

３．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コンテナ化してどこでも簡単に使いまわせるようにしてみたいと思います
これからも精進いたします!!😉
それでは。

コメント

コメントを投稿

このブログの人気の投稿

[Virus Error]と件名に挿入されたメール

とあるWebシステムで、ユーザーのメール機能を使って運営者に問い合わせができるようにしているものがあります。 （いわゆる、mailtoを使ったもの） あるとき、運営者が受け取ったときに、[Virus Error] (本来の件名)　という件名のメールが 届いているというので、調べてほしいと依頼があり調べてみました。 メールのヘッダーを確認したところ、 ・auのiPhoneからだと思われる ・メールの配送ルートは一般的なもの ネットの情報を引いてみると、日本語の情報は少なく、海外の掲示板をあたったほうが いろいろと情報が出てくるようですが・・・よくわかりません。 記事を流し読みしていてわかったことは以下。 ・iCloud経由のメールでこれがつくことがあるらしい https://discussions.apple.com/thread/7060793 真相は不明ですが、iCloud側の実装で何かあったのかもしれませんね。 本記事は、弊社代表のブログ記事 なんでもIT屋の宿命 からの転載です。
続きを読む

Firefoxを起動したら、Couldn't load XPCOM. というエラーが出る時の対処法 | ライタス株式会社

イメージ
今朝方、Firefoxを起動したら、Couldn't load XPCOM. というエラーが出るようになり、起動できなくなりました。 確か、システムの復元が走ったので、そのせいかなと思います。 対処法については、こちらに記載がありました。 http://www.thewindowsclub.com/firefox-couldnt-load-xpcom-windows 英語だったので、日本語訳してみます。 XPCOM is a cross-platform component object model, which is similar to Microsoft COM, and is required for file and memory management, basic data structures and so on. XPCOMは、クロスプラットフォームコンポーネントで、Microsoft COMに似ています。このファイルはメモリー管理、基礎データ構造などに利用されています。 This Firefox start-up error can typically occur after performing a Windows System Restore or if you run it in a Sandbox. In fact I too received this message a few days back after I had system restore my omputer a couple of times to fix some other issues. Firefoxの起動エラーは、Windowsのシステム復元を行ったときに出ることがあります。実際、私もシステム復元のあとに、このメッセージが出た時は、次のように対処しました。 1] Open Firefox Menu, click the “?” Help button and select  Restart with addons disabled . If this solves your issue, you may need to disable some problem-causing addon. 1] Fire
続きを読む

マテビュー（マテリアライズドビュー：Materialized View）のせいで、表領域が削除ができない | ライタス株式会社

久々にOracleで困ったことに遭遇したのと、日本語の情報が少なかったので、 記録がてら記事にします。 表領域のDROPをしなくてはならない状況になったので、 おとなしくコマンドを叩いていました。 DROP TABLESPACE [表領域名] INCLUDING CONTENTS AND DATAFILES CASCADE CONSTRAINTS; なんでか、この時に、 ORA-23515 : マテリアライズド・ビューまたはその索引(あるいはその両方)が表領域に存在します. が、発生しました。 おとなしく削除されてくれればいいものを、、、 調べたところ、このパターンは、マテビューを手動で削除すれば、治るようですね。 外人さんが、こんなSQLを作ってくれていました。 SQL> select ‘drop materialized view ‘||owner||’.'||name||’ PRESERVE TABLE;’ from dba_registered_snapshots where name in  (select table_name from dba_tables where tablespace_name = ‘BLUH’); この人は、BLUHというテーブルスペースをDROPしようとして失敗していたようなので、 その部分を書き換えると、マテビューの削除用SQLを出力してくれます。 そのまま、これを実行すれば、マテビューが削除できて、そのあと表領域を削除すれば、 ちゃんと削除できます。 意外と便利そうなSQLだったので、機会があれば使ってみてください。 = 参考元 = http://ora34913.wordpress.com/2008/09/04/ora-23515-and-ora-02449-on-drop-tablespace/ 本記事は、弊社代表のブログ記事 なんでもIT屋の宿命 からの転載です。
続きを読む