nginx rtm-module ダッシュボードを作る

本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^

さくらのクラウドにnginx rtmp-module で映像配信サーバを構築

１．統計情報が確認でき

２．録画スタートストップ

３．録画状況の確認（Ajax非同期通信でファイルサイズを確認）

ができるダッシュボードホームページを作成する

統計情報は１分ごとに書き換え（ホームページを自動で再読み込み）
録画状況の確認は、非同期通信でファイルサイズに変化があったら書き換える

nginx.confの設定

ステータスページは、8080で公開し、適当にアクセスされないようにする。それからreferer制御もして、localhost以外からのアクセスは受け付けないようにする。

nginx.conf
    server {
       listen 8080;
       server_name localhost;

        # rtmp control 録画スタート、ストップコントロールできるようにする　localhost以外からのアクセスは受け付けない
        location /control {
                valid_referers server_names sakura.hoge.or.jp;
                if ($invalid_referer) { return 403; }
                rtmp_control all;
        }

        location /stat {
                valid_referers server_names sakura.hoge.or.jp;
                if ($invalid_referer) { return 403; }
                rtmp_stat all;
                rtmp_stat_stylesheet /stat.xsl;
        }

        location /stat.xsl {
            root html;
        }

    }

#映像配信部分

           application multi {
                live on;
                #録画を手動でできるようにする
                record all manual;
                #ファイル名をユニークにし、上書きされないようにする
                record_unique on;
                record_path /tmp/rec;
                #録画が完了したら、yamdiを利用してflvのキーを生成しなおす（これをすると、解像度情報が正しくなりシークもできるようになる）
                exec_record_done /usr/sbin/yamdi -i $path -o /tmp/rec2/$basename;
           }

録画ディレクトリの準備

※rec,rec2ディレクトリの権限はwww-data で書き込みできるようにしておく事

sudo mkdir rec
sudo mkdir rec2
sudo chown www-data:www-data rec
sudo chown www-data:www-data rec2

ダッシュボードテンプレートファイルの配置

stat.xslはテンプレートの役割をする。htmlフォルダ（ルートフォルダ）にコピーしておく

sudo cp ~/nginx-rtmp-module/stat.xsl /usr/local/nginx/html/

jQueryの準備

録画状況の確認を行う。ファイルに変更があったら再読み込みするため。

# wget https://code.jquery.com/jquery-3.1.1.min.js

ダウンロードしたファイルは/usr/local/nginx/html/jsフォルダにでも配置します。

PeriodicalUpdaterをダウンロード、これもjsフォルダに配置します

js# git clone https://github.com/RobertFischer/JQuery-PeriodicalUpdater.git
js/JQuery-PeriodicalUpdater# mv jquery.periodicalupdater.js ../

このスクリプトでファイルに変更があれば、再読み込みする皓ができます。

Cronで２秒ごとにファイルサイズテキストを作成

* * * * *  for i in `seq 0 2 59`;do (sleep ${i}; sudo sh -c "ls -l /tmp/rec > /usr/local/nginx/html/dashbord/rec.txt") & done;

これで１分間隔で再読み込みする

ダッシュボードHTMLを作成します

ミソはここ。60秒ごとに全体を再読み込みします。

<SCRIPT LANGUAGE="JavaScript">
setTimeout("location.reload()",1000*60);
</SCRIPT>

実際のダッシュボードです

<html>
  <head>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.periodicalupdater.js"></script>

<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout("location.reload()",1000*60);
//-->
</SCRIPT>

    <script type="text/javascript">
      $(function(){
        $.PeriodicalUpdater('./rec.txt',{
          method: 'get',
          minTimeout: 1000,
          type: 'html',
          multiplier:1,
          maxCalls: 0
        },

        function(data){
          $("#rec_txt").text(data);
        });
      });

    </script>

  </head>
  <body>
    <H3>Sakura Dashbord</H3>
        <!-- 録画スタートストップURLリンク -->
        <a href="http://sakura.hoge.or.jp:8080/control/record/start?app=multi&name=test" target="_blank">Start rec</a>
        <a href="http://sakura.hoge.or.jp:8080/control/record/stop?app=multi&name=test" target="_blank">Stop rec</a>
        <div  style="clear:both;font-size:12px;" id="rec_txt">rec status</div>
        <div style="clear:both;font-size:10px;">
             <iframe frameBorder="0" seamless src="http://sakura.hoge.or.jp:8080/stat" width="1300px" height="600px"></iframe>
        </div>

  </body>
</html>