前言：
项目需要在web上实时播放摄像头视频。该项目部署在局域网上，无外网，所以不能调用萤石云的api进行视频拉取。
百度了很多方法，尝试了使用海康威视WEB开发包3.0，但是只支持IE浏览器。但是项目基于谷歌浏览器。
所以最后采用转流的方式，部署nginx、ffmpeg将rtsp转为rtmp格式、利用video.js在web网页上进行视频播放，无需浏览器安装插件。这里延伸一点：HTML5的可以支持rtmp，但是无法播放rtsp，flash也止步于rtmp。
一、 前期工作：
环境：windows 服务器
1、摄像头准备工作：
将海康威视的视频摄像头和本地电脑连接在同一网段，并设置好摄像头的IP地址和端口号等。
2、安装vcl视频播放器：
下载地址：/download/wfanking/13195866
3、测试rstp地址正确性。
打开vcl播放器，测试rtsp地址是否能播放成功，再进行接入操作。不然都是白扯。
【海康威视】取流说明：
如果摄像头密码是fun123456,IP是192.168.1.64，RTSP端口默认554未做改动，是H.264编码，那么 主码流取流:
rtsp://admin:fun123456@192.168.1.64:554/h264/ch1/main/av_stream 子码流取流:
rtsp://admin:fun123456@192.168.1.64:554/h264/ch1/sub/av_stream
ps：如果是H.265编码的，那么将H.264替换成H.265即可
二、直播接入指南
1、下载软件包，解压。
下载地址：/download/wfanking/13195883
将修改好配置的压缩包解压，nginx、ffmpeg 解压后放置c盘根目录。
2、配置ffmpeg环境变量path：
path：C:\ffmpeg\bin，此处不做过多详释。
3、验证ffmpeg是否配置成功：
cmd 输入ffmpeg 提示一下信息即可
4、启动nginx
运行文件中的exe文件，运行一闪之后任务管理器查看nginx.exe进程存在即可，启动成功如下图
5、cmd中输入转流命令：
ffmpeg -i ffmpeg -i “rtsp://admin:fun123456@192.168.1.64:554/ch1/sub/av_stream” -vcodec h264 -f flv -an “rtmp://localhost/live”
回车后控制台持续打印转流信息:
6、测试rstp地址正确性：
再次打开vcl播放器，播放rtmp视频，验证是否成功。若播放成功，则转流步骤就完成了
7、前端展示部分：
src写入rtmp://localhost.live流即可
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>阿饭的摄像头</title><!--引入播放器样式--><link href="/5.19/video-js.min.css" rel="stylesheet"><!--引入播放器js--><script src="/5.19/video.min.js"></script><script src="/npm/videojs-flash@2/dist/videojs-flash.min.js"></script></head><body><div class="div1"><!--vjs-big-play-centered 播放按钮居中--><!--poster默认的显示界面，就是还没点播放，给你显示的界面--><!--controls 规定浏览器应该为视频提供播放控件--><!--preload="auto" 是否提前加载--><!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}--><video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="//C:/photo/1.jpg"width="700" height="400" data-setup='{}'><!--src: 规定媒体文件的 URL type:规定媒体资源的类型--><source src='rtmp://localhost/live/' type='rtmp/flv' /></video></div><script type="text/javascript">// 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器videojs.options.flash.swf = '/videojs-swf/5.4.1/video-js.swf';var player = videojs('my-player'); //my-player为页面video元素的idplayer.play(); //播放// 1. 播放 player.play()// 2. 停止 player.pause()// 3. 暂停 player.pause()</script></body></html>
三、效果查看
四、踩过的坑锦集：
1、chrome谷歌浏览器前端视频播放报错：No compatible source was found for this media，解决方法 见附件链接—> /wfanking/article/details/110253314
2、chrome谷歌浏览器前端视频播放报错：FLASH: rtmpconnectfailure解决方法， 见附件链接—> /wfanking/article/details/110253689
