vue3+vite+ts引入海康威视监控

1.首先我们在海康威视官网上面下载这个
下载以后打开demo
把这三个文件放进你的public里面去

在vue3项目里的index.html引入

    <!--三个必要的js文件引入--><script src="./public/hikvision/jquery-1.12.4.min.js"></script><script src="./public/hikvision/jsencrypt.min.js"></script><!-- 用于RSA加密 --><script src="./public/hikvision/web-control_1.2.5.min.js"></script><!-- 用于前端与插件交互 -->

2.新建一个监控复用组件,只需要通过props传入监控编号就能使用了

index.vue

<!-- 海康威视组件 -->
<template><div :id="state.id" class="playWnd"></div>
</template><script setup lang="ts">
import { reactive, onMounted, onDeactivated, watch, onActivated } from "vue";
import { useRouter } from "vue-router";
const $router = useRouter();
const WebControl = window.WebControl; //index.html引入 直接从window里面拿到sdk
const JSEncrypt = window.JSEncrypt; //index.html引入 直接从window里面拿到sdk
const props = defineProps({wsUrl: {type: String, //视频监控code},
});
console.log(props.wsUrl, "====>wsurl");
const state = reactive({id: "playWnd" + Math.random().toString(16).slice(2), //多个监控同时显示需要不同的ididWidth: 0 as any,idHeight: 0 as any,initCount: 0,pubKey: "",oWebControl: null as any,
});
console.log(state);
//创建播放实例
const initPlugin = () => {state.oWebControl = new WebControl({szPluginContainer: state.id, // 指定容器idiServicePortStart: 15900, // 指定起止端口号，建议使用该值iServicePortEnd: 15900,szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsidcbConnectSuccess: function () {// 创建WebControl实例成功state.oWebControl.JS_StartService("window", {// WebControl实例创建成功后需要启动服务dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死}).then(() => {console.log("启动成功");// 启动插件服务成功state.oWebControl.JS_SetWindowControlCallback({// 设置消息回调cbIntegrationCallBack: cbIntegrationCallBack,});state.oWebControl.JS_CreateWnd(state.id, state.idWidth, state.idHeight).then(() => {//JS_CreateWnd创建视频播放窗口，宽高可设定init(); // 创建播放实例成功后初始化});},function () {console.log("启动失败");// 启动插件服务失败});},cbConnectError: function () {// 创建WebControl实例失败state.oWebControl = null;console.log("插件未启动，正在尝试启动，请稍候...");WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序state.initCount++;if (state.initCount < 3) {setTimeout(function () {initPlugin();}, 3000);} else {console.log("插件启动失败，请检查插件是否安装！");}},cbConnectClose: function (bNormalClose) {// 异常断开：bNormalClose = false// JS_Disconnect正常断开：bNormalClose = trueconsole.log("cbConnectClose");state.oWebControl = null;console.log("插件未启动，正在尝试启动，请稍候...");WebControl.JS_WakeUp("VideoWebPlugin://");state.initCount++;if (state.initCount < 3) {setTimeout(function () {initPlugin();}, 3000);} else {console.log("插件启动失败，请检查插件是否安装！");}},});
};
// 设置窗口控制回调
const setCallbacks = () => {state.oWebControl.JS_SetWindowControlCallback({cbIntegrationCallBack: cbIntegrationCallBack,});
};// 推送消息
const cbIntegrationCallBack = (oData) => {console.log(oData, "--oData");
};//初始化
const init = () => {getPubKey(() => {// 请自行修改以下变量值 var appkey = ""; //综合安防管理平台提供的appkey，必填var secret = setEncrypt(""); //综合安防管理平台提供的secret，必填var ip = ""; //综合安防管理平台IP地址，必填var playMode = 0; //初始播放模式：0-预览，1-回放var port = 444; //综合安防管理平台端口，若启用HTTPS协议，默认443var snapDir = "D:\\SnapDir"; //抓图存储路径var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径var layout = "1x1"; //playMode指定模式的  布局var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1var encryptedFields = "secret"; //加密字段，默认加密领域为secretvar showToolbar = window.location.href.indexOf("monitorMore") == -1 ? 0 : 1; //是否显示工具栏，0-不显示，非0-显示var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮// 请自行修改以上变量值 state.oWebControl.JS_RequestInterface({funcName: "init",argument: JSON.stringify({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, //自定义工具条按钮}),}).then(function (oData: any) {console.log(oData, "oData");state.oWebControl.JS_Resize(state.idWidth, state.idHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题});});
};//获取公钥
const getPubKey = (callback: any) => {state.oWebControl.JS_RequestInterface({funcName: "getRSAPubKey",argument: JSON.stringify({keyLength: 1024,}),}).then((oData: { responseMsg: { data: string } }) => {console.log(oData);if (oData.responseMsg.data) {state.pubKey = oData.responseMsg.data;callback();}});
};//RSA加密
const setEncrypt = (value: string) => {var encrypt = new JSEncrypt();encrypt.setPublicKey(state.pubKey);return encrypt.encrypt(value);
};// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener("resize", () => {if (state.oWebControl != null) {state.oWebControl.JS_Resize(state.idWidth, state.idHeight);// setWndCover();}
});// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
window.addEventListener("scroll", () => {if (state.oWebControl != null) {state.oWebControl.JS_Resize(state.idWidth, state.idHeight);// setWndCover();}
});//视频预览功能
const previewClick = () => {var cameraIndexCode = props.wsUrl as any; //获取输入的监控点编号值，必填var streamMode = 0; //主子码流标识：0-主码流，1-子码流var transMode = 1; //传输协议：0-UDP，1-TCPvar gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）state.oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify({cameraIndexCode: cameraIndexCode, //监控点编号streamMode: streamMode, //主子码流标识transMode: transMode, //传输协议gpuMode: gpuMode, //是否开启GPU硬解wndId: wndId, //可指定播放窗口}),});console.log(state.oWebControl.JS_RequestInterface, " ------face");console.log("当前的编号", cameraIndexCode);console.log("执行完成");
};onMounted(() => {state.idWidth = document.getElementById(state.id)?.offsetWidth;state.idHeight = document.getElementById(state.id)?.offsetHeight;initPlugin();setTimeout(() => {previewClick();}, 16000); //一般一个监控需要延迟2秒  我这里需求显示8个 所以需要延迟16秒 具体看业务
});
onActivated(() => {state.idWidth = document.getElementById(state.id)?.offsetWidth;state.idHeight = document.getElementById(state.id)?.offsetHeight;initPlugin();setTimeout(() => {previewClick();}, 16000); //一般一个监控需要延迟2秒  我这里需求显示8个 所以需要延迟16秒 具体看业务
});
onDeactivated(() => {console.log("销毁了");state.oWebControl.JS_HideWnd();state.oWebControl.JS_Disconnect().then(function () {//断开与插件服务连接成功console.log("断开与插件服务连接成功");},function () {//断开与插件服务连接失败console.log("断开与插件服务连接失败");});
});
watch(() => $router.currentRoute.value.path,(newValue, oldValue) => {console.log("watch", newValue, oldValue);setTimeout(() => {state.oWebControl.JS_HideWnd();state.oWebControl.JS_Disconnect().then(function () {//断开与插件服务连接成功console.log("断开与插件服务连接成功");},function () {//断开与插件服务连接失败console.log("断开与插件服务连接失败");});});},{ immediate: true, deep: true }
);
</script>
<style lang="sass" scoped>
@import './style.scss'
</style>

style.scss

.playWnd {width: 100%;height: 100%;
}

vue3+vite+ts引入海康威视监控相关推荐

vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
vue3：vue3+vite+ts+pinia
一.背景记录一套技术方案. 二.项目基础 2.1.创建项目 yarn create vite 输入名字后,这里出现了几个选项,不清楚都是干啥的,下来研究选择后完成 2.2.vite.config. ...
vue3 + vite + ts 集成mars3d
vue3 + vite + ts 集成mars3d 文章目录 vue3 + vite + ts 集成mars3d 前言一.创建一个vue3 + vite + ts项目二.引入mars3d相关依赖 ...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制
在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制 1,先去高德地图开放平台申请账号注册流程不再赘述; 2,在我的应用中创建key,选择web端Js点击提交生成; 3,生成后可以看到 ...
【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量
vue3+vite项目引入SCSS及使用SCSS全局变量
【记录】VUE3 + VITE + TS 配置跨域
[记录]VUE3 + VITE + TS 配置跨域在vite.config.ts进行如下设置在vite.config.ts进行如下设置 server: {host: true,// 设置端口号po ...
如何在vue3+vite+ts中使用require
vue3+vite+ts中不能使用require 之前使用vue2,去动态设置图片src属性时,采用require,但是vue3+vite+ts中使用require,项目能够运行,但浏览器中报错req ...
一个基于vue3+vite+ts的完整项目
VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 vue3 ...
vue3 + vite + ts 设置 @ 路径别名
由于 vite 创建项目后,tsconfig.json 已配置好对应别名,因此只需单独配置 vite.config.ts 即可. 目前 tsconfig.json 中应已有如下代码 "pat ...

vue3+vite+ts引入海康威视监控

vue3+vite+ts引入海康威视监控相关推荐

最新文章

热门文章