php对接海康视频教程_海康安防管理平台Web视频对接
海康安防管理平臺(tái)Web視頻對(duì)接
開(kāi)發(fā)文檔https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10
1.視頻分為預(yù)覽和回放
2.使用web端的需要安裝插件 軟件包里面有
3.使用iframe需要啟動(dòng)相依的插件
4.給得demo需要進(jìn)行配置 key ip port 是的
要展示記錄就是跑在vue上邊
使用的是rtsp的視頻流
由于控件展示的時(shí)候需要是需要js刷新的，所以在適配上，比較麻煩，所以就讓某一個(gè)外部元素跟著瀏覽器的大小進(jìn)行變化，視頻控件跟著大小變化，海康的視頻控件支持后期修改的操作回調(diào)
插件未啟動(dòng)，正在嘗試啟動(dòng)，請(qǐng)稍候...
沒(méi)有檢測(cè)到插件，請(qǐng)安裝插件后重啟瀏覽器！
下載
data() {
return {
$,
// 控制窗口個(gè)數(shù)
camlength: "1x1",
// 插件沒(méi)有啟動(dòng)的顯示樣式
lodingshow: false,
lodingres: false,
usefullData
}
},
created() {
// 加載播放實(shí)例
this.initPlugin();
// 監(jiān)聽(tīng)resize事件，使插件窗口尺寸跟隨DIV窗口變化
// vue 的onresize
$(window).resize(() => {
if (oWebControl != null) {
oWebControl.JS_Resize( $('.map').width(), $('.map').height() - 60);
}
});
},
// 頁(yè)面結(jié)束的時(shí)候關(guān)閉顯示窗口
destroyed() {
if (oWebControl != null) {
oWebControl.JS_HideWnd(); // 先讓窗口隱藏，規(guī)避可能的插件窗口滯后于瀏覽器消失問(wèn)題
oWebControl.JS_Disconnect().then(() => { // 斷開(kāi)與插件服務(wù)連接成功
},
() => { // 斷開(kāi)與插件服務(wù)連接失敗
});
}
},
methods: {
// 修改布局 展示畫(huà)面
refusePlay() {
// 獲取區(qū)域列表下的攝像機(jī)列表 進(jìn)行布局展示
SubordinateCam({
pageNo: 1,
pageSize: 1000,
regionIndexCode: this.$route.params.id
}).then(res => {
if (res.data.code == 0) {
let shuliang = res.data.data.list.length;
if (shuliang == 1 || shuliang == 0) {
this.camlength = "1x1"
} else if (shuliang > 1 && shuliang <= 4) {
this.camlength = "2x2"
} else if (shuliang > 4 && shuliang <= 9) {
this.camlength = "3x3"
} else if (shuliang > 9 && shuliang <= 16) {
this.camlength = "4x4"
} else if (shuliang > 16 && shuliang <= 25) {
this.camlength = "5x5"
}
// 設(shè)置攝像頭的布局
oWebControl.JS_RequestInterface({
funcName: "setLayout",
argument: {layout: this.camlength}
}).then(() => {
// 有監(jiān)控點(diǎn)就進(jìn)行播放
if (res.data.data.list.length > 0) {
this.$message.success('獲取成功 監(jiān)控點(diǎn)數(shù)量為' + res.data.data.list.length)
res.data.data.list.forEach((item, index) => {
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: item.cameraIndexCode, //監(jiān)控點(diǎn)編號(hào)
streamMode: 0, //主子碼流標(biāo)識(shí)
transMode: 1, //傳輸協(xié)議
gpuMode: 0, //是否開(kāi)啟GPU硬解
wndId: index + 1 //可指定播放窗口
})
})
})
} else {
this.$message.warning('當(dāng)前區(qū)域無(wú)直屬監(jiān)控點(diǎn)區(qū)域')
// 停止全部的播放
let result = JSON.stringify({
"funcName": "stopAllPreview"
}, null, 2)
this.requestInterface(result);
}
})
} else {
this.$message.error('獲取失敗')
}
})
},
// $('.map').width(), $('.map').height() - 60)
// 創(chuàng)建播放實(shí)例
initPlugin() {
// eslint-disable-next-line no-undef
oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口號(hào)，建議使用該值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: () => { // 創(chuàng)建WebControl實(shí)例成功
oWebControl.JS_StartService("window", { // WebControl實(shí)例創(chuàng)建成功后需要啟動(dòng)服務(wù)
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"寫(xiě)死
}).then(() => { // 啟動(dòng)插件服務(wù)成功
oWebControl.JS_SetWindowControlCallback({ // 設(shè)置消息回調(diào)
cbIntegrationCallBack: this.cbIntegrationCallBack
});
oWebControl.JS_CreateWnd("playWnd", $('.map').width(), $('.map').height() - 60).then(() => { //JS_CreateWnd創(chuàng)建視頻播放窗口，寬高可設(shè)定
this.init(); // 創(chuàng)建播放實(shí)例成功后初始化
});
}, () => { // 啟動(dòng)插件服務(wù)失敗
});
},
cbConnectError: () => { // 創(chuàng)建WebControl實(shí)例失敗
oWebControl = null;
// $("#playWnd").html("插件未啟動(dòng)，正在嘗試啟動(dòng)，請(qǐng)稍候...");
this.lodingshow = true;
// eslint-disable-next-line no-undef
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未啟動(dòng)時(shí)執(zhí)行error函數(shù)，采用wakeup來(lái)啟動(dòng)程序
initCount++;
if (initCount < 3) {
setTimeout(() => {
this.initPlugin();
}, 3000)
} else {
this.lodingshow = false;
this.lodingres = true;
// $("#playWnd").html("插件啟動(dòng)失敗，請(qǐng)檢查插件是否安裝！");
}
},
cbConnectClose: () => {
// 異常斷開(kāi)：bNormalClose = false
// JS_Disconnect正常斷開(kāi)：bNormalClose = true
oWebControl = null;
}
});
},
//初始化
init() {
// 獲取公鑰的方法
this.getPubKey(() => {
// 請(qǐng)自行修改以下變量值
let appkey = usefullData.appkey; //綜合安防管理平臺(tái)提供的appkey，必填
// 進(jìn)行相應(yīng)的加密
let secret = this.setEncrypt(usefullData.secret); //綜合安防管理平臺(tái)提供的secret，必填
let ip = usefullData.ip; //綜合安防管理平臺(tái)IP地址，必填
let port = usefullData.port; //綜合安防管理平臺(tái)端口，若啟用HTTPS協(xié)議，默認(rèn)443
let playMode = 0; //初始播放模式：0-預(yù)覽，1-回放
let snapDir = "D:\\SnapDir"; //抓圖存儲(chǔ)路徑
let videoDir = "D:\\VideoDir"; //緊急錄像或錄像剪輯存儲(chǔ)路徑
let layout = "1x1"; //playMode指定模式的布局
let enableHTTPS = 1; //是否啟用HTTPS協(xié)議與綜合安防管理平臺(tái)交互，這里總是填1
let encryptedFields = 'secret'; //加密字段，默認(rèn)加密領(lǐng)域?yàn)閟ecret
let showToolbar = 1; //是否顯示工具欄，0-不顯示，非0-顯示
let showSmart = 1; //是否顯示智能信息(如配置移動(dòng)偵測(cè)后畫(huà)面上的線框)，0-不顯示，非0-顯示
let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,768,769"; //自定義工具條按鈕
let toolBarButtonIDs = "2048,2304,2305,2306,2307,2308,2309,4096,4097,4098,4099,4608,4609"
// 請(qǐng)自行修改以上變量值
oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey, //API網(wǎng)關(guān)提供的appkey
secret: secret, //API網(wǎng)關(guān)提供的secret
ip: ip, //API網(wǎng)關(guān)IP地址
playMode: playMode, //播放模式(決定顯示預(yù)覽還是回放界面)
port: port, //端口
snapDir: snapDir, //抓圖存儲(chǔ)路徑
videoDir: videoDir, //緊急錄像或錄像剪輯存儲(chǔ)路徑
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否啟用HTTPS協(xié)議
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否顯示工具欄
showSmart: showSmart, //是否顯示智能信息
buttonIDs: buttonIDs, //自定義工具條按鈕
toolBarButtonIDs:toolBarButtonIDs //自定義最外層的工具條
})
}).then(() => {
oWebControl.JS_Resize( $('.map').width(), $('.map').height() - 60); // 初始化后resize一次，規(guī)避firefox下首次顯示窗口后插件窗口未與DIV窗口重合問(wèn)題
// 加載完成后進(jìn)行布局的修改 和 攝像頭的展示
this.refusePlay();
});
});
},
//獲取公鑰
getPubKey(callback) {
oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then((oData) => {
console.log(oData);
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback()
}
})
},
//RSA加密
setEncrypt(value) {
// eslint-disable-next-line no-undef
let encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
},
// 推送消息
cbIntegrationCallBack(oData) {
// if (oData.responseMsg.msg.cameraIndexCode != '') {
// this.$router.push({name: 'playbackDetails', params: {id: oData.responseMsg.msg.cameraIndexCode}})
// }
this.showCBInfo(JSON.stringify(oData.responseMsg));
},
// 設(shè)置窗口裁剪，當(dāng)因滾動(dòng)條滾動(dòng)導(dǎo)致窗口需要被遮住的情況下需要JS_CuttingPartWindow部分窗口
setWndCover() {
let iWidth = $('.map').width();
let iHeight = $('.map').height() - 60;
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 > 1200) ? 1200 : iCoverLeft;
iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
iCoverRight = (iCoverRight > 1200) ? 1200 : iCoverRight;
iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;
oWebControl.JS_RepairPartWindow(0, 0, $('.map').width(), $('.map').height() - 60); // 多1個(gè)像素點(diǎn)防止還原后邊界缺失一個(gè)像素條
if (iCoverLeft != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
}
if (iCoverTop != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, $('.map').width(), iCoverTop); // 多剪掉一個(gè)像素條，防止出現(xiàn)剪掉一部分窗口后出現(xiàn)一個(gè)像素條
}
if (iCoverRight != 0) {
oWebControl.JS_CuttingPartWindow($('.map').width() - iCoverRight, 0, iCoverRight, 600);
}
if (iCoverBottom != 0) {
oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, $('.map').width(), iCoverBottom);
}
},
// 執(zhí)行字符串方法
// value為字符串，JS_RequestInterface僅接收json格式的變量，且需要先解析出argument，并且將argument字段的內(nèi)容轉(zhuǎn)為字符串
requestInterface(value) {
this.isJSON(value);
let JsonParam = JSON.parse(value);
let JsonArgument = JsonParam.argument;
JsonParam.argument = JSON.stringify(JsonArgument);
oWebControl.JS_RequestInterface(JsonParam).then((oData) => {
this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
});
},
// 顯示接口返回的消息及插件回調(diào)信息
showCBInfo(szInfo, type) {
if (type === 'error') {
szInfo = "
" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "";} else {
szInfo = "
" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "";}
$("#cbInfo").html(szInfo + $("#cbInfo").html());
},
// 判斷字符串是否為json
isJSON(str) {
if (typeof str == 'string') {
try {
let obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
} else {
this.showCBInfo("param is not the correct JSON message");
return false;
}
} catch (e) {
this.showCBInfo("param is not the correct JSON message");
return false;
}
}
},
// 格式化時(shí)間
dateFormat(oDate, fmt) {
let o = {
"M+": oDate.getMonth() + 1, //月份
"d+": oDate.getDate(), //日
"h+": oDate.getHours(), //小時(shí)
"m+": oDate.getMinutes(), //分
"s+": oDate.getSeconds(), //秒
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
"S": oDate.getMilliseconds()//毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (let k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
},
// 下載文件到本地
downloadFile() {
var a = document.createElement('a')
// var blob = new Blob([content])
// var url = window.URL.createObjectURL(blob)
a.href = '控件下載地址'
a.download = '視頻插件'
a.click()
// window.URL.revokeObjectURL(url)
},
}
注意： 首先他給得Demo寫(xiě)的還是蠻清楚的，注釋都比較好
里面的請(qǐng)求我沒(méi)有刪除
我覺(jué)得都會(huì)用到
首先這個(gè)視頻加載是直接使用的安防管理平臺(tái)的監(jiān)控點(diǎn)，進(jìn)行渲染的，所以首先需要進(jìn)行相應(yīng)的請(qǐng)求，獲取攝像頭列表的數(shù)據(jù)，進(jìn)行展示控件的布局，然后進(jìn)行視頻預(yù)覽的播放。
其余的文檔里面的寫(xiě)的很清楚
總結(jié)
以上是生活随笔為你收集整理的php对接海康视频教程_海康安防管理平台Web视频对接的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 第三章 使用属性升级MyBank
- 下一篇： PHP内存管理机制与垃圾回收机制