rokkonet: RTMPサーバー設置

2019 Jan. 04.
2018 Sep. 15.

nginxサーバーのrtmpモジュールをインストールし、/etc/nginx/nginx.conf を編集する。

rtmpモジュールパッケージインストール

# apt

install libnginx-mod-rtmp

設定

( http://technical.live-on.net/archives/1423 より)

メディア配置ディレクトリ

任意のメディア配置ディレクトリに、 mp4またはflvファイルを配置する。
　例）/usr/local/nginx/mp4s;
　　　/usr/local/nginx/flvs;

/etc/nginx/nginx.conf 編集

## ここから ##
rtmp {
    server {
        listen 1935;

        # video on demand for flv files
        application vod {
   # live off; を入れる事で、rtmp://で直接ストリームが送られてくることを防ぐことができます。

            live off;
            play /usr/local/nginx/flvs;
        }

        # video on demand for mp4 files
        application vod2 {
            live off;
            play /usr/local/nginx/mp4s;
        }
    }
}

# 以下の http { } は書かなくても、以前からの設定で動いた。
# HTTP can be used for accessing RTMP stats
http {
    access_log /usr/local/nginx/logs/access-streaming.log;
    error_log /usr/local/nginx/logs/error-streaming.log;

    server {
        # in case we have another web server on port 80
        listen      80;

        location / {
            root   html;
            index index.html index.htm;
        }

    }
}
## ここまで ##

1935ポート開放

# ufw allow proto tcp from 192.168.1.0/255.255.255.0 to any port 1935
# ufw allow proto udp from 192.168.1.0/255.255.255.0 to any port 1935
# ufw allow proto tcp from 10.8.0.0/24 to any port 1935
# ufw allow proto udp from 10.8.0.0/24 to any port 1935
# ufw reload

視聴

VLC Plyerで再生できるかを確認
　　ネットワークストリームを開く
　　rtmp://IPアドレス/vod2/MEDIA.mp4

　　視聴できたが、早送り・巻き戻しができなかった

webプレーヤーで再生できるか確認
<html>
<head>
   <link href="http://vjs.zencdn.net/5.11.6/video-js.css" rel="stylesheet">
   <script src="http://vjs.zencdn.net/5.11.6/video.js"></script>
</head>
<body>
   <video id="rtmp_test" class="video-js vjs-default-skin" autoplay="autoplay" controls="controls" width="800" height="450" data-setup="{}">
   <source src="rtmp:// IPアドレス/vod2/MEDIA.mp4" type="rtmp/mp4" />
</video>
</body>
</html>

以下、未実践

NGINX の configuration 設定

( https://ygoto3.com/posts/live-streaming-and-rtmp-for-frontend-engineers/ より)

rtmp://localhost:1935/live という URL で RTMP サーバに接続が可能にする

(nginx.conf)
user nginx;
worker_processes 1;
daemon off;
events {
...
}

http {
...
}

rtmp {
    server {
    listen 1935;
        listen [::]:1935 ipv6only=on;

      application live {
        live on;
        record off;
      }
}
}

HLS m3u8 サーバー設定

https://qiita.com/yo_dazy/items/e14464367ec8d4a26b6a より

画像ファイルの格納ディレクトリ作成とConfig設定

# mkdir /usr/local/nginx/html/movie
# chown nobody /usr/local/nginx/html/movie

/usr/local/nginx/conf/nginx.conf　編集

rtmp {
    server {
        # Rtmp Port
        listen 1935;
        access_log logs/rtmp_access.log;
        application livet {
            live on;
            wait_video on;
            # IP を絞る場合以下の設定を有効化
            # allow publish 192.168.1.0/24;
            # deny publixh all;
            hls on;
            hls_path /usr/local/nginx/html/test2;
            hls_fragment 5s;
        }
        ####VOD In Add ########
        application vod {
           play /usr/local/nginx/html/movie; // 動画を格納するディレクトリを指定する
        #######################
        }
    }
}

nginx 起動確認
作業端末（インターネットに接続できる環境）より以下に接続
http://<｢ストリーミングサーバ｣のPublicIP>

スマホで撮った動画をサーバに格納してファイル形式をMP4からm3u8に変換します。
格納先は【５．[nginx.config]編集】で作成した動画格納ディレクトリになります
格納した動画ファイルをHLSに変換します。

# HLS 変換コマンド
#<動画ファイル2>　：格納した動画ファイルから拡張子を抜いてください
ffmpeg -re -i 180320_100150.mp4<動画ファイル> -vcodec libx264 -vprofile baseline -acodec copy -ar 44100 -ac 1 -f segment -segment_format mpegts -segment_time 10 -segment_list 180320_100150<動画ファイル2>.m3u8 180320_100150<動画ファイル2>-%03d.ts

コマンド実行前と実行後

#実行前
[root@WHSMINI movie]# ls /usr/local/nginx/html/movie
180320_100150.mp4
#実行後
[root@WHSMINI movie]# ls /usr/local/nginx/html/movie
180320_100150-000.ts 180320_100150-001.ts 180320_100150-002.ts 180320_100150.m3u8 180320_100150.mp4

[html]ファイル編集
WEB動画を配信させるページへのリンクページです。index.htmlを書き換えます。

# rm -rf /usr/local/nginx/html/index.html
# vi /usr/local/nginx/html/index.html

index.html

<DOCTYPE html>
<html lang="en" class="">
<body>
<p>This Is Web Storeaming StartPage!!</p>
<hr>
<a href="vod.html">Video On Demand</a>
</body>

[Video On Demand]ページの作成
vi /usr/local/nginx/html/vod.html

vod.html

<DOCTYPE html>
<html lang="en" class="">
<head>
    <title>ONDEMAND</title>
    <link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
    <script src="//cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>

</head>
<body>
<p> Video On Demand </p>
<video id="video" class="video-js vjs-default-skin" width="640" height="480" controls>
<script type="text/javascript">
    // 変換した動画ファイルを指定します。
    var source = '/movie/180320_100150.m3u8';
    var ua = navigator.userAgent;
　　// スマホからのアクセスか、それ以外のアクセスかを判断
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
        // iOS
        document.write('<source src=' + source + ' type="application/x-mpegURL">');
        document.write('</video>');

    }else{
        // OTHER
        document.write('</video>');
        if(Hls.isSupported()) {
            var video = document.getElementById('video');
            var hls = new Hls();
            hls.loadSource(source);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED,function() {
                video.pause();
            });
        }
    }
</script>
</body>
</html>

rokkonet

2018年9月15日土曜日

RTMPサーバー設置

rtmpモジュールパッケージインストール

設定

メディア配置ディレクトリ

/etc/nginx/nginx.conf 編集

1935ポート開放

視聴

NGINX の configuration 設定

0 件のコメント:

コメントを投稿