欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Windows环境下基于NGINX进行rtmp推流直播

程序员文章站 2022-07-14 18:26:24
...

准备工作

NGINX下载地址
Rtmp扩展下载地址
下载完进行解压
Windows环境下基于NGINX进行rtmp推流直播
nginx点播设置

worker_processes  1;
 
events {
    worker_connections  1024;
}
 
##################RTMP服务#################
rtmp {
 
    server {
 
        listen 1935;  #//服务端口 
 
	chunk_size 4096;   #//数据传输块的大小
 
	application video {
	    play /usr/local/data/video; #//视频文件存放位置,访问方式rtmp://localhost:1935/video
 
	    #如视频路径存有视频welcome.mp4访问路径即为rtmp://localhost:1935/video/welcome.mp4
	}
    }
}
 
http {
    include       mime.types;
 
    default_type  application/octet-stream;
 
    sendfile        on;
 
    keepalive_timeout  65;
 
    server {
 
        listen       80;
 
        server_name  localhost;
 
        location / {
            root   html;
            index  index.html index.htm;
        }
 
        error_page   500 502 503 504  /50x.html;
 
        location = /50x.html {
            root   html;
        }
    }
}

nginx直播设置

worker_processes  1;
 
events {
    worker_connections  1024;
}
 
##################RTMP服务#################
rtmp {
 
    server { 
 
        listen 1935;
 
        chunk_size 4096;
 
        application video {
           play /usr/local/data/video;
        }
 
	application live{ #第一处添加的直播字段
	   live on;
	}
    }
 
}
####启动浏览器查看http://localhost:80/stat
http {
    include       mime.types;
 
    default_type  application/octet-stream;
 
    sendfile        on;
 
    keepalive_timeout  65;
 
    server {
 
        listen       80;
 
        server_name  localhost;
 
    location /stat {     
            #第二处添加的location字段。
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
    }
 
    location /stat.xsl { 
        #第二处添加的location字段。
        root /usr/local/nginx/nginx-rtmp-module/;
    }
 
        location / {
            root   html;
            index  index.html index.htm;
        }
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

nginx 直播回放配置

worker_processes  1;
 
events {
    worker_connections  1024;
}
 
##################RTMP服务#################
rtmp {
    server {
        listen 1935;
        chunk_size 4096;
 
        application video {
            play /usr/local/data/video;
        }
 
        application live {
 
		live on;#直播模式
 
		hls on; #这个参数把直播服务器改造成实时回放服务器。
 
		wait_key on; #对视频切片进行保护,这样就不会产生马赛克了。
 
		hls_path /usr/local/data/hls; #切片视频文件存放位置。
 
		hls_fragment 10s;     #每个视频切片的时长。
 
		hls_playlist_length 60s;  #总共可以回看的事件,这里设置的是1分钟。
 
		hls_continuous on; #连续模式。
 
		hls_cleanup on;    #对多余的切片进行删除。
 
		hls_nested on;     #嵌套模式。
        }
    }
}
 
http {
    include       mime.types;
 
    default_type  application/octet-stream;
 
    sendfile        on;
 
    keepalive_timeout  65;
 
    server {
            listen       80;
 
            server_name  localhost;
 
	    location /stat {
		    rtmp_stat all;
		rtmp_stat_stylesheet stat.xsl;
	    }
 
	    location /stat.xsl {
		root /usr/local/nginx/nginx-rtmp-module/;
	    }
 
	    location /live {  #这里也是需要添加的字段。
 
		types {  
 
		    application/vnd.apple.mpegurl m3u8;  
 
		    video/mp2t ts;  
		}
		alias /opt/video/hls;   
		expires -1;
		add_header Cache-Control no-cache;  
	    }  
 
	   location / {
		root   html;
		index  index.html index.htm;
	   }
 
	   error_page   500 502 503 504  /50x.html;
 
	   location = /50x.html {
		root   html;
	   }
    }
}

启动nginx rtmp服务

nginx.exe -c conf\nginx-win-rtmp.conf

Windows环境下基于NGINX进行rtmp推流直播
都弄完了之后安装OBS

安装obs

百度也可以查到OBS的官网进行下载,但是慢
OBS的github下载地址
默认就是中文版的,不要瞎找,自己按需下载
Windows环境下基于NGINX进行rtmp推流直播
安装之后的设置
Windows环境下基于NGINX进行rtmp推流直播

服务器地址照着我的写就行,直播秘钥对应的是拉流地址,
拉流地址等于 服务器地址+秘钥

Windows环境下基于NGINX进行rtmp推流直播
需要在输出里面设置模式为高级,不然会推流不成功

Windows环境下基于NGINX进行rtmp推流直播
最后进行推流
Windows环境下基于NGINX进行rtmp推流直播
点击开始推流,,成功推流

拉流

播放器的demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>测试rtmp直播源</title>
    <script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
    <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
    <!-- If you'd like to support IE8 -->
    <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
</head>

<body>
    <div class="openFlashTips" style="width:300px;position:absolute;top:20px;left:225px;z-Index:9999;color:white">
        视频无法正常播放,请点击下方启用flash</div>
    <video id="my-video" style="color:black;width:750px;height:350px" class="video-js" autoplay controls preload="auto"
        width="750" height="350" data-setup="{}">
        <source src='rtmp://127.0.0.1:1935/live/test' type='rtmp/flv' />
    </video>
    <embed width="300" height="70" class="openFlash" style="position:absolute;top:130px;left:225px;z-Index:9999;"
        type="application/x-shockwave-flash">
    <script type="text/javascript" language="JavaScript">
        function flashChecker() {
            var hasFlash = 0; //是否安装了flash
            var flashVersion = 0; //flash版本
            var isIE = /*@aaa@qq.com*/ 0; //是否IE浏览器

            if (isIE) {
                var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
                if (swf) {
                    hasFlash = 1;
                    VSwf = swf.GetVariable("$version");
                    flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
                }
            } else {
                if (navigator.plugins && navigator.plugins.length > 0) {
                    var swf = navigator.plugins["Shockwave Flash"];
                    if (swf) {
                        hasFlash = 1;
                        var words = swf.description.split(" ");
                        for (var i = 0; i < words.length; ++i) {
                            if (isNaN(parseInt(words[i]))) continue;
                            flashVersion = parseInt(words[i]);
                        }
                    }
                }
            }
            return {
                f: hasFlash,
                v: flashVersion
            };
        }

        var fls = flashChecker();
        var s = "";
        if (fls.f) {
            document.getElementsByClassName("openFlash")[0].style.display = "none";
            document.getElementsByClassName("openFlashTips")[0].style.display = "none";
            //        document.write("您安装了flash,当前flash版本为: " + fls.v + ".x");
        } else {
            document.getElementsByClassName("openFlash")[0].style.display = "block";
            document.getElementsByClassName("openFlashTips")[0].style.display = "block";
            //        document.write("您没有安装flash");
        }
    </script>
</body>

</html>

最终效果
Windows环境下基于NGINX进行rtmp推流直播

相关标签: 架构 nginx