Vue项目接入海康威视智能应用平台监控摄像头全过程分享

最近项目需要对接天目慧眼系统（基于海康威视智能应用平台），获取几个监控点的摄像头并展示在前端，这里用到的api就两个：/api/resource/v1/cameras分页获取监控点资源、/api/video/v1/cameras/previewURLs获取监控点预览取流URL。

首先，我们需要获取摄像头IP和端口号，还有AK/SK(AK(Access Key ID)：访问密钥ID。与私有访问密钥关联的唯一标识符；访问密钥ID和私有访问密钥一起使用，对请求进行加密签名。SK(Secret Access Key)：与访问密钥ID结合使用的密钥，对请求进行加密签名，可标识发送方，并防止请求被修改。)

其次，使用官方提供的OpenAPI接口测试工具(见下图中5)测试所需接口是否正常返回，正常的话继续使用官方提供的H5player(见下图中4)验证上一步返回的监控点预览取流URL是否可以预览。这里我研究了很久，想仅通过前端拼接请求头等信息直接获取监控点预览取流URL，但最后人工客服说了目前只能保证postman能调通接口，不能保证通过此方式请求到接口，还是得通过后端集成官方提供的OpenAPI 安全认证库 (见下图中6)，然后前端调用后端接口获取相应信息。

视频流协议类型有4种：rtsp-rtsp协议、rtmp-rtmp协议、hls-HLS协议、ws-Websocket协议。我最后采用的是ws，没有采用hls是因为获取的监控点预览取流URL是http的，好像有跨域问题，懒得再设置了。

最后将H5player引入到Vue项目中，接入视频流进行预览。我们先把H5player文件夹中的h5player.min.js和Decoder.js放到vue项目对应路径下；再把<script src="./h5player.min.js"></script>、<script src="./Decoder.js"></script>两个标签引入index.html中；接着在页面中加入<div id="H5Video"></div>；

接着像下方一样写方法即可。需要注意的是：流媒体播放时必传入的参数名称需要为“playURL”，我在代码里给它赋值监控点预览取流url了。不这样设置可能会导致报错和无法播放。

  //下方为海康视频播放器所需变量const { JSPlugin } = window;var curIndex = 0; // 当前窗口下标var myPlugin = new JSPlugin({szId: "H5Video", //需要英文字母开头 必填szBasePath: "@/utils/h5player.min.js", // 必填,引用H5player.min.js的js相对路径// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高iWidth: 600,iHeight: 400,// 分屏播放，默认最大分屏4*4openDebug: true,// 分屏播放iMaxSplit: 4,iCurrentSplit: 1,// 设置样式oStyle: {border: "#FFF",borderSelect: "#FFCC00",background: "#000",},});initPlugin();// 事件初始化function initPlugin() {myPlugin.JS_SetWindowControlCallback({windowEventSelect(iWindIndex) {// 插件选中窗口回调console.log("windowSelect callback: ", iWindIndex);},pluginErrorHandler(iWindIndex, iErrorCode, oError) {// 插件错误回调console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError);},windowEventOver(iWindIndex) {// 鼠标移过回调console.log("鼠标移过回调", iWindIndex);},windowEventOut(iWindIndex) {// 鼠标移出回调console.log("鼠标移出回调", iWindIndex);},windowFullCcreenChange(bFull) {// 全屏切换回调console.log("全屏切换回调", bFull);},firstFrameDisplay(iWndIndex, iWidth, iHeight) {// 首帧显示回调console.log("首帧显示回调", iWndIndex, iWidth, iHeight);},performanceLack(iWndIndex) {// 性能不足回调console.log("性能不足回调", iWndIndex);},});realplay();}// 播放初始化function realplay() {let startTime, endTime;var playURL = res2.data.url; //获取到的监控点预览取流URLmyPlugin.JS_Play(res2.data.url,{playURL, // 流媒体播放时必传mode: 0, // 解码类型：0=普通模式; 1=高级模式 默认为0},curIndex, //当前窗口下标// 回放参数startTime,endTime).then(() => {console.info("JS_Play success");// do you want...},(err) => {console.info("JS_Play failed:", err);// do you want...});}

Vue项目接入海康威视智能应用平台监控摄像头全过程分享相关推荐

vue项目接入海康威视H5player.js 2.0版（回放示例）
概要公司项目接入海康威视的球形监控设备,需要项目支持使用海康威视监控视频,以及视频回放等功能.项目要求无插件接入,使用户体验最佳.所以采用海康威视的h5player.js,因为接入时,海康威视的js ...
vue项目接入腾讯im
vue项目接入腾讯im 查看文档先安装SDK依赖在项目脚本里引入模块添加监听事件用户登录发送消息查看文档首先贴上文档地址 https://cloud.tencent.com/docume ...
vue项目打包到腾讯云服务器全过程
本文将记录vue项目打包放到服务器的整个过程,本文中的例子是express+vue,希望能给遇到这方面问题的同学一个解决办法. 登录服务器假定已经拥有一个服务器账号,然后下载一个xftp5用来作文件 ...
vue项目打包部署到腾讯云全过程
文章目录 1.打包本地vue项目 2.购买云服务器 3.使用xshell 4.在xshell里安装宝塔 5.宝塔操作 6.成功访问关于前端部署研究了挺久的,一开始毫无头绪也走了很多弯路,看了许多视频 ...
vue项目接入阿里云智能验证
首先是官方链接 https://help.aliyun.com/document_detail/122767.html?spm=5176.2020520162.0.0.5ca95fb04qNiKh 有 ...
vue项目接入eslint、prettier、husky+lint-staged
引言在vue-cli官方的脚手架创建项目时,会自动让选择Eslint+Prettier,如果是老项目想接入,那么按照下面步骤接入即可 eslint安装 npm i -D eslint eslint- ...
vue项目接入e2e自动化测试
文章目录 1.安装night-watch 2.安装浏览器驱动 3.关于Selenium(音译:斯利涅姆) Server 4.配置文件 5.修改配置文件 5.1 更新默认使用chromedriver 5 ...
vue项目接入视频监控系列-------播放器的选择
在智慧城市发展迅速的今天,视频监控接入web平台的需求似乎成了不可或缺和潮流.博主准备对自己开发视频监控项目的经历做个记录,整理成一个系列的文章. 在前端发展迅速的今天,h5的出现让在web平台实现无 ...
Vue项目接入百度地图，更改地图主题色
接入流程: 1: 在Vue创建的项目里找到index.html的文件,在index.html文件里添加. <script type="text/javascript" src ...

Vue项目接入海康威视智能应用平台监控摄像头全过程分享

Vue项目接入海康威视智能应用平台监控摄像头全过程分享相关推荐

最新文章

热门文章