海康威视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处理可以 ...
随机推荐
- Java7中Switch为什么只支持byte、short、char、int、String
Java 7中,switch的参数可以是String类型了,这对我们来说是一个很方便的改进.到目前为止switch支持这样几种数据类型:byte short int char String .但是,作 ...
- 【Mysql】数据库索引，百万数据测试索引效果
Mysql官方对索引的定义是:索引(index)是帮助Mysql高效获取数据的数据结构.进而,我们可以知道索引的本质是数据结构. 一.索引的分类 主键索引:也就是我们常见的 PRIMARY KEY,只 ...
- zimbra启用SMTP认证
zmprov modifyServer {{ you domain }} zimbraMtaTlsAuthOnly FALSE zmcontrol restart 查看对应配置 zmprov getS ...
- 用python输出未来时间，递增
输入当前时间,之前与之后的365天时间日期 按格式化输出 #!/usr/bin/evn python # -*- coding: UTF-8 -*- # import time import date ...
- 047.Python前端html
一 HTTP协议 1.1 HTTP请求 URL: 协议/IP:端口/路径?GET参数 基于请求响应 请求协议格式 GET URL路径?a=1&b=2 HTTP # 请求首行 user-age ...
- GO学习-(13) Go语言基础之结构体
Go语言基础之结构体 Go语言中没有"类"的概念,也不支持"类"的继承等面向对象的概念.Go语言中通过结构体的内嵌再配合接口比面向对象具有更高的扩展性和灵活性. ...
- 『动善时』JMeter基础 — 37、将JMeter测试结果写入Excel
目录 1.环境准备 (1)引入操作Excel文件的基础JAR包 (2)引入封装自定义操作Excel文件的JAR包 2.准备测试需要的数据 3.测试结果写入Excel演示 (1)测试计划内包含的元件 ( ...
- TensorFlow优化器及用法
TensorFlow优化器及用法 函数在一阶导数为零的地方达到其最大值和最小值.梯度下降算法基于相同的原理,即调整系数(权重和偏置)使损失函数的梯度下降. 在回归中,使用梯度下降来优化损失函数并获得系 ...
- 立体显示与BCN双稳态手性向列相
立体显示与BCN双稳态手性向列相 狭缝光栅立体显示 技术介绍: 人的左右眼间距大约是65MM,左右眼透过视差光栅看到不同的视角图像,经大脑融合形成立体视觉. 技术优点: 2D/3D可切换: 低成本: ...
- FFmpeg扩展开发
FFmpeg扩展开发 对FFmpeg RTMP/FLV部分做了扩展,用于支持H.265. 针对<video_file_format_spec_v10_1> VIDEODATA部分扩展如下: ...