24時間365日フルマネージドホスティングサービスのデイーネット

Nginxでストリーミング配信

こんにちは、インテグの馬場です。
今回ご紹介するのは、前回のお話にもあったNginxのストリーミング配信についてです。

実装前に一点注意事項です。
Nginxでストリーミング機能を実装するには、
『nginx-rtmp-module』というモジュールが必要になります。
そのため、コンパイルする必要がございますので既にNginxを導入済みの場合は、
一度アンインストールを行っていただくか、再コンパイルが必要になります。

利用用途

Youtubeなどにもライブ配信機能はありますが、視聴制限できるのは限定公開のみとなっており、
リンクが知られてしまえば誰からでも見れるようになってしまいます。

そのため個人情報や重要な情報を配信するのにはあまり向きませんが、
今回ご紹介するNginxのプライベート環境であれば、
掲載リンクを知られた場合でもIPによる制限と通信を暗号化できるので、
比較的安全に配信を行う事が可能です。

PCのカメラやデスクトップ画面の配信は勿論。
インターネット経由でAndroid端末の画面を配信したり、
外部カメラやAndroid端末のカメラを利用した配信ができます。

ドライブレコーダに関して、私はまだ試せていないので断言できませんが、
工夫をすれば通信機能付きのドライブレコーダーで、
自身が構築したストリーミングサーバを経由して、
サーバに録画しながら、配信者や視聴者を制限して配信を行えるかもしれませんね。

RTMPについて

まずRTMPの種類には
RTMPT --- HTTP(80ポート)を装い通信を行います。
RTMPS --- HTTPS(443ポート)を装い通信を行います。
があります。
他、RTMPE,pRTMPがありますがこちらは割愛します。

詳しくはこちらをご参考ください

それでは、実際にNginxでストリーミングサーバの構築をしてみましょう。

以下は例として作成した手順になりますので、お使いの環境に合わせて変更を行って頂き、
導入してみてください。

導入手順


■動作環境
-- Redhat - CentOS7.5

既にNginxが入っていた場合はバックアップを実施後、Nginxの削除を実施します。

■前提条件のインストール

yum install libxslt-devel gd-devel GeoIP-devel wget unzip vim gcc pcre* openssl*

※こちらは新規でサーバを建てた場合を想定しています。  お使いの環境に合わせて、変更してください。

■Nginxのダウンロード

cd /usr/local/src
wget https://nginx.org/download/nginx-1.14.0.tar.gz
tar zxvf nginx-1.14.0.tar.gz
 → (2018/04/17 Release)

■Nginx コンパイル

 cd nginx-1.14.0

./configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib64/nginx/modules \
--conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log \
--http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid \
--lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp \
--http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp \
--http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp \
--user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module \
--with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module \
--with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module \
--with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module \
--with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module \
--with-stream_ssl_module --with-stream_ssl_preread_module \
--add-module=../nginx-rtmp-module-master

多いですが、こちらは既にYumで入れて起動ファイル等が構成されてしまっていた場合でも、
正常に動作させるよう、NginxをYumで入れる構成とほぼ同じにしています。

チェックが正常に完了後、コンパイルを実施します。

make && make test
make install

nginx -V
インストール後の内容を確認します。

必要なディレクトリの作成
mkdir -p /usr/lib64/nginx/modules /var/cache/nginx
mkdir -p /var/www/vhost/example.co.jp/{logs,capture_data}

ユーザーの作成
useradd -Ms /sbin/nologin nginx
→ yumで既に入れていた場合は必要ありません。

権限を付与
chown -R nginx: /var/www/vhost/example.co.jp

ln -s /usr/lib64/nginx/modules /etc/nginx/modules
モジュールのシンボリックリンクを作成

cd /etc/nginx
mv nginx.conf.default nginx.conf.default_`date +%Y%m%d`

■NginxのConfファイルの設定。

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] ""$request"" '
                      '$status $body_bytes_sent ""$http_referer"" '
                      '""$http_user_agent"" ""$http_x_forwarded_for""';

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  60;

    #gzip  on;
    server_tokens off;
    include /etc/nginx/conf.d/*.conf;
}
 #ストリーミング配信用#
rtmp {
        server {
                listen 1935;
                access_log /var/www/vhost/example.co.jp/logs/capure.log;
                chunk_size 4096;
                timeout 10s;

                application video {
                        live on;
                        hls  on;

                        # プライベート設定
                        allow publish 172.16.0.0/24;
                        deny publish all;

                        allow play 172.16.0.0/24;
                        deny play all;

                        # HLS配信設定
                        hls_path /var/www/vhost/example.co.jp/capture_data/;
                        hls_fragment 2;
                        hls_type live;
                        record off;
                }
        }
}

→こちらはローカル環境で設定している為、プライベート設定は仮でLIPにしています。

■起動用スクリプトの準備

vim /lib/systemd/system/nginx.service

[Unit]
Description=nginx - high performance web server
Documentation=http://nginx.org/en/docs/
After=network-online.target remote-fs.target nss-lookup.target
Wants=network-online.target

[Service]
Type=forking
PIDFile=/var/run/nginx.pid
ExecStart=/usr/sbin/nginx -c /etc/nginx/nginx.conf
ExecReload=/bin/kill -s HUP $MAINPID
ExecStop=/bin/kill -s TERM $MAINPID

[Install]
WantedBy=multi-user.target

■FWの設定と起動の確認

firewall-cmd --permanent --add-port=1935/tcp
firewall-cmd --reload
firewall-cmd --list-port
→ 1935ポートの開放

systemctl daemon-reload
systemctl start nginx
ps axu |grep nginx
→ 正常に起動することを確認する。

ss -ant |grep 1935
→ 1935ポートが空いていることを確認する。

systemctl enable nginx
systemctl is-enabled nginx
→ 自動起動を設定

■配信確認用のHTMLファイルを作成する。

vim /var/www/vhost/example.co.jp/capture_data/streaming.html

 <html lang=""ja"" class="""">
 <head>
 <style type=""text/css"">
   html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
 }
 html {
   display: table;
 }
 body {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
 }
 </style>
 <link href=""http://vjs.zencdn.net/4.2.0/video-js.css"" rel=""stylesheet"">
 <script src=""http://vjs.zencdn.net/4.2.0/video.js""></script>
 </head>

 <body>
 <div style=""margin-right:auto; margin-left:auto; width:900px; height:400px;"">
  <video id=""live test"" class=""video-js vjs-default-skin"" controls autoplay
    preload=""auto"" width=""1280"" height=""720"" data-setup='{}'>
    <source src=""capture.m3u8"" type='application/x-mpegURL'>
    <source src=""rtmp://example.co.jp/video/capture"" type='rtmp/mp4'>
    <p class=""vjs-no-js"">
      To view this video please enable JavaScript, and consider upgrading to a web browser
      that <a href=""http://videojs.com/html5-video-support/"" target=""_blank"">supports HTML5 video</a>
    </p>
  </video>
 </div>
 </body>
 </html>

前回のreverse proxy設定を適応していた場合は、以下のAlias設定をApacheに設定します。

Listen 8081
<VirtualHost *:8081>
        DocumentRoot    /var/www/vhost/example.co.jp/html
        ServerName      example.co.jp
        Serveradmin     root@localhost
        LogFormat "%{X-Forwarded-For}i %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined_denet
        ErrorLog        /var/www/vhost/example.co.jp/logs/error_log
        CustomLog      "|/usr/sbin/rotatelogs /var/www/vhost/example.co.jp/logs/access_log_%Y%m%d 86400 540" combined_denet
--------ここから--------
        Alias  /capture_data    "/var/www/vhost/example.co.jp/capture_data"
------------------------
</VirtualHost>

■以下では例としてOBSで設定しています。 OBS.jpg

ストリームキーはstreaming.htmlで編集した{{ Key name }}の部分です。

<source src=""{{ Key name }}.m3u8"">
<source src=""rtmp://example.co.jp/video/{{ Key name }}"" type='rtmp/mp4'>

■通信の確認

tcpdump src port 1935
 →サーバに正常に到達していることを確認。

■ブラウザで確認
http://example.co.jp/capture_data/streaming.html

正常にブラウザから閲覧できることを確認できれば成功です。

  • このページの先頭へ

  • 東京本社
    〒105-0001東京都港区虎ノ門2-3-22 第一秋山ビル5F
    TEL:03-3591-8887 FAX:03-3591-8886
  • 大阪本社
    〒541-0041 大阪市中央区北浜2-6-11北浜エクセルビル5F
    TEL:06-6231-8887 FAX:06-6231-8897

  • 認証範囲はこちらをご覧ください。

Denet logo

クラウドサービス・データセンタ・高機能専有サーバ・共有サーバホスティングサービス 株式会社ディーネット
dot_bar