关于海康摄像头web无插件版本的开发历程

之前也没接触过关于摄像头的开发，突然直接公司接到项目自己也很无奈加懵逼智能硬着头皮查资料，各种资料都差强人意吧，跌跌撞撞总算搞完了，也不想有些兄弟跟我一样走一样的路，也不想有些博主搞个收费进去啥卵没得真的气人。希望能帮助到兄弟姐妹们。不多说直接上完整流程。（因为我用的是web开发包，有个前提是你的摄像头支持webscoket流）
1.怎么看自己的摄像头是否支持webscoket流
拿到摄像头的ip地址，每个摄像头都有自己的ip地址然后直接在谷歌浏览器中输入ip地址，输入摄像头设置的密码和用户名。然后查看知否支持如下图，启用就可以了。
在这里插入图片描述

2.访问海康开放平台地址（https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=20&id=4c945d18fa5f49638ce517ec32e24e24）
在这里插入图片描述
我下载的无插件开发包，下载后里面有文档操作说明的首先根据它的文档运行nginx（nginx配置文件最好是改成本地地址127.0.0.1），运行了以后
根据文档步骤进行操作，比如我的访问127.0.0.1:82/cn/index.html,我的端口是82，
在这里插入图片描述

在这里插入图片描述
只要阅览成功后图像能出来就可以开始二次开发了，我先前打本用vue来用的搞了一段时间没搞出来基本都会是报错，狠下心直接html写了，网上好模板页面，把海康下载下来的东西全扔进入，对照上面的页面那个按钮对应的那些方法，去海康的cn/demo.js下面去找方法，然后更具自己需求去找对应的方法的用法，效果图如下，下面继续介绍
在这里插入图片描述

我的画面显示一个因为外的div宽度和画面一样大小并且显示一个画面，并且吧其他要用的页面或者是js 都放在了cn下面，方便用，我改成选择那个炉直接展示那个炉的画面，实际上就是每选择一个选项栏就去请求一次登录，这需要自己认证看demo.js里面的方法了，我大概是这么改的
在这里插入图片描述
两个方法我颠倒了一下顺序因为在 getChannelInfo();中我还有东西去处理，所以先去请求了端口，直接放图

上面登录成功下面需要再加上两个方法，先前没注意这个bug

 if (-1 == iRet) {
			    	console.log("已登录过000000000000000000000")
			       // showOPInfo(szDeviceIdentify + " 已登录过！");
			        getDevicePort();
		                getChannelInfo();
			    }

到这里js 基本算是改完了接下来是页面请求注意的地方

2.页面注意的地方
主要是请求故意是大多数人烦恼的毕竟是原生页面，不要慌继续看
引入vue.js，axios.js 怎么引入文件呢继续看
vue.js引入，进入vue官网
在这里插入图片描述
复制地址在浏览器打开查看网页源代码，复制全部代码，在你的项目目录下面创建vue.js 贴进去，就可以了
关于axios下载https://github.com/axios/axios，打开下载后在包里面找axios.js 文件复制到项目即可。
最请求封装reuqest.js


const instance = axios.create({
    baseURL: 'http://xxxx:8085/hk-server',
    timeout: 10000
})
function get(url, params) {
   return new Promise((resolve, reject) => {
    instance.get(url, { params: params })
        .then((res) => {
            resolve(res.data);
        })
        .catch((err) => {
            reject(err.data);
        });
  });
}
function post(url, data) {
  return new Promise((resolve, reject) => {
    instance.post(url, data,{
            headers:{
                'Content-Type':'application/json'
            }
        })
        .then((res) => {
            resolve(res.data);
        })
        .catch((err) => {
            reject(err);
        });
    });
}

这个是axios 请求封装，请求封装好了一定要把request.js放在，vue和axios下面不然会报错哟
在这里插入图片描述

在这里插入图片描述

基本上就这些了点个赞各位兄弟姐妹

关于海康摄像头web无插件版本的开发历程

猜你喜欢