最近一直在做有關海康監控視訊的項目，閑下來寫下這篇文章，加深一下印象，同時也和大家交流一下經驗，以便更好提升自己。廢話不多說，開始正題。。。。
首先把海康插件引進到項目中來
然後在index.html中引進
最後把完整代碼貼出來，不一一介紹了（懶~~~~）
<template>
<div class="video-player">
<div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
</div>
<!-- <div class="down" v-else>
<a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe" target="_blank" rel="external nofollow" >下載下傳</a>
</div> -->
</div>
</template>
<script>
export default {
name: 'videoPlayer',
props:['cameraIndexCode','layout'],
data(){
return {
plugin:true ,
oWebControl:null, //插件對象
initCount:0,
pubKey:'', //公鑰加密
playMode:'',
video_init_data:{
appkey:'你的appkey',
appSecret:'你的appSecret',
ip:'IP位址',
port:'端口号',
snapDir:'D:\\SnapDir',
videoDir:'D:\\VideoDir',
layout:'',
// encryptedFields:'secret',
// enableHttps:'1',
},
video_play_data:{
cameraIndexCode:"",
streamMode:0,
transMode:1,
gpuMode:0,
wndId:-1,
},
//videoWidth videoHeight screenWidth screenHeight
//這四個參數為了使插件大小和螢幕寬度一緻變化
videoWidth:700,
videoHeight:300,
screenWidth: document.documentElement.clientWidth,//螢幕寬度
screenHeight: document.documentElement.clientHeight,//螢幕高度
//設定視窗遮擋 根據浏覽器大小變化視訊插件的大小
iLastCoverLeft : 0,
iLastCoverTop : 0,
iLastCoverRight : 0,
iLastCoverBottom : 0,
};
},
created(){},
mounted(){
//插件初始化
this.initPlugin();
this.$nextTick(()=>{
this.videoWidth = this.$refs.divPlugin.offsetWidth;
this.videoHeight = this.$refs.divPlugin.offsetHeight;
})
// 監聽視窗變化
let _this = this;
window.onresize = function(){ // 定義視窗大小變更通知事件
_this.screenWidth = document.documentElement.clientWidth; //視窗寬度
_this.screenHeight = document.documentElement.clientHeight; //視窗高度
};
window.addEventListener('scroll', function () {
if (this.oWebControl != null) {
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
this.setWndCover();
}
});
},
destroyed(){
if (this.oWebControl != null){
this.oWebControl.JS_Disconnect().then(function(){}, function() {});
}
},
methods: {
// 插件初始化
initPlugin () {
let _this = this
this.oWebControl = new WebControl({
szPluginContainer: "divPlugin",
iServicePortStart: 15900,
iServicePortEnd: 15909,
cbConnectSuccess: (e) => {
this.plugin=true;
// _this.setCallbacks();
if(_this.oWebControl){
_this.oWebControl.JS_StartService("window", {
dllPath: "./VideoPluginConnect.dll"
//dllPath: "./DllForTest-Win32.dll"
}).then( (res) => {
_this.oWebControl.JS_CreateWnd("divPlugin",_this.videoWidth,_this.videoHeight).then(() => {
// console.log("JS_CreateWnd success");
_this.initVideo();
});
}, function () {
});
}else{
}
},
cbConnectError: () => {
//console.log("cbConnectError");
_this.oWebControl = null;
$("#divPlugin").html("插件未啟動，正在嘗試啟動，請稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://");
_this.initCount ++;
if (_this.initCount < 3) {
setTimeout(() => {
_this.initPlugin();
}, 3000)
} else {
$("#divPlugin").html("插件啟動失敗，請檢查插件是否安裝！");
this.plugin=false;
}
},
cbConnectClose: () => {
//console.log("cbConnectClose");
this.oWebControl.JS_Disconnect().then(function(){}, function() {});
this.oWebControl = null;
}
});
},
// 初始化參數
initVideo () {
// console.log(this.getPubKey)
this.getPubKey(() =>{
let appkey = this.video_init_data.appkey;
let secret = this.video_init_data.appSecret;
let ip = this.video_init_data.ip;
let szPort= this.video_init_data.port;
let snapDir = this.video_init_data.snapDir;
let videoDir = this.video_init_data.videoDir ;
let layout = this.layout;
// let encryptedFields = ['secret'];
let port = parseInt(szPort);
// let enableHttps = parseInt(this.video_init_data.enableHttps);
// encryptedFields = encryptedFields.join(",");
this.oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey,
secret: secret,
ip: ip,
playMode:0, // 預覽
port: port,
snapDir: snapDir,
videoDir: videoDir,
layout: layout,
// enableHTTPS: enableHttps,
// encryptedFields: encryptedFields
})
}).then(function (oData) {
// console.log(JSON.stringify(oData))
});
this.startRealPlay()
})
},
// 擷取公鑰
getPubKey (callback) {
// console.log(this.oWebControl,'oWebControloWebControl')
this.oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then((oData) => {
// console.log(oData)
if (oData.responseMsg.data) {
this.pubKey = oData.responseMsg.data
callback()
}
})
},
// RSA加密
setEncrypt (value) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(this.pubKey);
return encrypt.encrypt(value);
},
// 視訊預覽
startRealPlay () {
// console.log('------開始播放-------')
let cameraIndexCode = this.cameraIndexCode;
let streamMode = this.video_play_data.streamMode;
let transMode = this.video_play_data.transMode;
let gpuMode = this.video_play_data.gpuMode;
let wndId = -1; //預設為空閑視窗回放
// console.log('------開始播放-------',cameraIndexCode)
if(this.layout == 1){
//使用者點選具體攝像頭播放
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode : cameraIndexCode,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId: 1
})
}).then(function (oData) {
// console.log('err:',oData)
});
} else {
//循環出所有視訊并播放
for(let i = 0; i <cameraIndexCode.length;i++){
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode : cameraIndexCode[i],
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId: i+1
})
}).then(function (oData) {
// console.log('err:',oData)
});
}
}
},
//根據視窗變化設定視訊插件大小
resizewindow(w,h){
w = (w<1423)?1423:w
h = (h<754)?754:h
window.resizeTo(w ,h);
},
//設定視窗遮擋
setWndCover() {
let iWidth = document.body.clientWidth;
let iHeight = document.body.clientHeight;
let oDivRect = document.getElementById("divPlugin").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 > 700) ? 700 : iCoverLeft;
iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
iCoverRight = (iCoverRight > 700) ? 700 : iCoverRight;
iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;
if (this.iLastCoverLeft != iCoverLeft) {
//console.log("iCoverLeft: " + iCoverLeft);
this.iLastCoverLeft = iCoverLeft;
this.oWebControl.JS_SetWndCover("left", iCoverLeft);
}
if (this.iLastCoverTop != iCoverTop) {
//console.log("iCoverTop: " + iCoverTop);
this.iLastCoverTop = iCoverTop;
this.oWebControl.JS_SetWndCover("top", iCoverTop);
}
if (this.iLastCoverRight != iCoverRight) {
//console.log("iCoverRight: " + iCoverRight);
this.iLastCoverRight = iCoverRight;
this.oWebControl.JS_SetWndCover("right", iCoverRight);
}
if (this.iLastCoverBottom != iCoverBottom) {
//console.log("iCoverBottom: " + iCoverBottom);
this.iLastCoverBottom = iCoverBottom;
this.oWebControl.JS_SetWndCover("bottom", iCoverBottom);
}
}
},
watch:{
screenWidth(n,o){
this.videoWidth = this.$refs.divPlugin.offsetWidth;
this.videoHeight = this.$refs.divPlugin.offsetHeight;
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
this.resizewindow(n,this.screenHeight);
this.setWndCover();
},
screenHeight(n,o){
this.videoWidth = this.$refs.divPlugin.offsetWidth;
this.videoHeight = this.$refs.divPlugin.offsetHeight;
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
this.resizewindow(this.screenWidth,n);
this.setWndCover();
},
//海康的視訊播放插件是預設最高層級這樣會導緻頁面中的彈框等被遮擋，定義一個全局的變量videohide
//當彈框出現時 視訊插件隐藏，解決此問題。
'$store.state.videohide'(n,o){
if(n){
this.oWebControl.JS_HideWnd();
}else if(!n){
this.oWebControl.JS_ShowWnd();
}
},
videoDialog(n){
if(n){
this.initPlugin();
}
}
}
};
</script>
<style scoped>
.video-player{
width: 100%;
height: 100%;
}
.divPlugin{
width: 100%;
height: 100%;
color:red;
/* display: flex; */
justify-content: center;
align-items: center;
font-size: 18px;
}
.down{
width: 100%;
height: 100%;
color:red;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
.down a{
color:red;
}
</style>
我這是封裝成元件，在需要的頁面引用。父元件傳來cameraIndexCode，記得上面的appkey、appSecret、ip、port一定要填，别忘了安裝插件
另外加上回放代碼
一開始回放播放不成功，文檔上說是playMode=1就是回放，記得一定要把funcName的值寫成 "startPlayback"，一個不起眼的單詞就可能播放不成功。
好了，就這麽多了，如有不足請大家多多包涵，歡迎互相交流。
下一篇将寫另一種海康插件的寫法。