因公司业务需求，最近研究了海康威视摄像头推流到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文件。
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文件中的配置了。
五. 用FFmpeg进行推流操作
win+R，cmd，进入命令行，输入ffmpeg -thread_queue_size 128 -rtsp_transport tcp -i "rtsp://admin:12345@192.168.2.94: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应用中运行，不然不能播放，其他插件同理。
前端页面代码：
<script src="${pageContext.request.contextPath}/js/jquery.min.js">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/js/videojs/video-js.css" />
src="${pageContext.request.contextPath}/js/videojs/ie8/videojs-ie8.js">
<script src="${pageContext.request.contextPath}/js/videojs/video.js"></script>
<script>
videojs.options.flash.swf ="${pageContext.request.contextPath}/js/videojs/video-js.swf";
</script>
基本上引用路径对了就能播放了
七. 问题及总结
测试阶段基本上是验证此技术方案的可行性，后期改动也基本上围绕这套实现方案进行调优。
测试阶段使用的是FFmpeg在命令行进行推流，推到nginx搭建的流媒体服务器，然后让前端访问流媒体服务器的推流地址浏览监控视频。优点就是易于实现，少量摄像头的前端显示易于实现，但是弊端也很明显，当需要部署到外网服务器上时，如果需要修改对应推流地址就要登录服务器重新在命令行推流，还需要同步修改前端的推流地址，不能动态改变推流地址等；且当摄像头数量多了会不好维护，服务器桌面也将杂乱不堪，所以有必要将推流和停止推流操作集成到web系统中。
