海康威视ISC平台的VUE二次开发接入实现
第一步
取得ISC平台的appkey以及secret，以及安装ISC平台的主机IP，这一步至关重要！！！
第二步
由于目前我所在的公司项目前端的代码均由vue所实现，所以利用vue-cli创建一个最简单的项目工程，别告诉我你不会，不会也可以，自己百度，然后找到index文件，别告诉我你找不到，全局搜索谢谢，在index.html文件中引入三个script文件，三个文件从哪来？海康的官网：Hikvision AI Cloud 开放平台
请下载这个程序包，程序包里面有最基本的demo以及如何使用demo以及所需要的三个script！！！
引入代码如下：
<script src="static/js/jquery-1.12.4.min.js"></script>
<script src="static/js/jsencrypt.min.js"></script>
<script src="static/js/jsWebControl-1.0.0.min.js"></script>
注意：建议三个文件放在public文件夹下，与你的index文件同级目录！这个是个坑，之前我随便放的位置，一直报错。
第三步
现在就可以愉快的创建自己的vue组件了，在components文件夹下创建一个你自己的组件，当然，你非要建在别的地方我无所谓的，自己import的时候注意一下就行。
然后，以下是代码，基本都是直接copy官网demo的代码，随便写了一下，里面的函数应该都是封装在他们提供的js文件中，哦，对了，在上一步中有个比较重要的插件需要安装，不然播放不了，自己看使用说明！！！
代码：
<template>
<body>
<!--预览界面-->
<div id="operate" class="operate">
<div class="module">
<div class="item"><span class="label">监控点编号：</span><input v-model="cameraIndexCode" type="text" value=""></div>
<div class="item" style="margin-top: 20px;margin-left: -20px;">
<button style="padding:0;margin:0;" @click="startClickFn" class="btn">预览</button>
<button style="padding:0;margin:0;" @click="stopClickFn" class="btn">停止全部预览</button>
</div>
</div>
</div>
<!--视频窗口展示-->
<div id="playWnd" class="playWnd" style="left: 109px; top: 133px;" ></div>
</body>
<!---->
</template>
<script>
export default {
name:'videoPlayerBox2',
props:{
},
data(){
return{
oWebControl: undefined,
initCount: 0,
pubKey: '',
cameraIndexCode: undefined
}
},
methods: {
//推送消息
cbIntegrationCallBack(oData){
showCBInfo(JSON.stringify(oData.responseMsg));
},
//监听自身容器大小变化
observeWrapper(){
const ro = new ResizeObserver(entries=> {
for (const entry of entries){
const cr = entry.contentRect;
this.videoWidth = cr.width;
this.videoHeight = cr.height;
this.oWebControl && this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
this.oWebControl && this.setWndCover();
}
});
ro.observe(document.querySelector('#playWnd'));
},
setWndCover(){ //裁剪插件实例的大小
let iWidth = $(window).width();
let iHeight = $(window).height();
let oDivRect = $("#playWnd").get(0).getBoundingClientRect();
let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight): 0;
iCoverLeft = (iCoverLeft > this.videoWidth) ? this.videoWidth : iCoverLeft;
iCoverTop = (iCoverTop > this.videoHeight) ? this.videoHeight : iCoverTop;
iCoverRight = (iCoverRight > this.videoWidth) ? this.videoWidth : iCoverRight;
iCoverBottom = (iCoverBottom > this.videoHeight) ? this.videoHeight : iCoverBottom;
this.oWebControl.JS_RepairPartWindow(
0,
0,
1001,
600
);
if (iCoverLeft != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
0,
iCoverLeft,
600
);
}
if (iCoverTop != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
0,
1001,
iCoverTop
);
}
if (iCoverRight != 0) {
this.oWebControl.JS_CuttingPartWindow(
1000 - iCoverRight,
0,
iCoverRight,
600
);
}
if (iCoverBottom != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
600 - iCoverBottom,
1000,
iCoverBottom
);
}
},
initPlugin(){
let that = this
this.oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function() {
that.oWebControl.JS_StartService("window",{ // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
})
.then(function(){
console.log('success')
that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
cbIntegrationCallBack: that.cbIntegrationCallBack
});
that.oWebControl.JS_CreateWnd("playWnd", 1000, 600) //JS_CreateWnd创建视频播放窗口，宽高可设定
.then(function(){
console.log('成功222',that)
that.init(); // 创建播放实例成功后初始化
})
},
function(){ // 启动插件服务失败
console.log('fail')
});
},
cbConnectError: function() { // 创建WebControl实例失败
console.log(that,'that');
that.oWebControl = null;
that.$message.error("插件未启动，正在尝试启动，请稍候...")
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
that.initCount ++;
if (that.initCount < 3){
setTimeout(function(){
that.initPlugin();
},3000)
}else{
that.$message.error("插件启动失败，请检查插件是否安装！")
}
},
cbConnectClose: function(bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
that.oWebControl = null;
}
})
},
init(){
let that = this
this.getPubKey(function(){
var appkey = "28857343"; //请自行修改为你自己的
var secret = that.setEncrypt("9xMBcxZSODgmQPQGDfng"); //请自行修改为你自己的
var ip = "192.168.28.103"; //请自行修改为你自己的
var playMode = 0; //这个是播放模式，0是预览，1是回放
var port = 443; //请自行修改为你自己的
var snapDir = "D:\\SnapDir";
var videoDir = "D:\\VideoDir";
var layout = "1x1";
var enableHTTPS = 1;
var encryptedFields = 'secret';
var showToolbar = 1;
var showSmart = 1;
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";
that.oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey,
secret: secret,
ip: ip,
playMode: playMode,
port: port,
snapDir: snapDir,
videoDir: videoDir,
layout: layout,
enableHTTPS: enableHTTPS,
encryptedFields: encryptedFields,
showToolbar: showToolbar,
showSmart: showSmart,
buttonIDs: buttonIDs
})
})
.then(function(oData){
that.oWebControl.JS_Resize(1000, 600);
})
})
},
//公钥的获取
getPubKey(callback){
let that = this
this.oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
})
.then(function(oData){
console.log(oData);
if(oData.responseMsg.data) {
that.pubKey = oData.responseMsg.data;
callback()
}
})
},
setEncrypt(value) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
return encrypt.encrypt(value);
},
startClickFn() {
var cameraIndexCode = this.cameraIndexCode;
var streamMode = 0;
var transMode = 1;
var gpuMode = 0;
var wndId = -1;
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode:cameraIndexCode,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId:wndId
})
})
},
stopClickFn(){
if (this.oWebControl && this.oWebControl.JS_RequestInterface){
this.oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
})
}
}
},
created() {
this.initPlugin();
},
mounted() {
let that = this ;
this.observeWrapper();
$(window).resize( ()=> {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(1000, 600);
this.setWndCover();
}
});
$(window).scroll( ()=> {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(1000, 600);
this.setWndCover();
}
});
},
destroyed() {
if (this.oWebControl != null){
this.oWebControl.JS_HideWnd();
this.oWebControl.JS_Disconnect()
.then(function(){
},
function(){
})
}
}
}
</script>
<style scoped>
.playWnd {
margin: 30px 0 0 400px;
width: 1000px; /*播放容器的宽和高设定*/
height: 600px;
border: 1px solid red;
}
.operate {
margin-top: 24px;
}
.operate::after {
content: '';
display: block;
clear: both;
}
.module {
float: left;
width: 340px;
/*min-height: 320px;*/
margin-left: 16px;
padding: 16px 8px;
box-sizing: border-box;
border: 1px solid #e5e5e5;
}
.module .item {
margin-bottom: 4px;
}
.module input[type="text"] {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
margin-left: 0;
width: 150px;
min-height: 20px;
}
.module .btn {
min-width: 80px;
min-height: 24px;
margin-top: 100px;
margin-left: 80px;
}
</style>
代码能看懂吧，还是挺简单的，稍微学一点就行，虽然没怎么备注代码，但是备注的话基本上你去看一下海康的demo中的代码你就知道这些函数是干嘛的了，对了，这样写会有很多的编码格式问题，你在npm run serve过程中会出现一些不让你跑的情况，所以你要在你的文件.eslintrc.js中加上那么几行，如果你的项目里面没有别的东西，建议直接换成我的，代码我也贴出来：
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-undef': 'off',
'vue/no-unused-vars': 'off',
'vue/require-v-for-key': 'off',
'no-unused-vars': 'off',
'vue/no-unused-components': 'off',
'no-mixed-spaces-and-tabs': 0
},
parserOptions: {
parser: 'babel-eslint'
}
};
如果没有这个文件自己建一个也行，这样你的代码就能跑起来了，不会有人还不会引入组件吧，自行百度。
都看到这了，代码一定都实现了吧，不点个赞再走？合适吗~？
最后贴一下自己实现的代码：
你问我为什么没有视频？废话，我写这文章的时候在吹空调，爽得很，谁有事没事回去服务器那端为了写个博客去连接服务器？
对了，不是还有个监控点编号吗，海康的ISC官网上有个OpenAPI测试的程序，你把那个下载好了，然后按照他的API指引取得安装在ISC平台上摄像头indexcode，然后填入这个方框内，就万事大吉了，有问题可以私聊，但是不是经常在线，建议加QQ找我击剑：709270121。
海康威视ISC平台的VUE二次开发接入实现的更多相关文章
- 【工业串口和网络软件通讯平台(SuperIO)教程】七.二次开发服务驱动
SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1 服务接口的作用 围绕着设备驱动模块采集的数据,根据需求提供多种应用服务,例如:数据上传服务.数 ...
- 【工业串口和网络软件通讯平台(SuperIO)教程】三.二次开发流程
1.1 二次开发流程图 1.2 引用相关组件 找到“开发包”,引用里边的相关组件.如下图: 1.3 开发设备驱动模块 1.3.1 开发发送协议驱动 继承SuperIO.Devi ...
- cWeb开发框架，基于asp.net的cWeb应用开发平台介绍（二）
cWeb是基于微软的.Net Framework 4框架,数据库是sql server 2008 r2. cWeb开发框架下载,点击这里去下载. cWeb开发框架借鉴三层架构理论分为三层,分别是:cD ...
- SNF开发平台WinForm之二-开发-单表表单管理页面-SNF快速开发平台3.3-Spring.Net.Framework
2.1运行效果: 2.2开发实现: 2.2.1 这个开发与第一个开发操作步骤是一致的,不同之处就是在生成完代码之后,留下如下圈红程序,其它删除. 第一个开发地址:开发-单表表格编辑管理页面 http: ...
- 运用Java对微信公众平台二次开发技术——开发者模式接入
当初我在这碰到了很多问题,市面上以及网络上的资料特别少,所以当初碰了很多壁,所以现在跟大家分享一下,如何用Java,对微信公众平台进行二次开发. 一.开发预备知识: 最基本的JavaSE与JavaWe ...
- E8.Net 工作流二次开发架构平台
一. 产品简介 E8.Net工作流开发架构是基于微软.Net技术架构的工作流中间件产品,是国内商业流程管理(BPM)领域在.Net平台上的领先产品,是快速搭建流程管理解决方案的二次开 ...
- 【流媒体开发】VLC Media Player - Android 平台源码编译 与 二次开发详解 (提供详细800M下载好的编译源码及eclipse可调试播放器源码下载)
作者 : 韩曙亮 博客地址 : http://blog.csdn.net/shulianghan/article/details/42707293 转载请注明出处 : http://blog.csd ...
- ERP开源框架 + 二次开发平台 介绍
经历了多年软件开发,深受网络大侠们的资源共享才得以有所成绩, 本人主要是做企业ERP软件,一直有个感受,开发具体某个功能不难,但随着需求的增加,管理庞大的代码却成了最大的问题 而为企业管理所做的开发, ...
- EasyNVR摄像机网页H5全平台无插件直播流媒体播放服务二次开发之接口鉴权示例讲解
背景需求 EasyNVR的使用者应该都清楚的了解到,EasyNVR一个强大的功能就是可以进行全平台的无插件直播.主要原因在于rtsp协议的视频流(默认是需要插件才可以播放的)经由EasyNVR处理可以 ...
随机推荐
- 认识WPF
新开一节WPF桌面开发的讲解,这节先初步认识一下什么是WPF. 1.简介 WPF是 Windows Presentation Foundation 的英文缩写,意为"窗体呈现基础" ...
- 老J的技术分享之总结
老J做IT这块有二十多个年头了,算是中国IT的见证者与参与者.那个时候刚开始接触和了解时,对于他的一些建议,我不是很乐于去接受,因为我觉得他的那一套技术体系不是很适合如今的情况,当时间久了后发现,他对 ...
- 关于MDI多文档程序的一些思考
MDI程序的框架 客户窗口是一个预定义的窗口类(MDICLIENT),它是框架窗口的子窗口同时也是各个子文档窗口的父窗口.框架窗口和各个子文档窗口都是自定义的窗口类. MDI程序中的一些要点 窗口中的 ...
- Vue | 指令实现自动翻译填充英文名功能
背景:应用系统中存在多个创建实体表单,表单填写时,在填写中文名称后,要填写对应的英文名作为标识或数据库查询索引. 需求:填写中文名的同时,系统自动生成英文名并填充到表单中,辅助用户操作,节约操作时间. ...
- redis中keys命令带来的线上性能问题
起因 下午接到运维反馈,生产redis有个执行keys的命令请求太慢了,要两三秒才能响应 涉及命令如下: KEYS ttl_600::findHeadFootData-15349232-*-head ...
- 用 set follow-fork-mode child即可。这是一个 gdb 命令，其目的是告诉 gdb 在目标应用调用fork之后接着调试子进程而不是父进程，因为在 Linux 中fork系统调用成功会返回两次，一次在父进程，一次在子进程
GDB的那些奇淫技巧 evilpan 收录于 Security 2020-09-13 约 5433 字 预计阅读 11 分钟 709 次阅读 gdb也用了好几年了,虽然称不上骨灰级玩家,但 ...
- 解决 Ubuntu 无法使用 root 用户进行 ssh 远程登陆
解决 Ubuntu 无法使用 root 用户进行 ssh 远程登陆 操作系统 Ubuntu 20.04.2 LTS 一.修改sshd配置文件 //打开 /etc/ssh/sshd_config 配置文 ...
- 详解Linux中的cat文本输出命令用法
作系统 > LINUX > 详解Linux中的cat文本输出命令用法 Linux命令手册 发布时间:2016-01-14 14:14:35 作者:张映 我要评论 这篇 ...
- 配置文件修改java安全级别和站点信息
配置文件修改java安全级别和站点信息原创Green_1001 最后发布于2015-04-22 23:00:09 阅读数 516 收藏展开 通过配置文件修改java安全级别 配置文件名称为deploy ...
- JMicro微服务Hello World
概述 JMicro是本人开发的基于Java实现的微服务框架,前两天发布0.0.3正式版本,并已发布到maven中央仓库. 项目源码github:https://github.com/mynewworl ...