海康摄像头chrome高版本实时播放（java集成）

最近公司项目需要在web上实时播放摄像头视频。但是早前由于html发展太慢。浏览器不支持。各大视频厂商基本都是开发扩展插件来实现。但是目前各大浏览器都有安全机制，基本不允许额外安装插件等，百度了很多。很多都是基于ie，，使用active插件实现，而我们公司项目优化是基于谷歌，，，，而且不能使用插件（用户体验）。
所以整理一套。无需安装插件，在任意浏览器实时播放摄像头视频
正文：
部署nginx、ffmpeg转为rtmp、利用video.js播放，无需浏览器安装插件摄像头采用海康威视的
1、确认提供流是否能够播放：打开vlc播放器【媒体–》打开网络串流，输入流地址】。这里海康提供的rtsp流地址，
【rtsp://账号:密码@IP地址:554/1】【端口号默认554】
2、将nginx、ffmpeg 解压后放置d盘根目录。配置环境变量path：D:\ffmpeg\bin
相关文件地址：https://download.csdn.net/download/qq_40112624/12298728
3、启动nginx【运行文件中的exe文件，运行一闪之后任务管理器查看nginx.exe进程存在即可】，也可控制台启动nginx:

在浏览器输入http://localhost:8088/或者127.0.0.1:8088或者本机的IP地址，弹出如下页面表示搭建成功。
4、验证是否配置成功：cmd 输入ffmpeg 提示一大段话即可
5、cmd中输入
在cmd窗口中，打开nginx之后，输入命令ffmpeg -i “rtsp://admin:123456@192.168.2.165:554/1” -vcodec copy -acodec copy -f flv “rtmp://[此处可以用localhost,可以用127.0.0.1，也可以用本机ip]:1935/live/”,之后显示如下界面表示转码成功：

6、打开vcl播放器，播放rtmp://localhost/live，看看是否成功
视频如下：
这样转流步骤就完成了
7、RTMP视频播放web播放，html代码如下：

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> 
<script src="../static/RTMP/adminlte-2.3.6/plugins/jQuery/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="../static/RTMP/adminlte-2.3.6/plugins/video-js-5.19.2/video-js.css"/>
<script src="../static/RTMP/adminlte-2.3.6/plugins/video-js-5.19.2/video.js"></script>

            <div class="video-wrapper" style="padding-bottom:55%;position:relative;margin:0 auto;">
                <div class="video-inner" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                    <video id="videojs" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 50%; height: 50%;" controls preload="none"
                           poster="" x5-video-player-fullscreen=”true”，x5-video-player-type=”h5”>
                        <source src="rtmp://198.168.0.80:1935/hls/stream" type="rtmp/mp4"></source>
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">
                                supports HTML5 video
                            </a>
                        </p>
                    </video>
                </div>
            </div>
        </div> 
        <!-- wrapper-->
        <script>
            videojs.options.flash.swf = '../static/RTMP/adminlte-2.3.6/plugins/video-js-5.19.2/video-js-fixed.swf';
            videojs.options.techOrder = ['html5','flash'];
            var player = null;             
            player = videojs("videojs",{
                notSupportedMessage : '您的浏览器没有安装或开启Flash,戳我开启！',
                techOrder : ["flash"],
                autoplay : true
            });
            player.on("error",function(e){
                var $e = $(".vjs-error .vjs-error-display .vjs-modal-dialog-content");
                var $a = $("<a href='http://www.adobe.com/go/getflashplayer' target='_blank'></a>").text($e.text());
                $e.empty().append($a);
            }); 
        </script>
    </section>
</div> 

相关文件地址：[https://download.csdn.net/download/qq_40112624/12300090](https://download.csdn.net/download/qq_40112624/12300090) 下面集成到java中即可。