云建站自动建站系统源码,网页设计师简介,wordpress速度慢2018,模板免费网站建设一、登录海康开放平台下载web开发包#xff0c;下载需要先登录海康账号#xff0c;没有的需先注册一个。
这里的appkey、ip、port、secret 和cameraIndexCodeasd是自己去申请的 appkey: ****, ip: ****, port: **, secret: ****, //必填…一、登录海康开放平台下载web开发包下载需要先登录海康账号没有的需先注册一个。
这里的appkey、ip、port、secret 和cameraIndexCodeasd是自己去申请的 appkey: ****, ip: ****, port: **, secret: ****, //必填},cameraIndexCodeasd: ***, //必填 摄相机的code海康开放平台web开发包下载地址开发包下载地址点击下载即可
二、打开bin文件夹下的VideoWebPlugin.exe点击安装完成 三、将web开发包引入vue项目
demo下的js文件
放到public中即可
script src./jquery-1.12.4.min.js/script
script src./web-control_1.2.5.min.js/script
script src./jsencrypt.min.js/script四、template内容和data
templatedivdiv idplayWnd classplayWnd //div
/template
script
// 声明公用变量
var oWebControl null;
var initCount 0;
var pubKey ;
export default {/*** index :当前组件所属页面 设备管理 为空 ||实时监控 realTime* type : 回放 || 直播* code : 监控点编号 监控设备页面String || 实时监控 Array* time 回放时间 暂时废弃*/props: [mode, code],data() {return {swfWidth: 1920, //宽度swfHeight: 1080, //高度playText: ,objData: {appkey: ****, //必填ip: ****, //必填port: **, //必填443是默认secret: ****, //必填},cameraIndexCodeasd: ***8, //必填 摄相机的codeA线挂牌机器人入口};},}
/script五、在methods中创建WebControl实例 initPlugin() {var that this;oWebControl new WebControl({szPluginContainer: playWnd,iServicePortStart: 15900,iServicePortEnd: 15900,szClassId: 23BF3B0A-2C56-4D97-9C03-0CB103AA8F11, // 用于IE10使用ActiveX的clsidcbConnectSuccess() {console.log(创建WebControl实例成功);oWebControl.JS_StartService(window, {// WebControl实例创建成功后需要启动服务dllPath: ./VideoPluginConnect.dll, // 值./VideoPluginConnect.dll写死}).then(() {// // 启动插件服务成功oWebControl.JS_SetWindowControlCallback({// 设置消息回调cbIntegrationCallBack: that.cbIntegrationCallBack,});oWebControl.JS_CreateWnd(playWnd, that.swfWidth, that.swfHeight).then(() {//JS_CreateWnd创建视频播放窗口宽高可设定// oWebControl.JS_SetDocOffset({// left: 250,// top: 125,// }); // 更新插件窗口位置oWebControl.JS_Resize(that.swfWidth, that.swfHeight);setTimeout(() {that.initBtnClicked(); // 创建播放实例成功后初始化}, 1000);});},() {// 启动插件服务失败}).catch((err) {console.log(err);});},cbConnectError: function () {var that this;// 创建WebControl实例失败oWebControl null;that.$message.warning(插件未启动正在尝试启动请稍候...);that.playText 插件未启动正在尝试启动请稍候...;window.WebControl.JS_WakeUp(VideoWebPlugin://); // 程序未启动时执行error函数采用wakeup来启动程序initCount;if (initCount 3) {setTimeout(function () {that.initPlugin();}, 3000);} else {that.$message.warning(插件启动失败请检查插件是否安装);// console.log(initCount)that.playText 插件启动失败请检查插件是否安装;if (initCount 3) {that.frontDownload();//未安装安装包执行下载安装}}},cbConnectClose: () {var that this;// 创建WebControl实例失败oWebControl null;that.$message.warning(插件未启动正在尝试启动请稍候...);that.playText 插件未启动正在尝试启动请稍候...;window.WebControl.JS_WakeUp(VideoWebPlugin://); // 程序未启动时执行error函数采用wakeup来启动程序initCount;if (initCount 3) {setTimeout(function () {that.initPlugin();}, 3000);} else {that.$message.warning(插件启动失败请检查插件是否安装);// console.log(initCount)that.playText 插件启动失败请检查插件是否安装;if (initCount 3) {that.frontDownload();}}},});},六、如果未安装提示安装下载 // 下载插件frontDownload() {var a document.createElement(a); // 创建一个a/a标签var peizhiurl this.changeIp;a.href peizhiurl /VideoWebPlugin.exe; // 给a标签的href属性值加上地址注意这里是绝对路径不用加 点.a.download VideoWebPlugin.exe; // 设置下载文件文件名这里加上.xlsx指定文件类型pdf文件就指定.fpd即可a.style.display none; // 障眼法藏起来a标签document.body.appendChild(a); // 将a标签追加到文档对象中a.click(); // 模拟点击了a标签会触发a标签的href的读取浏览器就会自动下载了a.remove(); // 一次性的用完就删除a标签},七、初始化
// 初始化requestInterface(value) {oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {// console.log(oData);// this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ));});},startPreview(cameraCode) {console.log(cameraCode, cameraCode);// 点击查询后显示oWebControl.JS_ShowWnd();var cameraIndexCode 0e3c3db37ff042f58b4b87e12d08f812; // 获取输入的监控点编号值必填var streamMode 0; // 主子码流标识0-主码流1-子码流var transMode 1; // 传输协议0-UDP1-TCPvar gpuMode 0; // 是否启用GPU硬解0-不启用1-启用var wndId -1; // 播放窗口序号在2x2以上布局下可指定播放窗口cameraIndexCode cameraIndexCode.replace(/(^\s*)/g, );oWebControl.JS_RequestInterface({funcName: startPreview,argument: JSON.stringify({cameraIndexCode: cameraIndexCode, // 监控点编号streamMode: streamMode, // 主子码流标识transMode: transMode, // 传输协议gpuMode: gpuMode, // 是否开启GPU硬解wndId: wndId, // 可指定播放窗口}),});},// 获取公钥getPubKey(callback) {oWebControl.JS_RequestInterface({funcName: getRSAPubKey,argument: JSON.stringify({keyLength: 1024,}),}).then(function (oData) {console.log(oData);if (oData.responseMsg.data) {pubKey oData.responseMsg.data;callback();}});},// 设置窗口控制回调setCallbacks() {oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack: this.cbIntegrationCallBack(),});},// 推送消息// cbIntegrationCallBack(oData) {// showCBInfo(JSON.stringify(oData.responseMsg));// },// RSA加密setEncrypt(value) {var encrypt new JSEncrypt();encrypt.setPublicKey(pubKey);return encrypt.encrypt(value);},// 显示接口返回的消息及插件回调信息showCBInfo(szInfo, type) {if (type error) {szInfo div stylecolor: red; dateFormat(new Date(), yyyy-MM-dd hh:mm:ss) szInfo /div;} else {szInfo div dateFormat(new Date(), yyyy-MM-dd hh:mm:ss) szInfo /div;}$(#cbInfo).html(szInfo $(#cbInfo).html());},initBtnClicked() {var that this;var appkey this.objData.appkey; // 综合安防管理平台提供的appkey必填var secret this.objData.secret; // 综合安防管理平台提供的secret必填var ip this.objData.ip; //综合安防管理平台IP地址必填var playMode 0; //初始播放模式0-预览1-回放var port this.objData.port; //综合安防管理平台端口若启用HTTPS协议默认443var snapDir ; //抓图存储路径var videoDir ; //紧急录像或录像剪辑存储路径var layout 1x1; //playMode指定模式的布局var enableHTTPS 1; //是否启用HTTPS协议与综合安防管理平台交互这里总是填1// var encryptedFields secret; //加密字段默认加密领域为secretvar showToolbar 0; //是否显示工具栏0-不显示非0-显示var showSmart 0; //是否显示智能信息如配置移动侦测后画面上的线框0-不显示非0-显示var buttonIDs ; //自定义工具条按钮var params {argument: {appkey: appkey, //API网关提供的appkeysecret: secret, //API网关提供的secretip: ip, //API网关IP地址playMode: playMode, //播放模式决定显示预览还是回放界面port: port, //端口snapDir: snapDir, //抓图存储路径videoDir: videoDir, //紧急录像或录像剪辑存储路径layout: layout, //布局enableHTTPS: enableHTTPS, //是否启用HTTPS协议// encryptedFields: encryptedFields, //加密字段showToolbar: showToolbar, //是否显示工具栏showSmart: showSmart, //是否显示智能信息buttonIDs: buttonIDs, //自定义工具条按钮},funcName: init,};var param JSON.stringify(params);// console.log(params);//删除字符串中的回车换行param param.replace(/(\s*)/g, );// 执行初始化this.requestInterface(param);this.playFn();},playFn() {var cameraIndexCode this.cameraIndexCodeasd;(); //获取输入的监控点编号值必填var streamMode 0; //主子码流标识0-主码流1-子码流var transMode 1; //传输协议0-UDP1-TCPvar gpuMode 0; //是否启用GPU硬解0-不启用1-启用var wndId -1; //播放窗口序号在2x2以上布局下可指定播放窗口cameraIndexCode cameraIndexCode.replace(/(^\s*)/g, );cameraIndexCode cameraIndexCode.replace(/(\s*$)/g, );var params {argument: {cameraIndexCode: cameraIndexCode, //监控点编号streamMode: streamMode, //主子码流标识transMode: transMode, //传输协议gpuMode: gpuMode, //是否开启GPU硬解wndId: wndId, //可指定播放窗口},funcName: startPreview,};var param JSON.stringify(params);// console.log(param);//删除字符串中的回车换行param param.replace(/(\s*)/g, );// 执行预览this.requestInterface(param);},// 插件窗口销毁destoryWnd() {if (oWebControl ! null) {oWebControl.JS_HideWnd(); // 先让窗口隐藏规避可能的插件窗口滞后于浏览器消失问题oWebControl.JS_RequestInterface({funcName: destroyWnd,}); // 销毁当前播放的视频oWebControl.JS_Disconnect(); // 断开与插件服务连接}},SetDocOffset() {if (oWebControl ! null) {oWebControl.JS_Resize(this.swfWidth, this.swfHeight);}},// 格式化时间dateFormat(oDate, fmt) {var o {M: oDate.getMonth() 1, //月份d: oDate.getDate(), //日h: oDate.getHours(), //小时m: oDate.getMinutes(), //分s: oDate.getSeconds(), //秒q: Math.floor((oDate.getMonth() 3) / 3), //季度S: oDate.getMilliseconds(), //毫秒};if (/(y)/.test(fmt)) {fmt fmt.replace(RegExp.$1,(oDate.getFullYear() ).substr(4 - RegExp.$1.length));}for (var k in o) {if (new RegExp(( k )).test(fmt)) {fmt fmt.replace(RegExp.$1,RegExp.$1.length 1? o[k]: (00 o[k]).substr(( o[k]).length));}}return fmt;},八、挂载和销毁 mounted() {this.initPlugin(); // 初始化video界面window.addEventListener(resize, this.SetDocOffset);},destroyed() {// 组件销毁后this.destoryWnd();window.removeEventListener(resize, this.SetDocOffset);},beforeDestroy() {this.destoryWnd();},九、最终实现 十、一些规格参数
initBtnClicked方法中有配置性文件
var playMode 0; //初始播放模式0-预览1-回放var port this.objData.port; //综合安防管理平台端口若启用HTTPS协议默认443var snapDir ; //抓图存储路径var videoDir ; //紧急录像或录像剪辑存储路径var layout 1x1; //playMode指定模式的布局var enableHTTPS 1; //是否启用HTTPS协议与综合安防管理平台交互这里总是填1// var encryptedFields secret; //加密字段默认加密领域为secretvar showToolbar 0; //是否显示工具栏0-不显示非0-显示var showSmart 0; //是否显示智能信息如配置移动侦测后画面上的线框0-不显示非0-显示十一、最终vue页面代码
templatedivdiv idplayWnd classplayWnd //div
/templatescript
// 声明公用变量
var oWebControl null;
var initCount 0;
var pubKey ;export default {/*** index :当前组件所属页面 设备管理 为空 ||实时监控 realTime* type : 回放 || 直播* code : 监控点编号 监控设备页面String || 实时监控 Array* time 回放时间 暂时废弃*/props: [mode, code],data() {return {swfWidth: 900,swfHeight: 520,// swfWidth: 1920, //宽度// swfHeight: 1080, //高度playText: ,objData: {appkey: , //必填ip: , //必填port: 443, //必填secret: , //必填},cameraIndexCodeasd: , //必填 摄相机的codeA线挂牌机器人入口};},created() {},mounted() {this.initPlugin(); // 初始化video界面window.addEventListener(resize, this.SetDocOffset);},destroyed() {// 组件销毁后this.destoryWnd();window.removeEventListener(resize, this.SetDocOffset);},beforeDestroy() {this.destoryWnd();},methods: {...mapActions(ajax, [fetchChangeIp]),// 下载插件frontDownload() {var a document.createElement(a); // 创建一个a/a标签a.href http://172.17.20008.1:8003/VideoWebPlugin.exe; // 给a标签的href属性值加上地址注意这里是绝对路径不用加 点.a.download VideoWebPlugin.exe; // 设置下载文件文件名这里加上.xlsx指定文件类型pdf文件就指定.fpd即可a.style.display none; // 障眼法藏起来a标签document.body.appendChild(a); // 将a标签追加到文档对象中a.click(); // 模拟点击了a标签会触发a标签的href的读取浏览器就会自动下载了a.remove(); // 一次性的用完就删除a标签},initPlugin() {var that this;oWebControl new WebControl({szPluginContainer: playWnd,iServicePortStart: 15900,iServicePortEnd: 15900,szClassId: 23BF3B0A-2C56-4D97-9C03-0CB103AA8F11, // 用于IE10使用ActiveX的clsidcbConnectSuccess() {console.log(创建WebControl实例成功);oWebControl.JS_StartService(window, {// WebControl实例创建成功后需要启动服务dllPath: ./VideoPluginConnect.dll, // 值./VideoPluginConnect.dll写死}).then(() {// // 启动插件服务成功oWebControl.JS_SetWindowControlCallback({// 设置消息回调cbIntegrationCallBack: that.cbIntegrationCallBack,});oWebControl.JS_CreateWnd(playWnd, that.swfWidth, that.swfHeight).then(() {//JS_CreateWnd创建视频播放窗口宽高可设定// oWebControl.JS_SetDocOffset({// left: 250,// top: 125,// }); // 更新插件窗口位置oWebControl.JS_Resize(that.swfWidth, that.swfHeight);setTimeout(() {that.initBtnClicked(); // 创建播放实例成功后初始化}, 1000);});},() {// 启动插件服务失败}).catch((err) {console.log(err);});},cbConnectError: function () {var that this;// 创建WebControl实例失败oWebControl null;that.$message.warning(插件未启动正在尝试启动请稍候...);that.playText 插件未启动正在尝试启动请稍候...;window.WebControl.JS_WakeUp(VideoWebPlugin://); // 程序未启动时执行error函数采用wakeup来启动程序initCount;if (initCount 3) {setTimeout(function () {that.initPlugin();}, 3000);} else {that.$message.warning(插件启动失败请检查插件是否安装);// console.log(initCount)that.playText 插件启动失败请检查插件是否安装;if (initCount 3) {that.frontDownload();//未安装安装包执行下载安装}}},cbConnectClose: () {var that this;// 创建WebControl实例失败oWebControl null;that.$message.warning(插件未启动正在尝试启动请稍候...);that.playText 插件未启动正在尝试启动请稍候...;window.WebControl.JS_WakeUp(VideoWebPlugin://); // 程序未启动时执行error函数采用wakeup来启动程序initCount;if (initCount 3) {setTimeout(function () {that.initPlugin();}, 3000);} else {that.$message.warning(插件启动失败请检查插件是否安装);// console.log(initCount)that.playText 插件启动失败请检查插件是否安装;if (initCount 3) {that.frontDownload();}}},});},// 初始化requestInterface(value) {oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {// console.log(oData);// this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ));});},startPreview(cameraCode) {console.log(cameraCode, cameraCode);// 点击查询后显示oWebControl.JS_ShowWnd();var cameraIndexCode 0e3c3db37ff042f58b4b87e12d08f812; // 获取输入的监控点编号值必填var streamMode 0; // 主子码流标识0-主码流1-子码流var transMode 1; // 传输协议0-UDP1-TCPvar gpuMode 0; // 是否启用GPU硬解0-不启用1-启用var wndId -1; // 播放窗口序号在2x2以上布局下可指定播放窗口cameraIndexCode cameraIndexCode.replace(/(^\s*)/g, );oWebControl.JS_RequestInterface({funcName: startPreview,argument: JSON.stringify({cameraIndexCode: cameraIndexCode, // 监控点编号streamMode: streamMode, // 主子码流标识transMode: transMode, // 传输协议gpuMode: gpuMode, // 是否开启GPU硬解wndId: wndId, // 可指定播放窗口}),});},// 获取公钥getPubKey(callback) {oWebControl.JS_RequestInterface({funcName: getRSAPubKey,argument: JSON.stringify({keyLength: 1024,}),}).then(function (oData) {console.log(oData);if (oData.responseMsg.data) {pubKey oData.responseMsg.data;callback();}});},// 设置窗口控制回调setCallbacks() {oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack: this.cbIntegrationCallBack(),});},// 推送消息// cbIntegrationCallBack(oData) {// showCBInfo(JSON.stringify(oData.responseMsg));// },// RSA加密setEncrypt(value) {var encrypt new JSEncrypt();encrypt.setPublicKey(pubKey);return encrypt.encrypt(value);},// 显示接口返回的消息及插件回调信息showCBInfo(szInfo, type) {if (type error) {szInfo div stylecolor: red; dateFormat(new Date(), yyyy-MM-dd hh:mm:ss) szInfo /div;} else {szInfo div dateFormat(new Date(), yyyy-MM-dd hh:mm:ss) szInfo /div;}$(#cbInfo).html(szInfo $(#cbInfo).html());},initBtnClicked() {var that this;var appkey this.objData.appkey; // 综合安防管理平台提供的appkey必填var secret this.objData.secret; // 综合安防管理平台提供的secret必填var ip this.objData.ip; //综合安防管理平台IP地址必填var playMode 0; //初始播放模式0-预览1-回放var port this.objData.port; //综合安防管理平台端口若启用HTTPS协议默认443var snapDir ; //抓图存储路径var videoDir ; //紧急录像或录像剪辑存储路径var layout 1x1; //playMode指定模式的布局var enableHTTPS 1; //是否启用HTTPS协议与综合安防管理平台交互这里总是填1// var encryptedFields secret; //加密字段默认加密领域为secretvar showToolbar 0; //是否显示工具栏0-不显示非0-显示var showSmart 0; //是否显示智能信息如配置移动侦测后画面上的线框0-不显示非0-显示var buttonIDs ; //自定义工具条按钮var params {argument: {appkey: appkey, //API网关提供的appkeysecret: secret, //API网关提供的secretip: ip, //API网关IP地址playMode: playMode, //播放模式决定显示预览还是回放界面port: port, //端口snapDir: snapDir, //抓图存储路径videoDir: videoDir, //紧急录像或录像剪辑存储路径layout: layout, //布局enableHTTPS: enableHTTPS, //是否启用HTTPS协议// encryptedFields: encryptedFields, //加密字段showToolbar: showToolbar, //是否显示工具栏showSmart: showSmart, //是否显示智能信息buttonIDs: buttonIDs, //自定义工具条按钮},funcName: init,};var param JSON.stringify(params);// console.log(params);//删除字符串中的回车换行param param.replace(/(\s*)/g, );// 执行初始化this.requestInterface(param);this.playFn();},playFn() {var cameraIndexCode this.cameraIndexCodeasd;(); //获取输入的监控点编号值必填var streamMode 0; //主子码流标识0-主码流1-子码流var transMode 1; //传输协议0-UDP1-TCPvar gpuMode 0; //是否启用GPU硬解0-不启用1-启用var wndId -1; //播放窗口序号在2x2以上布局下可指定播放窗口cameraIndexCode cameraIndexCode.replace(/(^\s*)/g, );cameraIndexCode cameraIndexCode.replace(/(\s*$)/g, );var params {argument: {cameraIndexCode: cameraIndexCode, //监控点编号streamMode: streamMode, //主子码流标识transMode: transMode, //传输协议gpuMode: gpuMode, //是否开启GPU硬解wndId: wndId, //可指定播放窗口},funcName: startPreview,};var param JSON.stringify(params);// console.log(param);//删除字符串中的回车换行param param.replace(/(\s*)/g, );// 执行预览this.requestInterface(param);},// 插件窗口销毁destoryWnd() {if (oWebControl ! null) {oWebControl.JS_HideWnd(); // 先让窗口隐藏规避可能的插件窗口滞后于浏览器消失问题oWebControl.JS_RequestInterface({funcName: destroyWnd,}); // 销毁当前播放的视频oWebControl.JS_Disconnect(); // 断开与插件服务连接}},SetDocOffset() {if (oWebControl ! null) {oWebControl.JS_Resize(this.swfWidth, this.swfHeight);}},// 格式化时间dateFormat(oDate, fmt) {var o {M: oDate.getMonth() 1, //月份d: oDate.getDate(), //日h: oDate.getHours(), //小时m: oDate.getMinutes(), //分s: oDate.getSeconds(), //秒q: Math.floor((oDate.getMonth() 3) / 3), //季度S: oDate.getMilliseconds(), //毫秒};if (/(y)/.test(fmt)) {fmt fmt.replace(RegExp.$1,(oDate.getFullYear() ).substr(4 - RegExp.$1.length));}for (var k in o) {if (new RegExp(( k )).test(fmt)) {fmt fmt.replace(RegExp.$1,RegExp.$1.length 1? o[k]: (00 o[k]).substr(( o[k]).length));}}return fmt;},},
};
/scriptstyle langscss scoped
html,
body {padding: 0;margin: 0;
}
.root-haikang-video {.playWnd {// width: 100%;// height: 100%;}
}
/style
