在自己网页浏览器端通过websocket接入海康摄像头实时视频

1.背景

由于目前有很多浏览器不再支持Flash进行视频的播放，在网页使用RTMP转RTSP的方式进行实时视频的播放，需要Flash的支持，这种方式在服务器上部署安装比较繁琐，并且这种方式不太稳定，会出现中断播放的情况，还会消费服务端较多的资源。综上种种情况，基本放弃了RTMP转RTSP这种方式了，如果摄像头支持websocket的方式，可以使用该方案。

前提条件：摄像头需要支持websocket方式播放视频

播放视频支持高版本谷歌、火狐浏览器

2.下载海康摄像头demo代码

海康开放平台：
https://open.hikvision.com/login
海康摄像头demo代码下载地址：
https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24

下载好之后按照下载的zip里面的文档进行demo的实时视频的播放

注意： 浏览器访问地址最好不要是localhost,最好用ip,不然可能播放不了。

3.将海康摄像头demo中预览实时视频的功能引入自己网页中

将海康摄像头demo中的css和js文件引入自己的项目中。
自己的网页中加入代码（也是参考demo中的代码，但是为了实现功能做了一些修改，可以参考）：

<div id="videoWindow" ><div class="closeBtn" id="videoClose" style="position: absolute; left: 4%; top: 65%; width: 80%; height: 60%; z-index: 1000;display: none;">
        <div id="divPlugin" class="plugin" style="position: fixed;bottom: 0px;left: 0px;display:none;">
        div><i v-if="isShow" class="iconfont icon-guanbi" style="position: fixed;bottom: 297px;left: 481px;color: black;"  @click="cancel">
        i><input id="loginip" style="display: none;" type="text" class="txt" value="ip" />
        <input id="port" style="display: none;" type="text" class="txt" value="80" />
        <input id="username" style="display: none;" type="text" class="txt" value="账户名" />
        <input id="password" style="display: none;" type="password" class="txt" value="密码" />
        <input id="rtspport" style="display: none;" type="text" class="txt" />
        <select id="ip" style="display: none;" class="sel" onchange="getChannelInfo();getDevicePort();">
        select><select id="channels" style="display: none;" class="sel">select><select id="streamtype" style="display: none;" class="sel">
        <option value="1">Main stream<option value="2">Sub streamoption><option value="3">Third streamoption>
        <option value="4">Transcode streamoption>select><input type="button"  class="btn" value="登录"style="position: fixed;bottom: 10px;left: 0px;display: none;" onclick="clickLogin();" />
div>

登录js代码
注意：把海康摄像头预览功能嵌入自己的网页中，最最最最最最重要的坑。调用海康摄像头登录接口之前要清空cookie中所有的值，预览成功之后，再重新把原来的cookie值加上，这个方法改方案中比较重要的。不这样，如果你cookie中有值海康摄像头会报以下错误：
502 bad gateway

总结：多看第三点和第四点写的注意事项，那些是比较重要的。其他事项要求自己对代码整体要有一定的把控，本方案只是讲了实现方法和其中的坑，以及重要的代码，具体能否实现，看自己是否认真和细致。有用的话希望点赞加收藏，方法都是本人实际总结的。