海康威视摄像头怎么看回放（vue3实现海康威视根据海康插件进行监控实时预览和回放功能）
介绍
因为我的文章已经写过基于vue实现海康web插件进行视频播放开箱即用文章 ，这个文章是利用vite+vue3+js进行编写的 ，大致内容跟vue2一样 ，拿过去能直接用 。
至于我为什么要用js而不用ts ，因为海康提供的三个脚本为js语言的 ，ts尝试过一次 ，我道行太浅 ，没搞明白 。
这些代码是可以直接使用的 ，如果对你有帮助 ，麻烦点个赞 。
如果需要vue2的开发 ，点击跳转vue2开发文章
接下来进入正题 。
一 、插件的下载与安装
下载海康提供的插件和js文件 ，我上一个文章有讲过 。
点击跳转至上一个文章 。
引入方式和v2有一些不同 ，要在主目录下的index.html中引入js文件 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + Vue + js</title> </head> <body> <div id="app"></div> <script src="/jquery-1.12.4.min.js"></script> <script src="/jsencrypt.min.js"></script> <script src="/jsWebControl-1.0.0.min.js"></script> <script type="module" src="/src/main.js"></script> </body> </html>二 、在所需视频组件中进行代码编写
我这里是直接把我测试的代码全放进去了 ，可以全部复制在组件里既可以使用 。
这里我用的是setup语法糖 ，有不一样的可自行修改 。
<!-- 视频播放组件 --> <template> <div class="main" ref="playWndBox"> <div id="playWnd" class="playWnd" :style="{ height: playWndHeight + px, width: playWndWidth + px, }" ></div> </div> </template> <script setup> import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from vue const playWndBox = ref(null) let playWndHeight = ref() let playWndWidth = ref() let pubKey = ref() let oWebControl = ref(null) let objData = ref({ appkey: "", //海康提供的appkey ip: "", //海康提供的ip secret: "", //海康提供的secret port: 443, playMode: 0, // 0 预览 1回放 layout: "1x1", //页面展示的模块数【16】 }) onMounted(() => { // 获取页面的实例对象 const pageInstance = getCurrentInstance(); // 获取dom节点对象 const tagDomObj = pageInstance.refs.playWndBox; playWndHeight.value = tagDomObj.clientHeight; playWndWidth.value = tagDomObj.clientWidth; // 监听scroll事件 ，使插件窗口尺寸跟随DIV窗口变化 window.addEventListener("scroll", () => { console.log(5); // return if (oWebControl.value != null) { oWebControl.JS_Resize( tagDomObj.clientWidth, tagDomObj.clientHeight ); this.setWndCover(); } }); // 监听resize事件 ，使插件窗口尺寸跟随DIV窗口变化 window.addEventListener("resize", (e) => { console.log(0); if (oWebControl.value != null) { oWebControl.JS_Resize( tagDomObj.clientWidth, tagDomObj.clientHeight ); this.setWndCover(); } }); // 初始化播放器插件 nextTick(() => { initPlugin(); }) }) onBeforeUnmount(() => { if (oWebControl.value != null) { // 先让窗口隐藏 ，规避可能的插件窗口滞后于浏览器消失问题 oWebControl.JS_HideWnd(); // 销毁当前播放的视频 oWebControl.JS_RequestInterface({ funcName: "destroyWnd" }); // 断开与插件服务连接 oWebControl.JS_Disconnect(); } }) const initPlugin = () => { oWebControl = new WebControl({ szPluginContainer: "playWnd", // 指定容器id iServicePortStart: 15900, // 指定起止端口号 ，建议使用该值 iServicePortEnd: 15900, szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid cbConnectSuccess: () => { // 创建WebControl实例成功 oWebControl .JS_StartService("window", { // WebControl实例创建成功后需要启动服务 // 值"./VideoPluginConnect.dll"写死 dllPath: "./VideoPluginConnect.dll", }) .then( function () { // 设置消息回调 oWebControl.JS_SetWindowControlCallback({ // cbIntegrationCallBack: cbIntegrationCallBack, }); //JS_CreateWnd创建视频播放窗口 ，宽高可设定 oWebControl .JS_CreateWnd("playWnd", 1152, 581, { bEmbed: true })//这一部分很重要 ，两个参数为你盒子的宽高 ，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁 .then(function () { // 创建播放实例成功后初始化 init(); }); }, function () { // 启动插件服务失败 } ); }, // 创建WebControl实例失败 cbConnectError: function () { // 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看 ，具体实现步骤根据个人需求进行编写！！！！！！！！ // console.log(0); // oWebControl.value = null; // // 程序未启动时执行error函数 ，采用wakeup来启动程序 // window.WebControl.JS_WakeUp("VideoWebPlugin://"); // initCount++; // if (initCount < 3) { // setTimeout(function () { // initPlugin(); // }, 3000); // } else { // setTimeout(function () { // setTimeout(function () { // $router.push(/home/PlugDown) // }, 4000) // }, 4000) // } }, cbConnectClose: () => { // 异常断开：bNormalClose = false // JS_Disconnect正常断开：bNormalClose = true // console.log("cbConnectClose"); oWebControl.value = null; }, }); // oWebControl.JS_CuttingPartWindow(500, 500, 500, 500); } // 初始化 const init = (callback) => { getPubKey(() => { let appkey = objData.value.appkey; //综合安防管理平台提供的appkey ，必填 let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret ，必填 let ip = objData.value.ip; //综合安防管理平台IP地址 ，必填 let playMode = objData.value.playMode; //初始播放模式：0-预览 ，1-回放 let port = objData.value.port; //综合安防管理平台端口 ，若启用HTTPS协议 ，默认443 let snapDir = "D:\\SnapDir"; //抓图存储路径 let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 let layout = objData.value.layout; //playMode指定模式的布局 let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互 ，这里总是填1 let encryptedFields = "secret"; //加密字段 ，默认加密领域为secret let showToolbar = 1; //是否显示工具栏 ，0-不显示 ，非0-显示 let showSmart = 0; //是否显示移动框线框 ，0-不显示 ，非0-显示 let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 // var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮 oWebControl .JS_RequestInterface({ funcName: "init", argument: JSON.stringify({ appkey: appkey, //API网关提供的appkey secret: secret, //API网关提供的secret ip: ip, //API网关IP地址 playMode: playMode, //播放模式（决定显示预览还是回放界面） port: port, //端口 snapDir: snapDir, //抓图存储路径 videoDir: videoDir, //紧急录像或录像剪辑存储路径 layout: layout, //布局 enableHTTPS: enableHTTPS, //是否启用HTTPS协议 encryptedFields: encryptedFields, //加密字段 showToolbar: showToolbar, //是否显示工具栏 showSmart: showSmart, //是否显示智能信息 buttonIDs, //自定义工具条按钮 }), }) .then(function (oData) { oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次 ，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 if (callback) { callback(); } // 隐藏 // oWebControl.JS_HideWnd() }); }); } // RSA 加密 let setEncrypt = (value) => { let encrypt = new window.JSEncrypt(); encrypt.setPublicKey(pubKey); return encrypt.encrypt(value); } // 获取公钥 const getPubKey = (callback) => { oWebControl .JS_RequestInterface({ funcName: "getRSAPubKey", argument: JSON.stringify({ keyLength: 1024, }), }) .then(function (oData) { if (oData.responseMsg.data) { pubKey = oData.responseMsg.data; callback(); } }); } // 调用这个函数可进行视频播放 // 视频预览功能 const previewVideo = (data) => { let cameraIndexCode = data; // 获取输入的监控点编号值 ，必填 let streamMode = 0; // 主子码流标识：0-主码流 ，1-子码流 let transMode = 1; // 传输协议：0-UDP ，1-TCP let gpuMode = 0; // 是否启用GPU硬解 ，0-不启用 ，1-启用 let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口） oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify({ cameraIndexCode: cameraIndexCode, // 监控点编号 streamMode: streamMode, // 主子码流标识 transMode: transMode, // 传输协议 gpuMode: gpuMode, // 是否开启GPU硬解 wndId: wndId, // 可指定播放窗口 }), }) .then(function () { oWebControl.JS_SetWindowControlCallback({ }); }); } </script> <style lang="scss" scoped> .main { position: fixed; top: 50%; left: 20%; transform: translateY(-50%); width: 60vw; height: 60vh; margin: auto; background-color: #ccc; } </style>三 、补充
我这里只实现了视频播放的功能 ，其它功能和vue2大同小异 ，可以看我vue2的文章进行修改和开发 。
这些代码是可以直接使用的 ，如果对你有帮助 ，麻烦点个赞 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！