![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2020-10-11T10:37:10+09:00","default:egashira","egashira") #author("2020-10-11T11:09:44+09:00","default:egashira","egashira") [[CentOS7]] *動画配信サーバー構築 [#rc633ed6] **nginx+nginx-rtmp-moduleインストール [#i12eaaf2] |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# wget https://nginx.org/download/nginx-1.17.3.tar.gz &color(lime){← nginxダウンロード};| |※最新版の[[ダウンロード>https://nginx.org/en/download.html]]URL| |[root@centos ~]# tar zxf nginx-*.tar.gz &color(lime){← nginx展開};| |[root@centos ~]# cd nginx-* &color(lime){← nginx展開先ディレクトリへ移動};| |[root@centos nginx-1.17.3]# git clone https://github.com/arut/nginx-rtmp-module.git &color(lime){← nginx-rtmp-moduleダウンロード};| |[root@centos nginx-1.17.3]# ./configure --add-module=nginx-rtmp-module/ && make && make install &color(lime){← nginx+nginx-rtmp-moduleインストール};| |[root@centos nginx-1.17.3]# cd &color(lime){← nginx展開先ディレクトリを抜ける};| |[root@centos ~]# rm -rf nginx-* &color(lime){← nginx展開先ディレクトリとダウンロードしたファイルを削除};| **nginx設定 [#mb150243] |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# vi /usr/local/nginx/conf/nginx.conf &color(lime){← nginx設定ファイル編集};| http { server_tokens off; ← 追加(バージョン情報隠蔽) ・ ・ ・ server { listen 80; faviconエラーログ無効化設定追加（ここから） # faviconが存在しない旨のログを出力しないようにする location /favicon { empty_gif; access_log off; log_not_found off; } faviconエラーログ無効化設定追加（ここまで） RTMPサーバー設定を最後尾へ追加（ここから） rtmp_auto_push on; rtmp { server { listen 1935; access_log logs/rtmp_access.log; chunk_size 4096; timeout 10s; # ライブ配信設定 application live { live on; # 192.168.1.0/24からのみライブ配信データの受信を許可 allow publish 192.168.1.0/24; deny publish all; # HLS配信設定 hls on; hls_path /usr/local/nginx/html/live; # HLS(HTTP Live Streaming)ファイル作成先 hls_fragment 10s; # HLS(HTTP Live Streaming)ファイル分割時間 } # オンデマンド配信設定 application vod { play /usr/local/nginx/html/vod; # 動画ファイル格納先 } } } |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# mkdir /usr/local/nginx/html/vod &color(lime){← 動画ファイル格納先ディレクトリ作成};| |[root@centos ~]# chown nobody /usr/local/nginx/html/vod &color(lime){← 動画ファイル格納先ディレクトリ所有者変更};| |[root@centos ~]# vi /etc/logrotate.d/nginx &color(lime){← nginxログローテーション設定ファイル作成};| /usr/local/nginx/logs/*.log { missingok notifempty sharedscripts delaycompress postrotate /bin/systemctl reload nginx.service > /dev/null 2>/dev/null || true endscript } **nginx起動 [#s279e638] |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# vi /usr/lib/systemd/system/nginx.service &color(lime){← nginx起動スクリプト作成};| [Unit] Description=nginx - high performance web server Documentation=http://nginx.org/en/docs/ After=network.target remote-fs.target nss-lookup.target [Service] Type=forking ExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf ExecReload=/bin/kill -s HUP $MAINPID ExecStop=/bin/kill -s TERM $MAINPID PrivateTmp=true [Install] WantedBy=multi-user.target |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# systemctl start nginx &color(lime){← nginx起動};| |[root@centos ~]# systemctl enable nginx &color(lime){← nginx自動起動設定};| **オンデマンド配信確認 [#f5ead8dd] ***動画変換スクリプト作成 [#ue5b66e1] |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm &color(lime){← nux-dextopリポジトリインストール};| |[root@centos ~]# yum -y install ffmpeg &color(lime){← ffmpegインストール};| |[root@centos ~]# vi convert_to_hls.sh &color(lime){← HLS形式動画変換スクリプト作成};| #!/bin/bash FILENAME=`basename ${1} | sed 's/\.[^\.]*$//'` ffmpeg -re -i ${1} -vcodec libx264 -vprofile baseline -acodec copy -ar 44100 -ac 1 -f segment -segment_ format mpegts -segment_time 10 -segment_list ${FILENAME}.m3u8 ${FILENAME}-%03d.ts if [ $? -eq 0 ]; then echo "convert completed. => ${FILENAME}.m3u8" else echo "convert failed." fi ***動画をHLS形式に変換 [#ue8245b9] 変換元動画をWinSCPで動画格納先（/usr/local/nginx/html/vod）へ格納する。 |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# cd /usr/local/nginx/html/vod &color(lime){← 動画格納先ディレクトリへ移動};| |[root@centos ~]# sh /root/convert_to_hls.sh &color(lime){変換元動画ファイル名 ← HLS形式動画変換};| |・&br;・&br;・&br;convert completed. => xxxxxxxx.m3u8 &color(lime){← 動画変換成功};| |[root@centos ~]# cd &color(lime){← 動画格納先ディレクトリを抜ける};| ***動画視聴用ページ作成 [#j67406c5] |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# vi /usr/local/nginx/html/vod.html &color(lime){← 動画視聴用ページ作成};| <!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> <video id="video" class="video-js vjs-default-skin" width="640" height="480" controls> <script type="text/javascript"> var source = '/vod/動画ファイル名.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.play(); }); } } </script> </body> </html> -PCブラウザからhttp://サーバー名:8080/vod.htmlへアクセスして動画が視聴できること -iPhoneまたはiPadからhttp://サーバー名:8080/vod.htmlへアクセスして動画が視聴できること -PCブラウザからhttp://サーバー名/vod.htmlへアクセスして動画が視聴できること -iPhoneまたはiPadからhttp://サーバー名/vod.htmlへアクセスして動画が視聴できること **ライブ配信確認 [#t0a7961c] ***【PCから配信する場合】 [#g1d11f15] +Flash Media Live Encoderインストール&br;Flash Media Live Encoderを使用してカメラ映像・音声をサーバーへ送信するため、カメラを接続する端末でFlash Media Live Encoderをダウンロードしてインストール +ライブ配信&br;Flash Media Live Encoderを起動&br;&br;「Encoding Options」タブを選択&br;&br;【画面左側】&br;「Preset」で「High Bandwidth（800Kbps）-H.264」を選択&br;&br;「Format」のレンチボタンを押下して「Advanced Encoder Settings」ダイアログボックスの「Keyframe Frequency」で「4 Seconds」を選択&br;&br;【画面右側】&br;「FMS URL」に"rtmp://サーバーIPアドレス/live"と入力※左記の"live"はアプリケーション名（nginx.confのapplicationで指定した値）を指定&br;&br;「Stream」に"live"と入力※左記の"live"はストリームキー（任意の値）を指定&br;&br;「Connect」ボタン押下&br;&br;「Start」ボタン押下&br;&br;これでサーバーにカメラ映像・音声の送信が開始される。 ***【iPhoneから配信する場合】 [#z242a824] +Live:Air Soloインストール&br;iPhoneにLive:Air Soloをインストール +ライブ配信&br; ++Live:Air Soloを起動 ++「CUSTOM RTMP」をタップ ++「URL」に"rtmp://サーバー名/live"、「Stream」に"live"と入力して、「Add RTMP」をタップ※左記の最初の"live"はアプリケーション名（nginx.confのapplicationで指定した値）、次の"live"はストリームキー（任意の値）を指定 ++右へスワイプして「Add New Source」をタップ ++「iOS Camera」をタップ ++iOSカメラ映像をタップして左へスワイプ ++「Go Live!」をタップ +これでサーバーにカメラ映像・音声の送信が開始される。 |BGCOLOR(black):COLOR(white):|c |[root@centos ~]# vi /usr/local/nginx/html/live.html &color(lime){← ライブ動画視聴用ページ作成};| <!DOCTYPE html> <html lang="en" class=""> <head> <title>LIVE</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> <video id="video" class="video-js vjs-default-skin" width="640" height="480" controls> <script type="text/javascript"> var source = '/HLS(HTTP Live Streaming)ファイル作成先/アプリケーション名.m3u8（例:/live/live.m3u8） '; var ua = navigator.userAgent; if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) { // Mobile 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.play(); }); } } </script> </body> </html> -PCブラウザからhttp://サーバー名:8080/live.htmlへアクセスしてカメラ映像・音声が視聴できること -iPhoneまたはiPadからhttp://サーバー名:8080/live.htmlへアクセスしてカメラ映像・音声が視聴できること -PCブラウザからhttp://サーバー名/live.htmlへアクセスしてカメラ映像・音声が視聴できること -iPhoneまたはiPadからhttp://サーバー名/live.htmlへアクセスしてカメラ映像・音声が視聴できること
