应用条件
一.、引入依赖文件
jsencrypt.min.js
jsWebControl-1.0.0.min.js
注：必须在与 vue 的 根 index.html 文件中引入， main.js 中引入有效；
依赖文件及官网demo：官网下载
二、 template
<div class="video-wrap mt-16"> <wrap class="video-box" v-for="(item, index) in realTimeData.videoConfig" :key="item.id" > <div :id="`playWnd${index}`" class="playWnd"></div> </wrap></div>三、methods
/* 获取视频code */ async getVideoCode() { this.realTimeData.videoLoad = true; const params = { area: "", enterprise: this.realTimeData.Warehouse.enterpriseName, street: "", }; await getCamera(params).then((res) => { const videoCode = res.data.list.map(({ cameraIndexCode }) => ({ cameraIndexCode, })); this.realTimeData.videoConfig = videoCode.map((item) => { return { code: item.cameraIndexCode, id: Math.floor(Math.random() * 100), }; }); this.initPlugin(videoCode); }); }, /* 创立插件实例 */ initPlugin(codeArr) { const dll = { dllPath: "./VideoPluginConnect.dll" }; codeArr.forEach((item, index) => { let oWebControl = new WebControl({ szPluginContainer: `playWnd${index}`, // 指定容器id iServicePortStart: 15900, iServicePortEnd: 15909, szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10应用ActiveX的clsid cbConnectSuccess: () => { oWebControl.JS_StartService("window", dll).then(() => { oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: (msg) => { //注：不能应用内部函数调用，有效 if (msg?.responseMsg?.msg?.result) { const { result } = msg.responseMsg.msg; if (result == 1024) { oWebControl.JS_HideWnd();//放大暗藏其它视频窗口 } else if (result == 1025) { oWebControl.JS_ShowWnd();//放大显示全副窗口 } } }, }); //启动插件服务胜利 oWebControl.JS_CreateWnd(`playWnd${index}`, 260, 160).then(() => { //JS_CreateWnd创立视频播放窗口，宽高可设定 this.initVideo(oWebControl, item.cameraIndexCode); // 创立播放实例胜利后初始化 }); }); }, }); this.plug.example.push(oWebControl); }); }, /* 获取公钥 */ initVideo(oWebControl, code) { const params = { funcName: "getRSAPubKey", argument: JSON.stringify({ keyLength: 1024 }), }; oWebControl.JS_RequestInterface(params).then((res) => { if (res.responseMsg.data) { this.plug.pubKey = res.responseMsg.data; this.getVideoConfig(oWebControl); this.getClickAction(oWebControl, code); } }); }, /* 视频插件配置项回调 */ getVideoConfig(oWebControl) { const { offsetWidth, offsetHeight } = document.getElementById("playWnd0"); const configObj = { funcName: "init", argument: JSON.stringify({ appkey: "xxxxxx", //API网关提供的appkey secret: this.setEncrypt("xxxxxx"), //API网关提供的secret ip: "xxx.xxx.xxx.xxx", //API网关IP地址 playMode: 0, //播放模式（决定显示预览还是回放界面） port: 8443, //端口 snapDir: "D:\\SnapDir", //抓图存储门路 videoDir: "D:\\VideoDir", //紧急录像或录像剪辑存储门路 layout: "1x1", //布局 enableHTTPS: 1, //是否启用HTTPS协定 encryptedFields: "secret", //加密字段 showToolbar: 1, //是否显示工具栏 showSmart: 1, //是否显示智能信息 buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769", //自定义工具条按钮 }), }; oWebControl.JS_RequestInterface(configObj).then(() => { oWebControl.JS_Resize(offsetWidth, offsetHeight); }); }, /* 视频流RSA加密 */ setEncrypt(value) { const encrypt = new JSEncrypt(); encrypt.setPublicKey(this.plug.pubKey); return encrypt.encrypt(value); }, /* 视频播放 */ getClickAction(oWebControl, code) { code = code.trim(); oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify({ cameraIndexCode: code, //监控点编号 streamMode: 0, //奴才码流标识：0-主码流，1-子码流 transMode: 1, //传输协定：0-UDP，1-TCP gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用 wndId: -1, //播放窗口序号（在2x2以上布局下可指定播放窗口） }), }); this.realTimeData.videoLoad = false; }, /* 销毁视频实例 */ getDestruction() { this.plug.example.forEach((item) => { item.JS_HideWnd(); item.JS_DestroyWnd().then((res) => {}); // item.JS_Disconnect().then((res) => {}); }); },四、应用效果图、性能：
1.实时监控 / 2.截图 / 3.录屏 / 4.摄像头管制 / 5.语音指挥（硬件反对）/ 6.即时回放