海康威视ISC平台的VUE二次开发接入实现

最新推荐文章于 2024-05-23 17:04:01 发布

nidongla

最新推荐文章于 2024-05-23 17:04:01 发布

阅读量2.6k

点赞数

原文链接：https://www.cnblogs.com/chaser-wind/p/14932013.html

版权

第一步

领券 m.cps3.cn

取得ISC平台的appkey以及secret，以及安装ISC平台的主机IP，这一步至关重要！！！

第二步

由于目前我所在的公司项目前端的代码均由vue所实现，所以利用vue-cli创建一个最简单的项目工程，别告诉我你不会，不会也可以，自己百度，然后找到index文件，别告诉我你找不到，全局搜索谢谢，在index.html文件中引入三个script文件，三个文件从哪来？海康的官网：Hikvision AI Cloud 开放平台

请下载这个程序包，程序包里面有最基本的demo以及如何使用demo以及所需要的三个script！！！

引入代码如下：

    <script src="static/js/jquery-1.12.4.min.js"></script>
    <script src="static/js/jsencrypt.min.js"></script>
    <script src="static/js/jsWebControl-1.0.0.min.js"></script>

注意：建议三个文件放在public文件夹下，与你的index文件同级目录！这个是个坑，之前我随便放的位置，一直报错。

第三步

现在就可以愉快的创建自己的vue组件了，在components文件夹下创建一个你自己的组件，当然，你非要建在别的地方我无所谓的，自己import的时候注意一下就行。

然后，以下是代码，基本都是直接copy官网demo的代码，随便写了一下，里面的函数应该都是封装在他们提供的js文件中，哦，对了，在上一步中有个比较重要的插件需要安装，不然播放不了，自己看使用说明！！！

代码：

<template>
    <body>
    <!--预览界面-->
    <div id="operate" class="operate">
        <div class="module">
            <div class="item"><span class="label">监控点编号：</span><input v-model="cameraIndexCode" type="text" value=""></div>
            <div class="item" style="margin-top: 20px;margin-left: -20px;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button style="padding:0;margin:0;" @click="startClickFn" class="btn">预览</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button style="padding:0;margin:0;" @click="stopClickFn" class="btn">停止全部预览</button>
            </div>
        </div>
    </div>
    <!--视频窗口展示-->
    <div id="playWnd" class="playWnd" style="left: 109px; top: 133px;" ></div>
    </body>
    <!---->
</template>

<script>
export default {
    name:'videoPlayerBox2',
    props:{
        
    },
    data(){
       return{
           oWebControl: undefined,
           initCount: 0,
           pubKey: '',
           cameraIndexCode: undefined
       }
    },
    methods: {
        //推送消息
        cbIntegrationCallBack(oData){
            showCBInfo(JSON.stringify(oData.responseMsg));
        },

        //监听自身容器大小变化
        observeWrapper(){
            const ro = new ResizeObserver(entries=> {
                for (const entry of entries){
                    const cr = entry.contentRect;
                    this.videoWidth = cr.width;
                    this.videoHeight = cr.height;
                    this.oWebControl && this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
                    this.oWebControl && this.setWndCover();
                }
            });
            ro.observe(document.querySelector('#playWnd'));
        },
        setWndCover(){                      //裁剪插件实例的大小
            let iWidth = $(window).width();
            let iHeight = $(window).height();
            let oDivRect = $("#playWnd").get(0).getBoundingClientRect();

            let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
            let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
            let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
            let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight): 0;
            iCoverLeft = (iCoverLeft > this.videoWidth) ? this.videoWidth : iCoverLeft;
            iCoverTop = (iCoverTop > this.videoHeight) ? this.videoHeight : iCoverTop;
            iCoverRight = (iCoverRight > this.videoWidth) ? this.videoWidth : iCoverRight;
            iCoverBottom = (iCoverBottom > this.videoHeight) ? this.videoHeight : iCoverBottom;

            this.oWebControl.JS_RepairPartWindow(
                0,
                0,
                1001,
                600
            );
            if (iCoverLeft != 0) {
                this.oWebControl.JS_CuttingPartWindow(
                    0,
                    0,
                    iCoverLeft,
                    600
                );
            }
            if (iCoverTop != 0) {
                this.oWebControl.JS_CuttingPartWindow(
                    0,
                    0,
                    1001,
                    iCoverTop
                );
            }
            if (iCoverRight != 0) {
                this.oWebControl.JS_CuttingPartWindow(
                    1000 - iCoverRight,
                    0,
                    iCoverRight,
                    600
                );
            }
            if (iCoverBottom != 0) {
                this.oWebControl.JS_CuttingPartWindow(
                    0,
                    600 - iCoverBottom,
                    1000,
                    iCoverBottom
                );
            }
        },
        initPlugin(){
            let that = this
            this.oWebControl = new WebControl({
                szPluginContainer: "playWnd",                       // 指定容器id
                iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
                iServicePortEnd: 15909,                             
                szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
                cbConnectSuccess: function() {
                    that.oWebControl.JS_StartService("window",{     // WebControl实例创建成功后需要启动服务
                        dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死
                    })
                    .then(function(){
                        console.log('success')
                        that.oWebControl.JS_SetWindowControlCallback({  // 设置消息回调
                            cbIntegrationCallBack:  that.cbIntegrationCallBack
                        });
                        that.oWebControl.JS_CreateWnd("playWnd", 1000, 600) //JS_CreateWnd创建视频播放窗口，宽高可设定
                        .then(function(){
                            console.log('成功222',that)
                            that.init();                            // 创建播放实例成功后初始化
                        })
                    },
                    function(){                                     // 启动插件服务失败
                        console.log('fail')
                    });
                },
                cbConnectError: function() {                        // 创建WebControl实例失败
                    console.log(that,'that');
                    that.oWebControl = null;
                    that.$message.error("插件未启动，正在尝试启动，请稍候...")
                    WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
                    that.initCount ++;
                    if (that.initCount < 3){
                        setTimeout(function(){
                            that.initPlugin();
                        },3000)
                    }else{
                        that.$message.error("插件启动失败，请检查插件是否安装！")
                    }
                },
                cbConnectClose: function(bNormalClose) {
                    // 异常断开：bNormalClose = false
                    // JS_Disconnect正常断开：bNormalClose = true
                    console.log("cbConnectClose");
                    that.oWebControl = null;
                }
            })
                
        },
        init(){
            let that = this
            this.getPubKey(function(){
                var appkey = "28857343";    //请自行修改为你自己的
                var secret = that.setEncrypt("9xMBcxZSODgmQPQGDfng"); //请自行修改为你自己的
                var ip = "192.168.28.103"; //请自行修改为你自己的
                var playMode = 0; //这个是播放模式，0是预览，1是回放
                var port = 443; //请自行修改为你自己的
                var snapDir = "D:\SnapDir";
                var videoDir = "D:\VideoDir";
                var layout = "1x1";
                var enableHTTPS = 1;
                var encryptedFields = 'secret';
                var showToolbar = 1;
                var showSmart = 1;
                var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";
                that.oWebControl.JS_RequestInterface({
                    funcName: "init",
                    argument: JSON.stringify({
                        appkey: appkey,
                        secret: secret,
                        ip: ip,
                        playMode: playMode,
                        port: port,
                        snapDir: snapDir,
                        videoDir: videoDir,
                        layout: layout,
                        enableHTTPS: enableHTTPS,
                        encryptedFields: encryptedFields,
                        showToolbar: showToolbar,
                        showSmart: showSmart,
                        buttonIDs: buttonIDs
                    })
                })
                .then(function(oData){
                    that.oWebControl.JS_Resize(1000, 600);
                })
            })
        },
        //公钥的获取
        getPubKey(callback){
            let that = this
            this.oWebControl.JS_RequestInterface({
                funcName: "getRSAPubKey",
                argument: JSON.stringify({
                    keyLength: 1024
                })
            })
            .then(function(oData){
                console.log(oData);
                if(oData.responseMsg.data) {
                    that.pubKey = oData.responseMsg.data;
                    callback()
                }
            })
        },
        setEncrypt(value) {
            let encrypt = new JSEncrypt();
            encrypt.setPublicKey(this.pubKey);
            return encrypt.encrypt(value);
        },

        startClickFn() {
            var cameraIndexCode  = this.cameraIndexCode;
            var streamMode = 0;
            var transMode = 1;
            var gpuMode = 0;
            var wndId = -1;
            this.oWebControl.JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                    cameraIndexCode:cameraIndexCode,
                    streamMode: streamMode,
                    transMode: transMode,
                    gpuMode: gpuMode,
                    wndId:wndId
                })
            })
        },
        stopClickFn(){
            if (this.oWebControl && this.oWebControl.JS_RequestInterface){
                this.oWebControl.JS_RequestInterface({
                    funcName: "stopAllPreview"
                })
            }
        }
    },
    created() {
        this.initPlugin();
    },
    mounted() {
        let that = this ;     
        this.observeWrapper();
        $(window).resize( ()=> { 
            if (this.oWebControl != null) {
                this.oWebControl.JS_Resize(1000, 600);
                this.setWndCover();
            }
        });
        $(window).scroll( ()=> {
            if (this.oWebControl != null) {
                this.oWebControl.JS_Resize(1000, 600);
                this.setWndCover();
            }
        });
    },

    destroyed() {
        if (this.oWebControl != null){
            this.oWebControl.JS_HideWnd();
            this.oWebControl.JS_Disconnect()
            .then(function(){

            },
            function(){

            })
        }
    }
    
}
</script>

<style scoped>

    .playWnd {

        margin: 30px 0 0 400px;
        width: 1000px;                  /*播放容器的宽和高设定*/
        height: 600px;
        border: 1px solid red;
    }

    .operate {
           margin-top: 24px;
    }

    .operate::after {
        content: '';
        display: block;
        clear: both;
    }

    .module {
        float: left;
        width: 340px;
        /*min-height: 320px;*/
        margin-left: 16px;
        padding: 16px 8px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
    }

    .module .item {
        margin-bottom: 4px;
    }

    .module input[type="text"] {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        margin-left: 0;
        width: 150px;
        min-height: 20px;
    }

    .module .btn {
        min-width: 80px;
        min-height: 24px;
        margin-top: 100px;
        margin-left: 80px;
    }
</style>

代码能看懂吧，还是挺简单的，稍微学一点就行，虽然没怎么备注代码，但是备注的话基本上你去看一下海康的demo中的代码你就知道这些函数是干嘛的了，对了，这样写会有很多的编码格式问题，你在npm run serve过程中会出现一些不让你跑的情况，所以你要在你的文件.eslintrc.js中加上那么几行，如果你的项目里面没有别的东西，建议直接换成我的，代码我也贴出来：

module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/essential',
        'eslint:recommended'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-undef': 'off',
        'vue/no-unused-vars': 'off',
        'vue/require-v-for-key': 'off',
        'no-unused-vars': 'off',
        'vue/no-unused-components': 'off',
        'no-mixed-spaces-and-tabs': 0 
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
};

如果没有这个文件自己建一个也行，这样你的代码就能跑起来了，不会有人还不会引入组件吧，自行百度。

都看到这了，代码一定都实现了吧，不点个赞再走？合_适吗~？

最后贴一下自己实现的代码：

你问我为什么没有视频？废话，我写这文章的时候在吹空调，爽得很，谁有事没事回去服务器那端为了写个博客去连接服务器？

对了，不是还有个监控点编号吗，海康的ISC官网上有个OpenAPI测试的程序，你把那个下载好了，然后按照他的API指引取得安装在ISC平台上摄像头indexcode，然后填入这个方框内，就万事大吉了，有问题可以私聊，但是不是经常在线，建议加QQ找我击剑：709270121。

nidongla

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
海康威视ISC平台的VUE二次开发接入实现

第一步领券 m.cps3.cn取得ISC平台的appkey以及secret，以及安装ISC平台的主机IP，这一步至关重要！！！第二步由于目前我所在的公司项目前端的代码均由vue所实现，所以利用vue-cli创建一个最简单的项目工程，别告诉我你不会，不会也可以，自己百度，然后找到index文件，别告诉我你找不到，全局搜索谢谢，在index.html文件中引入三个script文件，三个文件从哪来？海康的官网：Hikvision AI Cloud 开放平台请下载这个程序包，程序包里面有最基本的demo.
复制链接

扫一扫