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

itxiaoxd2020

已于 2022-06-26 09:29:59 修改

阅读量1.3w

点赞数 2

文章标签： websocket 音视频网络协议 html5 物联网

于 2022-05-21 11:37:57 首次发布

本文链接：https://blog.csdn.net/qq_40351360/article/details/124894387

版权

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<option value="2">Sub stream</option><option value="3">Third stream</option>
        <option value="4">Transcode stream</option></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
在这里插入图片描述