海康威视RTSP摄像头转RTMP推流前端方案（测试阶段）

  因公司业务需求，最近研究了海康威视摄像头推流到web前端的实用技术方案，因为之前并没有接触过相关技术方向，所以在实现的时候不说走了弯路，砍掉的技术方案也不少了，下面慢慢说这一个月的学习历程。

---

  需求是需要把摄像头监控视频实时显示到浏览器的系统上，大体实现了三个版本，也可以说是按三个难度层级进行实现的：

  一. 测试阶段--技术方案可行性测试

  二. 集成到java web框架中，实现摄像头动态配置，并能在前端看到实时监控

  三. 拥抱H5，摆脱对flash的依赖，并编写简易的权限验证，避免任何人都能直接访问流媒体服务器监控视频

---

测试阶段

一. 电脑连接摄像头设备

  首先需要手头上有海康威视摄像头设备以方便调试。

  将电脑和摄像头用网线连接，摄像头插上电源，如果有NVR需求需要的则要把摄像头、NVR和电脑分别通过网线连接到交换机上。

二. 连接海康威视摄像头

  把电脑网段和摄像头设置到一个网段，这样才能通过浏览器访问摄像头配置地址。

选择更改适配器

更改本机以太网地址

摄像头登陆界面

  能进到这个界面说明就能连接摄像头了，这个时候需要打开IE浏览器并安装webcomponent插件，确保能进行视频预览就行。

三. 下载VLC media player和FFmpeg视频转码工具

  下载其他播放器也行，只要保证能播放RTSP和RTMP协议的视频流，这里VLC并不是功能需要，仅作为能直观验证推流操作是否正确的一个工具。

  下载好后把FFmpeg配置到环境变量的Path中（也不是必须的，仅仅为了方便点）。

  首先查看能不能通过VLC工具查看RTSP视频推流

打开网络串流

输入拉流地址

拉流画面

  拉流格式rtsp://用户名:密码@摄像头地址:端口号/编码/通道号/主(子)码流/av_stream，这里不清楚的百度下海康威视摄像头推流地址规则，能看到就证明摄像头的拉流地址没问题，不能看到就需要看下摄像头RTMP推流端口是不是配对了。

四. 下载nginx和nginx-rtmp-module，并配置conf文件

  测试阶段用的是nginx-rtmp-module，在第三个版本中因为各种考虑换成了nginx-http-flv-module，这里也可以直接用后者进行测试。最好下载别人已经编译好的版本，能省很多时间。

  配置conf文件。

配置nginx.conf文件

worker_processes 1;

error_log  logs/error.log debug;

events {

    worker_connections  1024;

}

rtmp {

    server {

        listen 1935;

        application live {

            live on;

        }

        application hls {

            live on;

            hls on; 

            hls_path temp/hls; 

            hls_fragment 8s; 

        }

    }

}

http {

    server {

        listen      8080;

        location / {

            root html;

        }

        location /stat {

            rtmp_stat all;

            rtmp_stat_stylesheet stat.xsl;

        }

        location /stat.xsl {

            root html;

        }

        location /hls { 

            #server hls fragments 

            types{ 

                application/vnd.apple.mpegurl m3u8; 

                video/mp2t ts; 

            } 

            alias temp/hls; 

            expires -1; 

        } 

    }

}

  运行nginx.exe，双击一闪而过就行，看看控制台里面是不是有相应进程。这里提醒几个地方，开机的时候控制台中是有nginx相应进程的，但是还是要运行一次exe才能顺利进行推流，测试阶段后期在桌面创建bat或者sh脚本文件运行时，只有命令行窗口一直存在才是成功启动服务器的标指，一闪而过的话就要用命令行执行bat文件查看相应报错信息从而修改conf文件中的配置了。

运行nginx

五. 用FFmpeg进行推流操作

  win+R，cmd，进入命令行，输入ffmpeg -thread_queue_size 128 -rtsp_transport tcp -i "rtsp://admin:[email protected]:554/h264/ch1/main/av_stream" -f flv -s 1024x600 -an rtmp://localhost:1935/live/room，执行，live/可以看成直播频道，后面room为自定义的直播间名字。

命令行推流

  注意上图中红框中的视频流格式，推流成功但是浏览器播放不了大多数情况都是这里格式的原因。

  还是用VLC的网络串流地址（将目的地址输进去rtmp://localhost:1935/live/room）验证是否推流成功。

六. 前端浏览器播放

  测试阶段我用的是videojs（5.xx.x版本），需要浏览器中运行flash插件，IE貌似没有禁止flash就能直接播放。还有一点需要提醒的就是要通过videojs播放视频，必须把相应页面放在web应用中运行，不然不能播放，其他插件同理。

  前端页面代码：

  基本上引用路径对了就能播放了

七. 问题及总结

  测试阶段基本上是验证此技术方案的可行性，后期改动也基本上围绕这套实现方案进行调优。

  测试阶段使用的是FFmpeg在命令行进行推流，推到nginx搭建的流媒体服务器，然后让前端访问流媒体服务器的推流地址浏览监控视频。优点就是易于实现，少量摄像头的前端显示易于实现，但是弊端也很明显，当需要部署到外网服务器上时，如果需要修改对应推流地址就要登录服务器重新在命令行推流，还需要同步修改前端的推流地址，不能动态改变推流地址等；且当摄像头数量多了会不好维护，服务器桌面也将杂乱不堪，所以有必要将推流和停止推流操作集成到web系统中。