nginx-http-flv-module的使用记录

之前web端播放摄像头数据全部使用的是video标签播放rtmp流需要依赖flash，而chrome浏览器对flash的支持到2020年12月底，而且现在使用flash播放rtmp每次都需要启用flash，特别麻烦。

之前使用的是nginx-rtmp 模块来做流媒体服务器，现在从网上找到使用http-flv的方式替代rtmp方式去掉flash依赖，用的是哔哩哔哩开源的一个nginx流媒体模块,先记录如下

准备：

nginx-http-flv-module windows下载

windows系统

vlc （可选）

ffmpeg 推流命令

ffmpeg  -i rtsp://admin:admin12345@192.168.1.64:554/h264/ch1/main/av_stream -vcodec copy -acodec copy  -f flv   rtmp://localhost/live/video_1"

注释一下

上面是把rtsp流（主流摄像头出来的流）转成rtmp流

-i 为输入流 demo为海康摄像头的主码流，不同的摄像头流的格式不同，可参考

最后的rtmp 为转化后的流 此主要对应到nginx流媒体服务器的rtmp application模块，一个是地址，一个是application的名称，否则推流将不成功。

其实不用nginx 做流媒体也可以，个人还是比较喜欢srs 作为流媒体服务器。

ffmpeg 文档地址

nginx 流媒体服务器配置

worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#error_log  logs/error.log  debug;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

# 添加RTMP服务
rtmp {
    server {
        listen 1935; # 监听端口

        chunk_size 4000;
        application live {  //此处
            live on;
	    	gop_cache on;
        }
    }
}

# HTTP服务
http {
    include       mime.types;
    default_type  application/octet-stream;

    #access_log  logs/access.log  main;

    server {
    	listen  8080; # 监听端口
		location /stat.xsl {
       		root html;
    	}
		location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
    	}
	    location / {
            root html;
    	}
	    location /live {  
            flv_live on;
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
            add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
            add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
            add_header 'Cache-Control' 'no-cache';
        }
    }
}

http-flv 访问路径

http://localhost:8080/live?port=1935&app=live&stream=video_1

注释一下

链接？ 前面的 live 为nginx http:server 模块里的 /live

port= 为rtmp 服务端口

app= 为 应用名称，对应rtmp里面 某一个application

stream= 为某一个应用里面具体的唯一的一个流的标识，比如说一个摄像头出来可能有多个流，那每个流我们都可以给他起一个标识。

html 核心代码

<video id="videoElement" autoplay width="1024"  height="576" muted >
</video>

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
<script>
	if (flvjs.isSupported()) {
        startVideo()
    }
    function startVideo(){
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            hasVideo: true,
            enableStashBuffer: true,
            url: 'http://localhost:8080/live?port=1935&app=live&stream=video_1'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
 </script>

参考文章

https://blog.csdn.net/caowenjing123/article/details/94623466

https://github.com/winshining/nginx-http-flv-module/blob/master/README.CN.md