海康威视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处理可以 ...
随机推荐
- 2021最新Java面试题全集-20210326版
在手撕了数千道网络流传的面试题,外加十多个不眠之夜, 终于从里面精心挑选出约500道题目, 做为大家求职.跳槽前复习准备面试使用. 一:挑选题目的原则: 常考的.常被面试问到的 题目有一定的深度和难度 ...
- 段间跳转之TSS段
TR寄存器,TSS描述符,TSS段 TR寄存器与普通的段寄存器一样都有可见部分和不可见部分.TR的可见部分为16位为其段选择子,不可见部分是32位的TSS基地址和16位的大小. TSS描述符存在GDT ...
- Django（26）HttpResponse对象和JsonResponse对象
HttpResponse对象 Django服务器接收到客户端发送过来的请求后,会将提交上来的这些数据封装成一个HttpRequest对象传给视图函数.那么视图函数在处理完相关的逻辑后,也需要返回一个响 ...
- [bug] Unable to create initial connections of pool.
原因1 pom中mysql依赖的版本不对,导致无法连接mysql 原因2 SSL设置问题 参考 https://blog.csdn.net/qq_26346457/article/details/79 ...
- 使用CSS样式的三种方法
一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...
- [bug] Junit initializationError
原因 导包错误 解决 先删除 import org.junit.Test; 再导入正确的包 参考 https://blog.csdn.net/javae100/article/details/7978 ...
- 【转载】使用rdp协议访问远程Linux桌面
使用rdp协议访问远程Linux桌面 2017年03月31日 16:23:49 太阳之影 阅读数:2169 一般情况下,如果需要登陆远程Linux系统,我们会使用ssh/telnet来完成,如果需 ...
- 012.Python的字典和集合的相关函数
一 字典的相关函数 1.1 增函数 dictvar = {"a":1,"b":2} dictvar["c"] = 3 print(dictv ...
- 我的Python书被台湾的出版社引进版权了，书的名字也更吸引人了
我去年出了一本Python书,基于股票大数据分析的Python入门实战,在这本书里,我是用股票范例讲述Pythorn的爬虫,数据分析和机器学习知识点,如下是京东的连接. https://item.jd ...
- IDEA 最实用快捷键【MAC版本】
目录 option + F7 Ctrl + B / Ctrl +鼠标左键(一键两用,可以无限循环的跳过来跳过去,我跳过去了,我又跳回去了) command + E (这个快捷键很有用,为什么我老是用不 ...