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>
