海康安防管理平台Web視頻對接
開發文檔https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10
1.視頻分為預覽和回放
2.使用web端的需要安裝插件 軟件包里面有
3.使用iframe需要啟動相依的插件
4.給得demo需要進行配置 key ip port 是的
要展示記錄就是跑在vue上邊
使用的是rtsp的視頻流
由於控件展示的時候需要是需要js刷新的，所以在適配上，比較麻煩，所以就讓某一個外部元素跟着瀏覽器的大小進行變化，視頻控件跟着大小變化，海康的視頻控件支持后期修改的操作回調
<div>
<div id="playWnd" class="playWnd"></div>
<div v-show="lodingshow" style="margin: -17px 0;">
<a-spin tip="Loading...">
<div class="spin-content">
插件未啟動，正在嘗試啟動，請稍候...
</div>
</a-spin>
</div>
<div v-show="lodingres" class="example">
<p style="margin: 0;display: inline-block;">沒有檢測到插件，請安裝插件后重啟瀏覽器！</p>
<a-button class="buttonDetails-class" @click="downloadFile()">下載</a-button>
</div>
</div>
data() {
return {
$,
// 控制窗口個數
camlength: "1x1",
// 插件沒有啟動的顯示樣式
lodingshow: false,
lodingres: false,
usefullData
}
},
created() {
// 加載播放實例
this.initPlugin();
// 監聽resize事件，使插件窗口尺寸跟隨DIV窗口變化
// vue 的onresize
$(window).resize(() => {
if (oWebControl != null) {
oWebControl.JS_Resize( $('.map').width(), $('.map').height() - 60);
}
});
},
// 頁面結束的時候關閉顯示窗口
destroyed() {
if (oWebControl != null) {
oWebControl.JS_HideWnd(); // 先讓窗口隱藏，規避可能的插件窗口滯后於瀏覽器消失問題
oWebControl.JS_Disconnect().then(() => { // 斷開與插件服務連接成功
},
() => { // 斷開與插件服務連接失敗
});
}
},
methods: {
// 修改布局 展示畫面
refusePlay() {
// 獲取區域列表下的攝像機列表 進行布局展示
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"
}
// 設置攝像頭的布局
oWebControl.JS_RequestInterface({
funcName: "setLayout",
argument: {layout: this.camlength}
}).then(() => {
// 有監控點就進行播放
if (res.data.data.list.length > 0) {
this.$message.success('獲取成功 監控點數量為' + res.data.data.list.length)
res.data.data.list.forEach((item, index) => {
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: item.cameraIndexCode, //監控點編號
streamMode: 0, //主子碼流標識
transMode: 1, //傳輸協議
gpuMode: 0, //是否開啟GPU硬解
wndId: index + 1 //可指定播放窗口
})
})
})
} else {
this.$message.warning('當前區域無直屬監控點區域')
// 停止全部的播放
let result = JSON.stringify({
"funcName": "stopAllPreview"
}, null, 2)
this.requestInterface(result);
}
})
} else {
this.$message.error('獲取失敗')
}
})
},
// $('.map').width(), $('.map').height() - 60)
// 創建播放實例
initPlugin() {
// eslint-disable-next-line no-undef
oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口號，建議使用該值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用於IE10使用ActiveX的clsid
cbConnectSuccess: () => { // 創建WebControl實例成功
oWebControl.JS_StartService("window", { // WebControl實例創建成功后需要啟動服務
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"寫死
}).then(() => { // 啟動插件服務成功
oWebControl.JS_SetWindowControlCallback({ // 設置消息回調
cbIntegrationCallBack: this.cbIntegrationCallBack
});
oWebControl.JS_CreateWnd("playWnd", $('.map').width(), $('.map').height() - 60).then(() => { //JS_CreateWnd創建視頻播放窗口，寬高可設定
this.init(); // 創建播放實例成功后初始化
});
}, () => { // 啟動插件服務失敗
});
},
cbConnectError: () => { // 創建WebControl實例失敗
oWebControl = null;
// $("#playWnd").html("插件未啟動，正在嘗試啟動，請稍候...");
this.lodingshow = true;
// eslint-disable-next-line no-undef
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未啟動時執行error函數，采用wakeup來啟動程序
initCount++;
if (initCount < 3) {
setTimeout(() => {
this.initPlugin();
}, 3000)
} else {
this.lodingshow = false;
this.lodingres = true;
// $("#playWnd").html("插件啟動失敗，請檢查插件是否安裝！");
}
},
cbConnectClose: () => {
// 異常斷開：bNormalClose = false
// JS_Disconnect正常斷開：bNormalClose = true
oWebControl = null;
}
});
},
//初始化
init() {
// 獲取公鑰的方法
this.getPubKey(() => {
////////////////////////////////// 請自行修改以下變量值 ////////////////////////////////////
let appkey = usefullData.appkey; //綜合安防管理平台提供的appkey，必填
// 進行相應的加密
let secret = this.setEncrypt(usefullData.secret); //綜合安防管理平台提供的secret，必填
let ip = usefullData.ip; //綜合安防管理平台IP地址，必填
let port = usefullData.port; //綜合安防管理平台端口，若啟用HTTPS協議，默認443
let playMode = 0; //初始播放模式：0-預覽，1-回放
let snapDir = "D:\\SnapDir"; //抓圖存儲路徑
let videoDir = "D:\\VideoDir"; //緊急錄像或錄像剪輯存儲路徑
let layout = "1x1"; //playMode指定模式的布局
let enableHTTPS = 1; //是否啟用HTTPS協議與綜合安防管理平台交互，這里總是填1
let encryptedFields = 'secret'; //加密字段，默認加密領域為secret
let showToolbar = 1; //是否顯示工具欄，0-不顯示，非0-顯示
let showSmart = 1; //是否顯示智能信息（如配置移動偵測后畫面上的線框），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"
////////////////////////////////// 請自行修改以上變量值 ////////////////////////////////////
oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey, //API網關提供的appkey
secret: secret, //API網關提供的secret
ip: ip, //API網關IP地址
playMode: playMode, //播放模式（決定顯示預覽還是回放界面）
port: port, //端口
snapDir: snapDir, //抓圖存儲路徑
videoDir: videoDir, //緊急錄像或錄像剪輯存儲路徑
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否啟用HTTPS協議
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否顯示工具欄
showSmart: showSmart, //是否顯示智能信息
buttonIDs: buttonIDs, //自定義工具條按鈕
toolBarButtonIDs:toolBarButtonIDs //自定義最外層的工具條
})
}).then(() => {
oWebControl.JS_Resize( $('.map').width(), $('.map').height() - 60); // 初始化后resize一次，規避firefox下首次顯示窗口后插件窗口未與DIV窗口重合問題
// 加載完成后進行布局的修改 和 攝像頭的展示
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));
},
// 設置窗口裁剪，當因滾動條滾動導致窗口需要被遮住的情況下需要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個像素點防止還原后邊界缺失一個像素條
if (iCoverLeft != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
}
if (iCoverTop != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, $('.map').width(), iCoverTop); // 多剪掉一個像素條，防止出現剪掉一部分窗口后出現一個像素條
}
if (iCoverRight != 0) {
oWebControl.JS_CuttingPartWindow($('.map').width() - iCoverRight, 0, iCoverRight, 600);
}
if (iCoverBottom != 0) {
oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, $('.map').width(), iCoverBottom);
}
},
// 執行字符串方法
// value為字符串，JS_RequestInterface僅接收json格式的變量，且需要先解析出argument，並且將argument字段的內容轉為字符串
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 : ''));
});
},
// 顯示接口返回的消息及插件回調信息
showCBInfo(szInfo, type) {
if (type === 'error') {
szInfo = "<div style='color: red;'>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
} else {
szInfo = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
}
$("#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;
}
}
},
// 格式化時間
dateFormat(oDate, fmt) {
let o = {
"M+": oDate.getMonth() + 1, //月份
"d+": oDate.getDate(), //日
"h+": oDate.getHours(), //小時
"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寫的還是蠻清楚的，注釋都比較好
里面的請求我沒有刪除
我覺得都會用到
首先這個視頻加載是直接使用的安防管理平台的監控點，進行渲染的，所以首先需要進行相應的請求，獲取攝像頭列表的數據，進行展示控件的布局，然后進行視頻預覽的播放。
其余的文檔里面的寫的很清楚