调整视频预览

src/router/index.js

@@ -24,7 +24,13 @@ const routes = [
   path: '/ty',
   name: 'ty',
   component: ()=>import("../views/ty/index.vue"),
-}
+},
+
+{
+  path: '/test',
+  name: 'test',
+  component: ()=>import("../views/test.vue"),
+},
 
 ]
 const router = new VueRouter({

src/views/test.vue

@@ -0,0 +1,239 @@
+<template>
+    <div id="hkzone">
+        <video style="width: 68%;height: 70%;position: absolute;top: 0.3rem;left: 0.3rem;" id="camera0"
+              autoplay></video>
+    </div>
+</template>
+<script>
+// 引入api
+import * as homeApi from '@/api/home'
+import $ from "jquery";
+export default {
+    data() {
+        return {
+            // 视频信息
+            videoData: [],
+        }
+    },
+    created() {
+        this.initPlugin();
+    },
+    mounted() {
+        this.getVideo()
+    },
+    methods: {
+        // 视频预览
+        getVideo() {
+            let that = this
+            homeApi.allGetVideo().then(res => {
+                // get allTimeData
+                const tmpdata = res.data.videoData
+
+                let baseviode = this.decode(tmpdata)
+
+                let baseviodejson = this.sec_decode(baseviode)
+                var jsonParseJson = JSON.parse(baseviodejson);
+                this.videoData = jsonParseJson
+
+            });
+        },
+        // 第一次解密
+        decode(str) {
+            if (str === undefined || str === "" || str === null) {
+                return str;
+            }
+            // Going backwards: from bytestream, to percent-encoding, to original string.
+            return decodeURIComponent(atob(str).split('').map(function (c) {
+                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+            }).slice(0, -2).join(''));
+        },
+        // 第二次解密
+        sec_decode(str) {
+            if (str === undefined || str === "" || str === null) {
+                return str;
+            }
+            // Going backwards: from bytestream, to percent-encoding, to original string.
+            return decodeURIComponent(atob(str).split('').map(function (c) {
+                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+            }).join(''));
+        },
+        // 创建播放实例
+        initPlugin() {
+            let _that = this;
+            const oWebControl0 = new window.WebControl({
+                szPluginContainer: 'camera0', // 指定容器id
+                iServicePortStart: 15900, // 指定起止端口号，建议使用该值
+                iServicePortEnd: 15900,
+                szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+                cbConnectSuccess() {
+                    // console.log('创建WebControl实例成功1');
+                    $('#camera0').html('创建WebControl实例成功1');
+                    oWebControl0.JS_StartService('window', {
+                        // WebControl实例创建成功后需要启动服务
+                        dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
+                    }).then(
+                        () => {
+                            // // 启动插件服务成功
+                            // oWebControl0.JS_SetWindowControlCallback({
+                            //   // 设置消息回调
+                            //   cbIntegrationCallBack: _that.cbIntegrationCallBack,
+                            // });
+                            oWebControl0.JS_CreateWnd('camera0').then(() => {
+                                //JS_CreateWnd创建视频播放窗口，宽高可设定
+                                _that.init(); // 创建播放实例成功后初始化
+
+                            });
+                        },
+                        () => {
+                            // 启动插件服务失败
+                            console.log('启动插件服务失败');
+                        }
+                    )
+                        .catch((err) => {
+                            console.log(err);
+                        });
+                },
+                cbConnectError() {
+                    // 创建WebControl实例失败
+                    console.log('xxx');
+                    oWebControl0 = null;
+                    $('#camera0').html('插件未启动，正在尝试启动，请稍候...');
+                    window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
+                    this.initCount++;
+                    if (this.initCount < 3) {
+                        setTimeout(function () {
+                            this.initPlugin();
+                        }, 3000);
+                    } else {
+                        $('#camera0').html('插件启动失败，请检查插件是否安装！');
+                    }
+                },
+                cbConnectClose(bNormalClose) {
+                    // 异常断开：bNormalClose = false
+                    // JS_Disconnect正常断开：bNormalClose = true
+                    console.log('cbConnectClose');
+                    oWebControl0 = null;
+                },
+            });
+            this.oWebControl0 = oWebControl0;
+        },
+        //初始化
+        init() {
+            let _that = this;
+            _that.getPubKey(function () {
+                // 请自行修改以下变量值
+                // console.log(typeof(_that.videoData[0].host));
+                var port = 8442;
+                var appkey = _that.videoData[0].appkey; //综合安防管理平台提供的appkey，必填
+                var secret = _that.setEncrypt(_that.videoData[0].secret); //综合安防管理平台提供的secret，必填
+                var ip = _that.videoData[0].host; //综合安防管理平台IP地址，必填
+                var playMode = 0; //初始播放模式：0-预览，1-回放
+                var port = port; //综合安防管理平台端口，若启用HTTPS协议，默认443
+                // var snapDir = ""; //抓图存储路径
+                // var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
+                var layout = "1x1"; //playMode指定模式的布局
+                var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
+                var encryptedFields = "secret"; //加密字段，默认加密领域为secret
+                var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
+                var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+                var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
+                // 请自行修改以上变量值
+                _that.oWebControl0.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: buttonIDs, //自定义工具条按钮
+                    }),
+                })
+                    .then((oData) => {
+                        let width = document.querySelector("#camera0").offsetWidth;
+                        let height = document.querySelector("#camera0").offsetHeight;
+                        _that.oWebControl0.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。
+                        // console.log(oData);
+                        // console.log(width, height);
+                        _that.getVideoFun(_that.videoData[0].cameraIndexCode)
+                    });
+            });
+        },
+        //获取公钥
+        getPubKey(callback) {
+            this.oWebControl0.JS_RequestInterface({
+                funcName: "getRSAPubKey",
+                argument: JSON.stringify({
+                    keyLength: 1024,
+                }),
+            })
+                .then((oData) => {
+                    if (oData.responseMsg.data) {
+                        this.pubKey0 = oData.responseMsg.data;
+                        callback();
+                    }
+                });
+        },
+
+        //RSA加密
+        setEncrypt(value) {
+            var encrypt = new window.JSEncrypt();
+            encrypt.setPublicKey(this.pubKey0);
+            return encrypt.encrypt(value);
+        },
+
+        //视频预览功能
+        getVideoFun(Code) {
+            //因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
+            var cameraIndexCode = Code; //获取输入的监控点编号值，必填
+            var streamMode = 1; //主子码流标识：0-主码流，1-子码流
+            var transMode = 1; //传输协议：0-UDP，1-TCP
+            var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
+            var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
+            cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
+            cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
+            console.log(cameraIndexCode);
+            this.oWebControl0.JS_RequestInterface({
+                funcName: "startPreview",
+                argument: JSON.stringify({
+                    cameraIndexCode: cameraIndexCode, //监控点编号
+                    streamMode: streamMode, //主子码流标识
+                    transMode: transMode, //传输协议
+                    gpuMode: gpuMode, //是否开启GPU硬解
+                    wndId: wndId, //可指定播放窗口
+                }),
+            })
+                .then((res) => {
+                    // 播放成功回调
+                    // console.log('播放成功')
+                    //console.log(res);
+                },
+                    err => {
+                        //console.log('播放失败')
+                        //console.log(preUrl);
+                        // console.info('JS_Play failed:', err)
+                        console.info(err)
+                    });
+        },
+        destroyVideoDiv() {
+            this.oWebControl2.JS_DestroyWnd()
+                .then((data) => {
+                    console.log("销毁窗口成功");
+                })
+                .catch((err) => {
+                    console.log("销毁窗口失败");
+                });
+        },
+        //
+
+    },
+
+}
+</script>

src/views/ty/index.vue

@@ -42,11 +42,11 @@
 
         <div class="center">
           <!-- v-for=" item in videoData" :key="item.key" -->
-          <div class="item" v-for=" item in videoData" :key="item.key" style="position: relative;">
+          <!-- <div class="item" v-for=" item in videoData" :key="item.key" style="position: relative;">
             <video style="width: 68%;height: 70%;position: absolute;left: 0.3rem;top: 0.3rem;" :id="item.key"
               autoplay></video>
-          </div>
-          <!-- <div class="item" style="position: relative;">
+          </div> -->
+          <div class="item" style="position: relative;">
             <video style="width: 68%;height: 70%;position: absolute;top: 0.3rem;left: 0.3rem;" id="camera0"
               autoplay></video>
           </div>
@@ -55,7 +55,7 @@
           </div>
           <div class="item">
             <video style="width: 68%;margin-top: 0.3rem;height: 70%;margin-left: 0.3rem;" id="camera2" autoplay></video>
-          </div> -->
+          </div>
         </div>
 
         <div class="right">
@@ -178,11 +178,11 @@ export default {
   },
    created() {
     // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
-    //  this.$nextTick(() => {
-    //   this.initPlugin();
-    //   this.initPlugin2();
-    //   this.initPlugin3();
-    // });
+     this.$nextTick(() => {
+      this.initPlugin();
+      this.initPlugin2();
+      this.initPlugin3();
+    });
 
   },