第一步
取得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。