nginx +rtmp+nginx-http-flv-module (Centos7)环境搭建
  OikbFAp4Wt3o 2023年11月19日 21 0
  1. 创建/usr/local/soft文件夹并下载nginx
mkdir /usr/local/soft
wget https://nginx.org/download/nginx-1.14.2.tar.gz
  1. 下载nginx-http-flv-module 模块
wget https://github.com/winshining/nginx-http-flv-module-1.2.6.zip
  1. 创建/usr/local/nginx文件夹
mkdir /usr/local/nginx
  1. 将下载的nginx压缩文件解压到/usr/local/soft下
tar -zxvf nginx-1.14.2.tar.gz /usr/local/soft
  1. 进入刚解压的nginx
cd /usr/local/soft/nginx-1.14.2
  1. 将nginx-http-flv-module解压到/usr/local/soft下
unzip nginx-http-flv-module-1.2.6.zip
  1. 安装依赖
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
  1. 生成make文件并且安装nginx
./configure --prefix=/usr/local/nginx  --add-module=/usr/local/soft/nginx-http-flv-module
make && make install
  1. 修改nginx配置文件,配置中根据自己的实际情况修改
worker_processes  1;
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    keepalive_timeout  65;
    # 支持跨域的配置
    #add_header 'Access-Control-Allow-Origin' '*';
    # 请求允许发送cookie
	#add_header 'Access-Control-Allow-Credentials' 'true';
    server {
        listen       8080;
		server_name  192.168.234.132;
		location /live {
			flv_live on;
			chunked_transfer_encoding on;
			add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
            add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头			
		}
 
		location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
 location /stat.xsl {
            root /usr/local/nginx-flv/nginx-http-flv-module;
        }
 
        location /control {
            rtmp_control all;
        }
 
        location /rtmp-publisher {
            root /usr/local/nginx-flv/nginx-http-flv-module;
        }
		
        location / {
            root /usr/local/nginx-flv/nginx-http-flv-module;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
            }
}
 
rtmp {  
    server {  
        listen 1935;  
        application myapp { 
        	live on;
		gop_cache on;#打开GOP缓存,减少首屏等待时间
 		#allow publish 192.168.145.1;#
		#allow play all;
		#notify_method get;
		#on_play http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_play;
		#on_publish http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_publish;
		#on_done http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_done;
		#on_play_done http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_play_done;
		#on_publish_done http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_publish_done;
		#on_record_done http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_record_done;
		#on_update http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_update;
		#notify_update_timeout 10s;
                }  
		#on_connect http://192.168.145.1:8795/boot/operations/desktopMonitoringReceive/on_connect;
    }
  1. 推流

推流过程省略可以用obs推流等软件OBS下载地址

  1. 播放rtmp直播流(使用flv.js)

nginx +rtmp+nginx-http-flv-module (Centos7)环境搭建_nginx

  1. html播放代码
<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>




【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月19日 0

暂无评论