VUE接入海康攝像頭實現視頻預覽
公司的新平臺要接入視頻監控系統，這個棘手的活兒落在了我身上，壓力山大，幸虧海康文檔比較完整，可是也費了一番心思，總結一下。html
咱們公司是經過他本身的綜合安防管理平臺接入的視頻流，這個平臺是要花錢的，聽說是能夠直接對接攝像頭硬件獲取視頻流的，這個就免費了。下面只介紹經過綜合安防平臺在vue中實現視頻預覽。vue
海康開發者平臺地址：open.hikvision.com/，首先要註冊一下，而後下載他給的demo，在本身瀏覽器跑起來。vue-cli
另外有問題能夠諮詢他們開發郵箱：dev-support@hikvision.com，通常當天五點前的問題會當天回覆，若是沒有回覆，能夠及時致電客服：400-800-5998。 
後端
程序包是視頻播放的插件，文檔裏面有html的demo，第一步先把demo跑起來。以下圖demo就跑通了。appKey、appSecret、ip、以及監控點編號都是找咱們和海康對接的後端要的。監控點編號就是攝像頭的惟一標識cameraIndexCode。瀏覽器
接下來就是整合到vue中了，由於咱們只是先實現預覽功能，其餘功能插件自己已經提供了，因此須要將demo有用的函數提出來。bash
首先將海康攝像頭用到的公共js提出來，放在static文件夾中在html中引入，vue-cli 3沒有static文件夾，須要在public文件夾下本身建一個放靜態資源的文件夾。app
下面上代碼less
<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">下載</a>
</div>
</div>
</template>
<script>
export default {
name: "videoPlayer",
props:{
cameraIndexCode:{type:String,default:''},
layout:{type:String,default:'2x2'},
videoDialog:{type:Boolean,default:true},
},
data() {
return {
plugin:true ,
oWebControl:null, //插件對象
initCount:0,
pubKey:'', //公鑰加密
video_init_data:{
// appkey:'24700270',
// secret:'y64n1SsDVSfIgf21z0oX',
// ip:'192.168.56.158',
// szPort:'443',
appkey:'',
appSecret:'',
ip:'',
port:'',
snapDir:'D:\\SnapDir',
videoDir:'D:\\VideoDir',
layout:'2x2',
encryptedFields:'secret',
enableHttps:'1',
},
video_play_data:{
cameraIndexCode:'754d47f108d44606ad73019928b68633',
streamMode:'0',
transMode:'1',
gpuMode:'0',
wndId:-1,
},
//videoWidth videoHeight screenWidth screenHeight
//這四個參數爲了使插件大小和屏幕寬度一致變化
videoWidth:700,
videoHeight:500,
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;
}
});
},
// 設置窗口控制回調
setCallbacks() {
this.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: this.cbIntegrationCallBack
});
},
// 推送消息
cbIntegrationCallBack(oData) {
this.$message.warning((JSON.stringify(oData.responseMsg)));
},
// 初始化參數
initVideo () {
// console.log(this.getPubKey)
this.getPubKey(() =>{
let appkey = this.video_init_data.appkey;
let secret = this.setEncrypt(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'];
appkey = appkey.replace(/(^\s*)/g, "");
appkey = appkey.replace(/(\s*$)/g, "");
secret = secret.replace(/(^\s*)/g, "");
secret = secret.replace(/(\s*$)/g, "");
ip = ip.replace(/(^\s*)/g, "");
ip = ip.replace(/(\s*$)/g, "");
szPort = szPort.replace(/(^\s*)/g, "");
szPort = szPort.replace(/(\s*$)/g, "");
snapDir = snapDir.replace(/(^\s*)/g, "");
snapDir = snapDir.replace(/(\s*$)/g, "");
videoDir = videoDir.replace(/(^\s*)/g, "");
videoDir = videoDir.replace(/(\s*$)/g, "");
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 ? oData.responseMsg : ''))
});
})
},
// 獲取公鑰
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 (IndexCode) {
console.log('------開始播放-------')
let cameraIndexCode = IndexCode?IndexCode: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; //默認爲空閒窗口回放
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
this.oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode : cameraIndexCode ,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId: wndId
})
}).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);
}
},
//關閉全部的播放畫面
close_all(){
this.oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
}).then(function (oData) {
console.log(JSON.stringify(oData ? oData.responseMsg : ''))
});
},
},
watch:{
cameraIndexCode(n){
this.startRealPlay();
},
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 lang="less" 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;
a{
color:red;
}
}
}
</style>
複製代碼
若有問題，歡迎探討，若是滿意，請手動點贊，謝謝！🙏
ide
相關文章
- 1. C# 實現海康攝像頭在任意瀏覽器中預覽
- 2. C++驅動海康威視攝像頭
- 3. opencv讀取海康威視攝像頭
- 4. 海康威視WEB視頻預覽
- 5. 海康威視NVR在IE瀏覽器預覽攝像頭畫面報錯
- 6. 海康攝像頭GB28181對接
- 7. 【視頻】海康威視攝像頭RTSP協議格式
- 8. 谷歌Chrome瀏覽器接入RTSP海康大華攝像頭視頻純H5播放谷歌觀看海康攝像頭
- 9. 海康威視多攝像頭實時視頻預覽(基於SDK的二次開發)
- 10. 海康攝像頭b/s架構下的視頻直播
- 更多相關文章...
- • Spring DI（依賴注入）的實現方式：屬性注入和構造注入 - Spring教程
- • 現實生活中的 XML - XML 教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
