nginx+rtmp+nginx-rtmp-module +hls 视频直播环境搭建

视屏流nginx+nginx-rtmp-module

1、下载文件nginx-1.8.1.tar.gz 和模块nginx-rtmp-module

nginx下载地址：http://nginx.org/en/download.html

nginx-rtmp-module 下载地址：https://github.com/arut/nginx-rtmp-module

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

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

  mkdir /usr/local/nginx

4、安装依赖项

yum -y install unzip   //解压软件
/*nginx 安装依赖库*/
yum -y install gcc-c++ 
yum -y install pcre pcre-devel  
yum -y install zlib zlib-devel 
yum -y install openssl openssl-devel

5、将tools 下面的nginx-rtmp-module-1.2.1.zip 解压到/usr/local/nginx下面

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

6、解压nginx

cd /opt/tools
tar -zxvf nginx-1.8.1.tar.gz
cd nginx-1.8.1

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

./configure --prefix=/usr/local/nginx  --add-module=/usr/local/nginx/nginx-rtmp-module  --with-http_ssl_module    //添加nginx-rtmp-module模板
make && make install  //安装nginx

8、修改配置文件，在配置文件中加入RTMP 部分(针对HLS 直播协议)

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

rtmp{
	server{
		listen 9000;//hls 推流地址
		chunk_size 4000;
		application hls{
			 live on;
			 hls on;
			 hls_path /usr/local/nginx/html/hls;//推流文件存放地址
			 hls_playlist_length 5s;
			 hls_fragment 2s;	
			 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       8002;
        server_name  localhost;
        location /hls{
        types{
		application/vnd.apple.mpegurl m3u8;
		video/mp2t ts;
		}
		autoindex on;
		alias /usr/local/nginx/html/hls;
		expires -1;
		add_header Cache-Control no-cache;
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-				Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
	}
	location / {
    root   html;
    index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
            root   html;
        }
    }

}

9、修改配置文件，在配置文件中加入RTMP 部分(针对RTMP 直播协议)

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

rtmp{
server{
	listen 9000;
	chunk_size 4000;
            application vod {
        play /usr/local/nginx/html/vod;
    }
	application live{
	 live on;
	}
	application hls{
	 live on;
	 hls on;
	 hls_path /usr/local/nginx/html/hls;
	 hls_fragment 1s;	
	 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       8002;
        server_name  localhost;
	
	location /hls{
	types{
		application/vnd.apple.mpegurl m3u8;
		video/mp2t ts;
	}
	autoindex on;
        alias /usr/local/nginx/html/hls;
	expires -1;
	add_header Cache-Control no-cache;
	add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 	add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
	}
   location /stat {    
            rtmp_stat all;
        rtmp_stat_stylesheet stat.xsl;
    }

    location /stat.xsl {
        root /usr/local/nginx-rtmp-module/;
    }

        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

10、HLS 进行推流

11、安装OBS Studio软件

obsstudio 官网下载地址：https://obsproject.com/download

安装下载软件：OBS-Studio-23.2.1-Full-Installer-x64.exe

12、启动OBS Studio 软件，并添加推流视频

13、配置推流地址（针对HLS 直播），开始推流

开始推流：

14 、配置推流地址（针对RTMP直播），开始推流

开始推流,点击”开始推流“按钮

浏览器访问nginx stat 页面

15、前端播放HLS(vedio.js)

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>fz-live</title>
  <link href="./css/video.css" rel="stylesheet">
  <script src="./js/video.js"></script>
  <script src="./js/videojs-live.js"></script>
</head>
<body>
  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="500" 
  data-setup='{}'>
   <source src="http://192.168.42.32:8002/hls/cwj001.m3u8"/> 
  </video>
  
  <script>
  </script>
  
</body>
</html>

16 前端播放RTMP(ezuikit.js 萤石云播放插件) 前端播放浏览器必须运行FLASH

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>视频直播</title>
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/ezuikit.js"></script>
</head>
<body>
  <div style="width:100%;height:100%;background:green;">
        <video id="myPlayer" style="width:100%;height:100%;" poster="" controls playsinline webkit-playsinline autoplay>
            <source src="rtmp://192.168.42.32:9000/live/cwj001"type="" /></video>
    </div>
    <script type="text/javascript">
        $(function () {
            player = new EZUIPlayer('myPlayer');
        });
    </script>
</body>
</html>

注：这种方式推流，拉流播放，hls 直播方式会有延时（大概10s）,所以用了rtmp ,但是rtmp 拉流播放浏览器必须支持flash 所以兼容性不好