nginx +rtmp+nginx-http-flv-module 环境搭建

nginx +rtmp+nginx-http-flv-module 环境搭建

注：因为RTMP,HLS 都会存在这样那样的缺点，为了更好的解决延时问题、拉流兼容性问题，所以我们准备用flv.js 进行拉流。
1、下载nginx包

下载地址：https://nginx.org/download/nginx-1.14.2.tar.gz

2、下载nginx-http-flv-module 模块包

下载地址：https://github.com/winshining/nginx-http-flv-module

3、安装虚拟机，并在opt文件夹下新建一个文件夹tools ，将下载的nginx 和nginx-rtmp-module 拷贝到opt 文件夹下

4、在/user/local下创建nginx 文件夹

mkdir /usr/local/nginx

5、安装依赖项

yum -y install unzip
yum -y install gcc-c++ 
yum -y install pcre pcre-devel  
yum -y install zlib zlib-devel 
yum -y install openssl openssl-devel

6、将tools 下面的nginx-http-flv-module-1.2.6.zip 解压到/usr/local/nginx下面

cd /opt/tools
unzip nginx-http-flv-module-1.2.6.zip //解压文件
//解压文件复制到/usr/local/nginx 目录下
cp /opt/toos/nginx-http-flv-module-1.2.6.zip  /usr/local/nginx/nginx-http-flv-module

7、将nginx-http-flv-module模板添加到nginx中，生成make文件 并安装nginx

cd /opt/tools
tar -zxvf nginx-1.8.1.tar.gz
cd nginx-1.8.1
./configure --prefix=/usr/local/nginx  --add-module=/usr/local/nginx/nginx-http-flv-module
make && make install

8、修改配置文件

cd /usr/local/nginx/conf
vim nginx.conf

worker_processes  10;
events {
    worker_connections  10240;
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;
rtmp{
	out_queue 4096;
	out_cork 8;
	max_streams 128;
	timeout 15s;
	drop_idle_publisher 15s;
	log_interval 5s;
	log_size 1m;
	server{
	 listen 9000;
	 server_name 192.168.42.34;
	 application myapp{
		 live on;
		 gop_cache on;
	  }
	 application hls{
	  live on;
	  hls on;
	  hls_path /usr/local/nginx/html/hls; 
	}
	 application dash{
	   live on;
	   dash on;
	   dash_path /usr/local/nginx/html/dash;
	 }
	
	}
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8002;
	server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
	location /live{
		flv_live on;
		chunked_transfer_encoding  on;
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
	}
	location /hls{
		types {
		application/vnd.apple.mpegurl m3u8;
		video/mp2t ts;
		 }
		 root /usr/local/nginx/html/hls;
		 add_header 'Cache-Control' 'no-cache';
	}
	 location /dash {
            root /usr/local/nginx/html/dash;
            add_header 'Cache-Control' 'no-cache';
        }
	
	 location /stat {
            #configuration of push & pull status
              rtmp_stat all;
              rtmp_stat_stylesheet stat.xsl;
         }
	location /stat.xsl {
	  root /usr/local/nginx/nginx-http-flv-module;
	}

	 location /control {
            rtmp_control all; #configuration of control module of rtmp
        }	
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

9、推流

10、拉流播放（flv.js）查看demo文件夹

flv.js demo

<div class="mainContainer">
    <div>
        <div id="streamURL">
            <div class="url-input">
                <label for="sURL">Stream URL:</label>
                <input id="sURL" type="text" value="http://192.168.42.28:8002/record/cwj001-2019-06-28-05_04_28.flv" />
                <button onclick="switch_mds()">Switch to MediaDataSource</button>
            </div>
            <div class="options">
                <input type="checkbox" id="isLive" onchange="saveSettings()" />
                <label for="isLive">isLive</label>
                <input type="checkbox" id="withCredentials" onchange="saveSettings()" />
                <label for="withCredentials">withCredentials</label>
                <input type="checkbox" id="hasAudio" onchange="saveSettings()" checked />
                <label for="hasAudio">hasAudio</label>
                <input type="checkbox" id="hasVideo" onchange="saveSettings()" checked />
                <label for="hasVideo">hasVideo</label>
            </div>
        </div>
        <div id="mediaSourceURL" class="hidden">
            <div class="url-input">
                <label for="msURL">MediaDataSource JsonURL:</label>
                <input id="msURL" type="text" value="http://192.168.42.34:8002/live?port=9000&app=myapp&stream=cwj001" />
                <button onclick="switch_url()">Switch to URL</button>
            </div>
        </div>
    </div>
    <div class="video-container">
        <div>
            <video name="videoElement" class="centeredVideo" controls autoplay>
                Your browser is too old which doesn't support HTML5 video.
            </video>
        </div>
    </div>
    <div class="controls">
        <button onclick="flv_load()">Load</button>
        <button onclick="flv_start()">Start</button>
        <button onclick="flv_pause()">Pause</button>
        <button onclick="flv_destroy()">Destroy</button>
        <input style="width:100px" type="text" name="seekpoint"/>
        <button onclick="flv_seekto()">SeekTo</button>
    </div>
    <textarea name="logcatbox" class="logcatBox" rows="10" readonly></textarea>
</div>

<script src="flv.min.js"></script>

<script>
    var checkBoxFields = ['isLive', 'withCredentials', 'hasAudio', 'hasVideo'];
    var streamURL, mediaSourceURL;

    function flv_load() {
        console.log('isSupported: ' + flvjs.isSupported());
        if (mediaSourceURL.className === '') {
            var url = document.getElementById('msURL').value;

            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onload = function (e) {
                var mediaDataSource = JSON.parse(xhr.response);
                flv_load_mds(mediaDataSource);
            }
            xhr.send();
        } else {
            var i;
            var mediaDataSource = {
                type: 'flv'
            };
            for (i = 0; i < checkBoxFields.length; i++) {
                var field = checkBoxFields[i];
                /** @type {HTMLInputElement} */
                var checkbox = document.getElementById(field);
                mediaDataSource[field] = checkbox.checked;
            }
            mediaDataSource['url'] = document.getElementById('sURL').value;
            console.log('MediaDataSource', mediaDataSource);
            flv_load_mds(mediaDataSource);
        }
    }

    function flv_load_mds(mediaDataSource) {
        var element = document.getElementsByName('videoElement')[0];
        if (typeof player !== "undefined") {
            if (player != null) {
                player.unload();
                player.detachMediaElement();
                player.destroy();
                player = null;
            }
        }
        player = flvjs.createPlayer(mediaDataSource, {
            enableWorker: false,
            lazyLoadMaxDuration: 3 * 60,
            seekType: 'range',
        });
        player.attachMediaElement(element);
        player.load();
    }

    function flv_start() {
        player.play();
    }

    function flv_pause() {
        player.pause();
    }

    function flv_destroy() {
        player.pause();
        player.unload();
        player.detachMediaElement();
        player.destroy();
        player = null;
    }

    function flv_seekto() {
        var input = document.getElementsByName('seekpoint')[0];
        player.currentTime = parseFloat(input.value);
    }

    function switch_url() {
        streamURL.className = '';
        mediaSourceURL.className = 'hidden';
        saveSettings();
    }

    function switch_mds() {
        streamURL.className = 'hidden';
        mediaSourceURL.className = '';
        saveSettings();
    }

    function ls_get(key, def) {
        try {
            var ret = localStorage.getItem('flvjs_demo.' + key);
            if (ret === null) {
                ret = def;
            }
            return ret;
        } catch (e) {}
        return def;
    }

    function ls_set(key, value) {
        try {
            localStorage.setItem('flvjs_demo.' + key, value);
        } catch (e) {}
    }

    function saveSettings() {
        if (mediaSourceURL.className === '') {
            ls_set('inputMode', 'MediaDataSource');
        } else {
            ls_set('inputMode', 'StreamURL');
        }
        var i;
        for (i = 0; i < checkBoxFields.length; i++) {
            var field = checkBoxFields[i];
            /** @type {HTMLInputElement} */
            var checkbox = document.getElementById(field);
            ls_set(field, checkbox.checked ? '1' : '0');
        }
        var msURL = document.getElementById('msURL');
        var sURL = document.getElementById('sURL');
        ls_set('msURL', msURL.value);
        ls_set('sURL', sURL.value);
        console.log('save');
    }

    function loadSettings() {
        var i;
        for (i = 0; i < checkBoxFields.length; i++) {
            var field = checkBoxFields[i];
            /** @type {HTMLInputElement} */
            var checkbox = document.getElementById(field);
            var c = ls_get(field, checkbox.checked ? '1' : '0');
            checkbox.checked = c === '1' ? true : false;
        }

        var msURL = document.getElementById('msURL');
        var sURL = document.getElementById('sURL');
        msURL.value = ls_get('msURL', msURL.value);
        sURL.value = ls_get('sURL', sURL.value);
        if (ls_get('inputMode', 'StreamURL') === 'StreamURL') {
            switch_url();
        } else {
            switch_mds();
        }
    }

    function showVersion() {
        var version = flvjs.version;
        document.title = document.title + " (v" + version + ")";
    }

    var logcatbox = document.getElementsByName('logcatbox')[0];
    flvjs.LoggingControl.addLogListener(function(type, str) {
        logcatbox.value = logcatbox.value + str + '\n';
        logcatbox.scrollTop = logcatbox.scrollHeight;
    });

    document.addEventListener('DOMContentLoaded', function () {
        streamURL = document.getElementById('streamURL');
        mediaSourceURL = document.getElementById('mediaSourceURL');
        loadSettings();
        showVersion();
        flv_load();
    });
</script>