FFmepg+nginx-rtmp+video.js实现海康威视摄像头实时监控

本文链接：https://blog.csdn.net/weixin_43812837/article/details/107864103

海康威视摄像头实时监控，Windows版

最近有摄像头视频监控的需求，通过大量的搜索学习。目前比较常见的是ffmepg+nginx-rtmp+video.js来实现的。这里讲解的是Windows系统中可以适用的demo，希望能帮助到需要的各位。

虽然这个可以实现实时监控，但是页面要使用flash插件，在2020年底，各大浏览器都要抛弃flash。所以这个方案需要修改，我也会在后续进行更新。

几种插件的介绍

nginx-rtmp

nginx的一个扩展插件，用来将ffmepg转换后的rmtp视频流收集起来(可能描述的不准确)，然后video.js就可以通过rtmp命令展示视频了

ffmepg

ffmepg在用来做视频推流的，将摄像头视频流推送，下载好以后需要配置系统环境，将路径添加到path变量下即可

video.js

页面中展示视频文件时会用到，需要用到flash插件

三种资源我都有上传，有需要可以去下载，或者在网络中下载。
链接：https://pan.baidu.com/s/1X-QVv-x2MDZ0F-Oxgv9edw 提取码：3f0g

实现的流程

1.配置nginx.conf并启动

目录位置在/conf下

worker_processes  1;

error_log  logs/error.log info;

events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935;
        chunk_size 4096;
        #直播流配置
        application live {
            live on;
            hls_path temp/hls;#切片视频文件存放位置
            hls_fragment 10s;#每个视频切片时长
            hls_playlist_length 60s;#可以回看的时间
        }

    }
}

http {
    include mime.types;
    default_type application/octet-stream;

    server {
        listen      80;
        server_name localhost;

        location / {
            root html;
            index  index.html index.htm;
        }

    }

    server {
        listen      8088;

        default_type  application/octet-stream;
        #add_header 'Access-Control-Allow-Origin' "*";
        
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root html;
        }
		
        location /live {  
            #server hls fragments  
            types{  
                application/vnd.apple.mpegurl m3u8;  
                video/mp2t ts;  
            }  
            alias /temp/hls;  #nginx会产生.m3u8视频在该路径下
            expires -1;  
            add_header Cache-Control no-cache;
        }  
    }
}

配置好后保存文件，启动nginx。我这里使用nginx目录下cmd命令启动
在这里插入图片描述
直接输入nginx，回车即可

这里说一下关闭，直接点击目录里的stop.bat等几秒就可以了

2.启动ffmepg

这里也是通过cmd命令启动，启动后输入指令进行rtsp转换rtmp，下面是转换的事例代码

ffmpeg -rtsp_transport tcp -i "rtsp://用户名:密码@摄像头设备ip:554/h264/ch1/main/av_stream" -vcodec copy -f flv -an rtmp://localhost:1935/live/test

-rtsp_transport tcp 是让ffmpeg走tcp协议，默认udp丢包严重

rtsp中的ch1是通道号数，这需要根据你的摄像头进行修改。可以通过Vlc工具检查rtsp是否正确。

rtmp://localhost:1935/live/test 是后续要使用的rtmp流，这个和nginx中的rtmp配置有关。

在这里插入图片描述
回车之后出现frame=35 fps=12…的字段说明开始传送流了

3.使用Video.js

index页面代码：

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

<head>
    <meta charset="UTF-8">
    <title>video.js</title>
    <link href="./lib/video7.3.0/video-js.min.css" rel="stylesheet">
    <script src="./lib/video7.3.0/video.min.js"></script>
    <script src="./lib/flash/videojs-flash.min.js"></script>
</head>

<body>
    <video id="liveVideo" class="video-js" controls autoplay preload="auto" width="1366"
        height="768" data-setup="{}">
        <source src="rtmp://localhost:1935/live/test" type="rtmp/flv">
    </video>
</body>
</html>