海康威視ISC平臺的VUE二次開發接入實現

wind丶chaser發表於2021-06-25
Vue

第一步

取得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。

相關文章