動画配信サーバー構築
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[CentOS7]]
*動画配信サーバー構築 [#rc633ed6]
**nginx+nginx-rtmp-moduleインストール [#i12eaaf2]
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# wget https://nginx.org/download/nginx-1...
|※最新版の[[ダウンロード>https://nginx.org/en/download.ht...
|[root@centos ~]# tar zxf nginx-*.tar.gz &color(lime){←...
|[root@centos ~]# cd nginx-* &color(lime){← nginx展開先...
|[root@centos nginx-1.17.3]# git clone https://github.com...
|[root@centos nginx-1.17.3]# ./configure --add-module=ngi...
|[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 &c...
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(H...
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...
|[root@centos ~]# chown nobody /usr/local/nginx/html/vod...
|[root@centos ~]# vi /etc/logrotate.d/nginx &color(lime)...
/usr/local/nginx/logs/*.log {
missingok
notifempty
sharedscripts
delaycompress
postrotate
/bin/systemctl reload nginx.service > /dev/null ...
endscript
}
**nginx起動 [#s279e638]
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# vi /usr/lib/systemd/system/nginx.servic...
[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/loca...
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/ngin...
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){← ...
|[root@centos ~]# systemctl enable nginx &color(lime){←...
**オンデマンド配信確認 [#f5ead8dd]
***動画変換スクリプト作成 [#ue5b66e1]
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# rpm -Uvh http://li.nux.ro/download/nux/...
|[root@centos ~]# yum -y install ffmpeg &color(lime){← ...
|[root@centos ~]# vi convert_to_hls.sh &color(lime){← H...
#!/bin/bash
FILENAME=`basename ${1} | sed 's/\.[^\.]*$//'`
ffmpeg -re -i ${1} -vcodec libx264 -vprofile baseline -a...
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(li...
|[root@centos ~]# sh /root/convert_to_hls.sh &color(lime...
|・&br;・&br;・&br;convert completed. => xxxxxxxx.m3u8 &...
|[root@centos ~]# cd &color(lime){← 動画格納先ディレク...
***動画視聴用ページ作成 [#j67406c5]
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# vi /usr/local/nginx/html/vod.html &col...
<!DOCTYPE html>
<html lang="en" class="">
<head>
<title>ONDEMAND</title>
<link href="//vjs.zencdn.net/5.11/video-js.min.css" ...
<script src="//cdn.jsdelivr.net/hls.js/latest/hls.mi...
</head>
<body>
<video id="video" class="video-js vjs-default-skin" widt...
<script type="text/javascript">
var source = '/vod/動画ファイル名.m3u8';
var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') >...
// iOS
document.write('<source src=' + source + ' type=...
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://サーバー名/vod.htmlへアクセスして動...
-iPhoneまたはiPadからhttp://サーバー名/vod.htmlへアクセス...
**ライブ配信確認 [#t0a7961c]
***【PCから配信する場合】 [#g1d11f15]
+Flash Media Live Encoderインストール&br;Flash Media Live...
+ライブ配信&br;Flash Media Live Encoderを起動&br;&br;「En...
***【iPhoneから配信する場合】 [#z242a824]
+Live:Air Soloインストール&br;iPhoneにLive:Air Soloをイン...
+ライブ配信&br;
++Live:Air Soloを起動
++「CUSTOM RTMP」をタップ
++「URL」に"rtmp://サーバー名/live"、「Stream」に"live"と...
++右へスワイプして「Add New Source」をタップ
++「iOS Camera」をタップ
++iOSカメラ映像をタップして左へスワイプ
++「Go Live!」をタップ
+これでサーバーにカメラ映像・音声の送信が開始される。
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# vi /usr/local/nginx/html/live.html &co...
<!DOCTYPE html>
<html lang="en" class="">
<head>
<title>LIVE</title>
<link href="//vjs.zencdn.net/5.11/video-js.min.css" ...
<script src="//cdn.jsdelivr.net/hls.js/latest/hls.mi...
</head>
<body>
<video id="video" class="video-js vjs-default-skin" widt...
<script type="text/javascript">
var source = '/HLS(HTTP Live Streaming)ファイル作成...
var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') >...
// Mobile
document.write('<source src=' + source + ' type=...
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://サーバー名/live.htmlへアクセスして...
-iPhoneまたはiPadからhttp://サーバー名/live.htmlへアクセ...
終了行:
[[CentOS7]]
*動画配信サーバー構築 [#rc633ed6]
**nginx+nginx-rtmp-moduleインストール [#i12eaaf2]
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# wget https://nginx.org/download/nginx-1...
|※最新版の[[ダウンロード>https://nginx.org/en/download.ht...
|[root@centos ~]# tar zxf nginx-*.tar.gz &color(lime){←...
|[root@centos ~]# cd nginx-* &color(lime){← nginx展開先...
|[root@centos nginx-1.17.3]# git clone https://github.com...
|[root@centos nginx-1.17.3]# ./configure --add-module=ngi...
|[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 &c...
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(H...
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...
|[root@centos ~]# chown nobody /usr/local/nginx/html/vod...
|[root@centos ~]# vi /etc/logrotate.d/nginx &color(lime)...
/usr/local/nginx/logs/*.log {
missingok
notifempty
sharedscripts
delaycompress
postrotate
/bin/systemctl reload nginx.service > /dev/null ...
endscript
}
**nginx起動 [#s279e638]
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# vi /usr/lib/systemd/system/nginx.servic...
[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/loca...
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/ngin...
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){← ...
|[root@centos ~]# systemctl enable nginx &color(lime){←...
**オンデマンド配信確認 [#f5ead8dd]
***動画変換スクリプト作成 [#ue5b66e1]
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# rpm -Uvh http://li.nux.ro/download/nux/...
|[root@centos ~]# yum -y install ffmpeg &color(lime){← ...
|[root@centos ~]# vi convert_to_hls.sh &color(lime){← H...
#!/bin/bash
FILENAME=`basename ${1} | sed 's/\.[^\.]*$//'`
ffmpeg -re -i ${1} -vcodec libx264 -vprofile baseline -a...
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(li...
|[root@centos ~]# sh /root/convert_to_hls.sh &color(lime...
|・&br;・&br;・&br;convert completed. => xxxxxxxx.m3u8 &...
|[root@centos ~]# cd &color(lime){← 動画格納先ディレク...
***動画視聴用ページ作成 [#j67406c5]
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# vi /usr/local/nginx/html/vod.html &col...
<!DOCTYPE html>
<html lang="en" class="">
<head>
<title>ONDEMAND</title>
<link href="//vjs.zencdn.net/5.11/video-js.min.css" ...
<script src="//cdn.jsdelivr.net/hls.js/latest/hls.mi...
</head>
<body>
<video id="video" class="video-js vjs-default-skin" widt...
<script type="text/javascript">
var source = '/vod/動画ファイル名.m3u8';
var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') >...
// iOS
document.write('<source src=' + source + ' type=...
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://サーバー名/vod.htmlへアクセスして動...
-iPhoneまたはiPadからhttp://サーバー名/vod.htmlへアクセス...
**ライブ配信確認 [#t0a7961c]
***【PCから配信する場合】 [#g1d11f15]
+Flash Media Live Encoderインストール&br;Flash Media Live...
+ライブ配信&br;Flash Media Live Encoderを起動&br;&br;「En...
***【iPhoneから配信する場合】 [#z242a824]
+Live:Air Soloインストール&br;iPhoneにLive:Air Soloをイン...
+ライブ配信&br;
++Live:Air Soloを起動
++「CUSTOM RTMP」をタップ
++「URL」に"rtmp://サーバー名/live"、「Stream」に"live"と...
++右へスワイプして「Add New Source」をタップ
++「iOS Camera」をタップ
++iOSカメラ映像をタップして左へスワイプ
++「Go Live!」をタップ
+これでサーバーにカメラ映像・音声の送信が開始される。
|BGCOLOR(black):COLOR(white):|c
|[root@centos ~]# vi /usr/local/nginx/html/live.html &co...
<!DOCTYPE html>
<html lang="en" class="">
<head>
<title>LIVE</title>
<link href="//vjs.zencdn.net/5.11/video-js.min.css" ...
<script src="//cdn.jsdelivr.net/hls.js/latest/hls.mi...
</head>
<body>
<video id="video" class="video-js vjs-default-skin" widt...
<script type="text/javascript">
var source = '/HLS(HTTP Live Streaming)ファイル作成...
var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') >...
// Mobile
document.write('<source src=' + source + ' type=...
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://サーバー名/live.htmlへアクセスして...
-iPhoneまたはiPadからhttp://サーバー名/live.htmlへアクセ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
