一, 下载jq和js海康插件
!!!需要下载VideoWebPlugin.exe这个应用 ,需要的滴滴
二,引入js 在index.html里面进行引入 三,data里面定义内容1.下载播放插件和css-js文件 链接：链接：链接：https://pan.baidu.com/share/init?surl=_OlD-Uas3l8EIYxqKShgAQ
提取码：yyds
gpuMode: 0, // 是否开启 GPU 硬解，不建议开启，0-不开启 1-开启 现在用的是 0
streamMode: 0, // 主子码流标识，0-主码流 1-子码流 现在用的是 0
transMode: 1, // 传输协议，0-UDP 1-TCP 现在用的是 1
wndId: -1, // 监控点的默认窗口播放是-1
appkey: "123456", //海康威视平台提供
secret: "abcdefgh", //海康威视平台提供
ip: "120.0.0.1", // 播放ip地址
port: "10080", // 端口
snapDir: "d:\SnapDir", // 抓图存储路径
videoDir: "d:\VideoDir", //录像存放地址
layout: "1x1", //playMode 指定模式的布局
playMode: 0, //播放类型 0 预览 1回放 没值报错
isHttps: "1", // https协议类型
language: "zh_CN", //配置多语言模式 默认中文 或者 英文
swfHeight: "", //视频插件动态高度
swfWidth: "", //视频插件动态宽度
// 全局的this.oWebControl this.WebControl
oWebControl: null,
WebControl: null,
//beforeMount生命周期
beforeMount() {
this.WebControl = WebControl;
},
//插件初始化, 成功就触发 this.init() 这个方法 如果没有成功则是没有下载插件,需要提示用户下载插件,给了一个d框
下载插件方法 插件在上面地址网盘里面
//初始化插件
initPluginMon() {
var that = this;
this.oWebControl = new WebControl({
szPluginContainer: "noscopendvd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
// 创建WebControl实例成功
cbConnectSuccess: () => {
this.oWebControl
.JS_StartService("window", {
// WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
})
.then(
() => {
// 启动插件服务成功
this.oWebControl.JS_SetWindowControlCallback({
// 设置消息回调
cbIntegrationCallBack: this.cbIntegrationCallBack,
});
this.oWebControl
.JS_CreateWnd("noscopendvd", this.swfWidth, this.swfHeight) //动态插件宽高
.then(() => {
//JS_CreateWnd创建视频播放窗口，宽高可设定
this.init(); // 创建播放实例成功后初始化
});
},
() => {
// 启动插件服务失败
}
);
},
// 创建WebControl实例失败
cbConnectError: () => {
this.oWebControl = null;
$("#noscopendvd").html("插件未启动，正在尝试启动，请稍候...");
this.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
this.initCount++;
if (this.initCount < 2) {
setTimeout(() => {
this.initPlugin();
}, 1000);
} else {
// console.log("插件启动失败，请检查插件是否安装!");
// 触发 d框
this.centerDialogVisible = true;
}
},
// 异常断开：bNormalClose = false
cbConnectClose: (bNormalClose) => {
// JS_Disconnect正常断开：bNormalClose = true
console.log("cbConnectClose");
this.oWebControl = null;
},
});
},
getPubKey(callback) {
var that = this;
this.oWebControl
.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then(function (oData) {
// console.log(oData, "这个是获取公钥结果");
// console.log(argument, "这个是获取公钥参数");
if (oData.responseMsg.data) {
that.pubKey = oData.responseMsg.data;
callback();
}
});
},
setCallbacks() {
this.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: this.cbIntegrationCallBack,
});
},
cbIntegrationCallBack(oData) {
console.log(oData.responseMsg);
/* showCBInfo(JSON.stringify(oData.responseMsg)); */
},
setEncrypt(value) {
var encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
return encrypt.encrypt(value);
},
setWndCover() {
let iWidth = $(window).width();
let iHeight = $(window).height();
let oDivRect = $("#noscopendvd").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.swfWidth ? this.swfWidth : iCoverLeft;
iCoverTop = iCoverTop > this.swfHeight ? this.swfHeight : iCoverTop;
iCoverRight = iCoverRight > this.swfWidth ? this.swfWidth : iCoverRight;
iCoverBottom =
iCoverBottom > this.swfHeight ? this.swfHeight : iCoverBottom;
this.oWebControl.JS_RepairPartWindow(
0,
0,
this.swfWidth + 1,
this.swfHeight
); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) {
this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.swfHeight);
}
if (iCoverTop != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
0,
this.swfWidth + 1,
iCoverTop
); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight != 0) {
this.oWebControl.JS_CuttingPartWindow(
this.swfWidth - iCoverRight,
0,
iCoverRight,
this.swfHeight
);
}
if (iCoverBottom != 0) {
this.oWebControl.JS_CuttingPartWindow(
0,
this.swfHeight - iCoverBottom,
this.swfWidth,
iCoverBottom
);
}
},
init() {
var that = this;
// console.log("触发了");
this.getPubKey(function () {
var appkey = that.appkey;
var secret = that.secret;
var ip = that.ip;
var szPort = that.port;
var snapDir = that.snapDir;
var videoDir = that.videoDir;
var layout = that.layout;
var playMode = that.playMode;
var enableHttps = parseInt(that.isHttps);
var port = parseInt(szPort);
var argument = {
appkey: appkey,
secret: secret,
ip: ip,
playMode: that.playMode, // 预览
port: port,
snapDir: snapDir,
videoDir: videoDir,
layout: layout,
enableHTTPS: enableHttps,
};
that.oWebControl
.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify(argument),
})
.then(function (oData) {
// console.log(oData, "这是初始化的结果");
// console.log(playMode, "这是播放类型");0 or 1
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));
});
});
},
// 显示窗口
showwnd() {
this.oWebControl.JS_ShowWnd();
},
// 隐藏窗口
hidewnd() {
this.oWebControl.JS_HideWnd();
},
previewVideo(indexcodes) {
//注意indexcides 这个是存放视频流编号的 当你调用该方法的时候需要把信息当成形参传递进去
// 点击摄像头的list 调用previewVideo方法传递形参未indexcodes
// indexcodes 这个值就是监控点的编号
// 有了这个编号才能进行播放,务必确认是否正确,和存在
console.log(indexcodes, "监控点编号");
// 插件框显示
this.showwnd();
var that = this;
// var cameraIndexCode = this.cameraIndexCode;
// 给监控点编号重新赋值cameraindexCode
var cameraIndexCode = indexcodes;
// 主子码流标识，0-主码流 1-子码流 现在用的是 0
var streamMode = +this.streamMode;
// 传输协议，0-UDP 1-TCP 现在用的是 1
var transMode = +this.transMode;
// 是否开启 GPU 硬解，不建议开启，0-不开启 1-开启 现在用的是 0
var gpuMode = +this.gpuMode;
// 监控点的默认窗口播放是-1
var wndId = -1; //默认为空闲窗口回放
var v = this.PlayType;
// .JS_RequestInterface 是通用的 功能不同是funcName 的不同
// funcName 是 startPreview 就是 实时视频
// startPlayback 是 回放视频
// stopAllPreview 停止所有的视频预览
// stopAllPlayback 停止所有的视频回放
that.oWebControl
.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
// 监控点编号
cameraIndexCode: cameraIndexCode,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
// 默认播放的窗口
wndId: wndId,
}),
})
.then(function (oData) {
// console.log(indexcodes);
console.log(oData, "这是视频预览的结果");
});
},
stopAllPreview() {
this.oWebControl
.JS_RequestInterface({
funcName: "stopAllPreview",
})
.then(function (oData) {});
// 隐藏视频插件框 并反向初始化 下次点击回放的时候也需要先反向初始化
this.hidewnd();
this.uninit();
},
离开页面关闭页面的时候
destroyed() {
//停止预览 销毁
this.stopAllPreview();
},
startPlayback(indexcodess, indextime) {
//注意 indexcodess 是调用这个方法传递过来的数据 indextime 是传递过来的开始时间和结束时间
//回放录像需要这个两个参数 camerindexcode = indexcodess 和开始时间已结束时间 也可以只要开始时间往前面推1分钟或几分钟
var that = this;
// console.log(indextime, "------|||||||-----");
// 监控编号
var cameraIndexCode = indexcodess;
// 回放时间
var indextimes = indextime.split("T")[0];
var indextimess = indextime.split("T")[1].split(".")[0];
var startTimeStamp = indextimes + " " + indextimess;
var endTimeStamp = indextimes + " " + indextimess;
startTimeStamp =
new Date(startTimeStamp.replace("-", "/").replace("-", "/")).getTime() -
1000 * 20;
endTimeStamp =
new Date(endTimeStamp.replace("-", "/").replace("-", "/")).getTime() +
1000 * 60;
// console.log(startTimeStamp, endTimeStamp);
var recordLocation = +this.recordLocation;
var transMode = +this.transMode;
var gpuMode = +this.gpuMode;
var wndId = -1; //默认为选中窗口回放
var v = this.PlayType;
if (v === "2") {
//指定窗口回放
wndId = parseInt(this.playWndId, 10);
} else if (v === "0") {
//空闲窗口回放
wndId = 0;
}
if (!cameraIndexCode) {
showCBInfo("监控点编号不能为空！", "error");
return;
}
if (!Number.isNaN) {
Number.isNaN = function (n) {
return typeof n === "number" && window.isNaN(n);
};
}
if (Number.isNaN(+startTimeStamp) || Number.isNaN(+endTimeStamp)) {
showCBInfo("时间格式有误！", "error");
return;
}
this.oWebControl
.JS_RequestInterface({
funcName: "startPlayback",
argument: JSON.stringify({
// 监控件单号 必传
cameraIndexCode: cameraIndexCode,
// 开始时间 必传
startTimeStamp: Math.floor(startTimeStamp / 1000),
// 结束时间 必传
endTimeStamp: Math.floor(endTimeStamp / 1000),
// 记录位置 必传
recordLocation: recordLocation,
transMode: transMode,
gpuMode: gpuMode,
wndId: wndId,
}),
})
.then(function (oData) {
});
},
stopAllPlayback() {
this.oWebControl
.JS_RequestInterface({
funcName: "stopAllPlayback",
})
.then(function (oData) {
// showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));
});
this.hidewnd();
this.uninit();
},
//注意funcName 是不一样的触发的方法也就不一样了
mounted() {
this.initPluginMon();
},
addcamerlist(date){
//首先需要判断点击的列表传递过来的date是否存在camerindexcode 再执行下一步
//存在camerindexcode
if(date.camerindexcode){
//动态显示视频插件并开启窗口缩放 和 监听滚动条scroll事件
window.addEventListener("resize", () => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
}
});
$(window).resize(() => {
this.swfHeight = document.getElementById("noscopendvd").offsetHeight;
this.swfWidth = document.getElementById("noscopendvd").offsetWidth;
console.log(this.swfHeight, this.swfWidth, "resize后的数据");
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
}
});
}
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
$(window).scroll(() => {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
this.setWndCover();
}
});
//调用视频预览功能 并把date.camerindecode 当成形参传递过去
this.oWebControl.JS_ShowWnd();
this.playMode = this.num;
this.playMode = 0;
this.uninit();
this.init();
//如果加载不出需要延时器来延时执行可能有的值还未加载出来
this.previewVideo(date.camerindexcode);
//是视频插件窗口赋值不然会出不来
this.swfHeight = document.getElementById("noscopendvd").offsetHeight;
this.swfWidth = document.getElementById("noscopendvd").offsetWidth;
this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
}
watch: {
isHttps: "updatePort",
},
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）