海康威視ISC平臺的VUE二次開發接入實現
阿新 • • 發佈：2021-06-25
第一步
取得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;"> <button style="padding:0;margin:0;" @click="startClickFn" class="btn">預覽</button> <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。