nginx+ffmpeg实现rtsp转hls流 video.js 实现H5播放

1、下载nginx，地址：http://nginx.org/en/download.html,下载链接2：http://nginx-win.ecsds.eu/download/，如果要用nginx-rtmp-module，建议下载nginx 1.7.11.3 Gryphon.zip，如果下载其他的，需要重新编译一下，把rtmp-module编译进去。nginx 1.7.11.3 Gryphon.zip这个压缩包我下了几次才下载成功，上午试着下了几次出现文件不存在，下午又试时，突然就可以下载了。下载的压缩包解压后重命名为nginx-1.7.11.3-Gryphon

2、下载nginx-rtmp-module，地址：https://github.com/arut/nginx-rtmp-module#example-nginxconf，把文件解压后粘贴在nginx-1.7.11.3-Gryphon目录下，如图：

3、配置nginx-1.7.11.3-Gryphon文件夹下conf里面的nginx-win-rtmp.conf文件

把文件内容替换为：

    
#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
rtmp{
    server {
        listen 1935;
        chunk_size 4000;
        #RTMP
        application live {
             live on;
 
             # record first 1K of stream
             record all;
             record_path d:/tmp/av;
             record_max_size 1K;
 
             # append current timestamp to each flv
             record_unique on;
 
             # publish only from localhost
             allow publish 127.0.0.1;
             deny publish all;
 
             #allow play all;
        }
        #HLS
        # For HLS to work please create a directory in tmpfs (/tmp/app here)
        # for the fragments. The directory contents is served via HTTP (see
        # http{} section in config)
        #
        # Incoming stream must be in H264/AAC. For iPhones use baseline H264
        # profile (see ffmpeg example).
        # This example creates RTMP stream from movie ready for HLS:
        #
        # ffmpeg -loglevel verbose -re -i movie.avi  -vcodec libx264 
        #    -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 
        #    -f flv rtmp://localhost:1935/hls/movie
        #
        # If you need to transcode live stream use 'exec' feature.
        #
        application hls {
            live on;
            hls on;
            hls_path d:/tmp/hls;
            hls_fragment 3s;
			hls_cleanup on;
			hls_playlist_length 3s; 
        }
		application hls2 {
            live on;
            hls on;
            hls_path d:/tmp/hls2;
            hls_fragment 1s;
			hls_cleanup on;
			hls_playlist_length 1s; 
        }
		application hls3 {
            live on;
            hls on;
            hls_path d:/tmp/hls3;
            hls_fragment 1s;
			hls_cleanup on;
			hls_playlist_length 1s; 
        }
		application hls4 {
            live on;
            hls on;
            hls_path d:/tmp/hls4;
            hls_fragment 1s;
			hls_cleanup on;
			hls_playlist_length 1s; 
        }
    }
}
 
http{
    server {
        listen 8765;
        server_name  localhost;
		#charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   html;
            index  index.html index.htm;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        }
 
        location /hls {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            alias d:/tmp/hls;
            expires -1;
			add_header Cache-Control no-cache;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        }
		
		location /hls2 {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            alias d:/tmp/hls2;
            expires -1;
			add_header Cache-Control no-cache;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        }
		location /hls3 {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            alias d:/tmp/hls3;
            expires -1;
			add_header Cache-Control no-cache;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        }
		location /hls4 {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            alias d:/tmp/hls4;
            expires -1;
			add_header Cache-Control no-cache;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        }
		location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
       }
 
       location /stat.xsl {
           root /usr/local/extend_module/nginx-rtmp-module/;
       }
 
        error_page   500 502 503 504  /50x.html;
 
        location = /50x.html {
            root   html;
        }
        
    }
}

然后在nginx所在的电脑上的d盘间文件夹：如图

建文件夹原因是nginx-win-rtmp.conf这样配置的：

4、下载FFmpeg,地址：http://ffmpeg.org/download.html，配置环境添加到path变量中，如何配置环境变量：如何设置win10系统的环境变量

5、注意文件最好不要放在中文目录下

（1）运行nginx，在nginx-1.7.11.3-Gryphon目录上输入cmd,回车（enter）,然后输入nginx.exe -c conf\nginx-win-rtmp.conf 回车回车（enter）

（2）如果配置好环境变量，直接win+r  cmd 输入转换命令；如果没有配置好找到ffmpeg.exe文件所在目录，地址栏清空，输入cmd,回车，进入命令行界面，输入转换命令：

ffmpeg -i rtsp://admin:abcd1234@192.168.6.6:554 -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_wrap 3 -vcodec copy -f flv -r 25 -an rtmp://localhost:1935/hls/cctv1

出现如下界面说明推流成功

这时在D盘可以看到如下内容：

用浏览器打开写好的html界面：

<!DOCTYPE html>
<html>
<head>
    <title>VideoLayerPlayer</title>
    <style type="text/css">
        html, body {
            background-color: #111;
            text-align: center;
        }
    </style>   
    <link href="video-js.min.css" rel="stylesheet" />
</head>
<body>

   
    <video id='myVideo' class='video-js vjs-default-skin vjs-big-play-centered' style="object-fit:fill">
        <source src="http://127.0.0.1:8765/hls/cctv1.m3u8" type="application/x-mpegURL" />
    </video>
    
    <script src="jquery-3.4.1.min.js"></script>
    <script src="video.js"></script>
 
    <script type="text/javascript">
	var dha="http://127.0.0.1:8765/hls/cctv1.m3u8"
        var player = videojs('myVideo', {
            autoplay: true
        });
       
    </script>

</body>
</html>

 

，可以看到如下界面，说明运行成功：

 

注意：

有可能谷歌打开不能自动播放，video实现加上 muted="muted"就可以了，

采用websocket 添加或更改视频地址时，要至少延迟五秒左右再播放视频，如下图：