介绍

因为我的文章已经写过基于vue实现海康web插件进行视频播放开箱即用文章，这个文章是利用vite+vue3+js进行编写的，大致内容跟vue2一样，拿过去能直接用。

至于我为什么要用js而不用ts，因为海康提供的三个脚本为js语言的，ts尝试过一次，我道行太浅，没搞明白。

这些代码是可以直接使用的，如果对你有帮助，麻烦点个赞。

如果需要vue2的开发，点击跳转vue2开发文章

接下来进入正题。

一、插件的下载与安装

下载海康提供的插件和js文件，我上一个文章有讲过。

点击跳转至上一个文章。

引入方式和v2有一些不同，要在主目录下的index.html中引入js文件。

二、在所需视频组件中进行代码编写

我这里是直接把我测试的代码全放进去了，可以全部复制在组件里既可以使用。

这里我用的是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: "", //海康提供的appkeyip: "", //海康提供的ip secret: "", //海康提供的secretport: 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);// returnif (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", // 指定容器idiServicePortStart: 15900, // 指定起止端口号，建议使用该值iServicePortEnd: 15900,szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsidcbConnectSuccess: () => {// 创建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  {// 异常断开：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协议，默认443let snapDir = "D:\\SnapDir";//抓图存储路径let videoDir = "D:\\VideoDir";//紧急录像或录像剪辑存储路径let layout = objData.value.layout; //playMode指定模式的布局let enableHTTPS = 1;//是否启用HTTPS协议与综合安防管理平台交互，这里总是填1let encryptedFields = "secret"; //加密字段，默认加密领域为secretlet 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网关提供的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,//自定义工具条按钮}),}).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-TCPlet 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({});});}.main {position: fixed;top: 50%;left: 20%;transform: translateY(-50%);width: 60vw;height: 60vh;margin: auto;background-color: #ccc;}

三、补充

我这里只实现了视频播放的功能，其它功能和vue2大同小异，可以看我vue2的文章进行修改和开发。

这些代码是可以直接使用的，如果对你有帮助，麻烦点个赞。