526 lines
17 KiB
JavaScript
526 lines
17 KiB
JavaScript
import './jsencrypt.min.js'
|
||
// import {
|
||
// WebControl
|
||
// } from './jsWebControl-1.0.0.min.js'
|
||
|
||
var isChrome = navigator.userAgent.indexOf('Chrome') > -1 // 是否是谷歌
|
||
|
||
if (isChrome) {
|
||
// let WebControl = null
|
||
var aa = () => import('./jsWebControl-1.0.0.min.js')
|
||
aa().then(res => {
|
||
console.log(res)
|
||
WebControl = res.WebControl
|
||
})
|
||
}
|
||
console.log('谷歌' + isChrome)
|
||
var oWebControl = null;
|
||
var pubKey = '';
|
||
var initCount = 0;
|
||
var a, b, c, d, types, layouts;
|
||
var width, height;
|
||
// var _thiss;
|
||
// 获取公钥
|
||
// function getPubKey(callback) {
|
||
// oWebControl.JS_RequestInterface({
|
||
// funcName: "getRSAPubKey",
|
||
// argument: JSON.stringify({
|
||
// keyLength: 1024
|
||
// })
|
||
// }).then(function (oData) {
|
||
// console.log(oData)
|
||
// if (oData.responseMsg.data) {
|
||
// pubKey = oData.responseMsg.data
|
||
// callback()
|
||
// }
|
||
// })
|
||
// }
|
||
// RSA加密
|
||
function setEncrypt(value) {
|
||
var encrypt = new JSEncrypt();
|
||
encrypt.setPublicKey(pubKey);
|
||
return encrypt.encrypt(value);
|
||
}
|
||
// 反初始化
|
||
export function unInitObjPlugin() {
|
||
console.log('调用unInitObjPlugin', '5555555');
|
||
//
|
||
if (!oWebControl) {
|
||
return false;
|
||
}
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "destroyWnd"
|
||
}).then(function (oData) {
|
||
console.log(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
console.log('销毁失败');
|
||
});
|
||
//
|
||
var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window); // 是否为IE浏览器
|
||
if (bIE) {
|
||
if (oWebControl != null) {
|
||
oWebControl.JS_Disconnect().then(function () {
|
||
console.log("JS_Disconnect");
|
||
}, function () { });
|
||
}
|
||
} else {
|
||
if (oWebControl != null) {
|
||
oWebControl.JS_DestroyWnd().then(function () {
|
||
console.log("JS_DestroyWnd");
|
||
}, function () { });
|
||
oWebControl.JS_StopService("window").then(function () {
|
||
oWebControl.JS_Disconnect().then(function () {
|
||
console.log("JS_Disconnect");
|
||
}, function () { });
|
||
});
|
||
}
|
||
}
|
||
}
|
||
//预览视频
|
||
export function OpenVideo(cameraIndexCode, streamMode, winIndex = 0) {
|
||
var transMode = +'1'; //传输协议：1、TCP 0、UDP
|
||
var gpuMode = +'0'; //是否启用GPU硬解：1、启用 0、不启用
|
||
console.log(8855544, streamMode)
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "startPreview",
|
||
argument: JSON.stringify({
|
||
cameraIndexCode: cameraIndexCode,
|
||
streamMode: streamMode == 2 && (winIndex > 4) ? 0 : 1, // 码流类型 0 主码流 1 子码流 (2 主码流 1 子码流)
|
||
transMode: transMode,
|
||
gpuMode: gpuMode,
|
||
wndId: -1,
|
||
})
|
||
}).then(function (oData) {
|
||
console.log(oData.responseMsg.code === 336)
|
||
console.log(JSON.stringify(oData ? oData.responseMsg : ''));
|
||
|
||
// if(oData.responseMsg.code === 336){
|
||
// return
|
||
// }
|
||
console.log('预览视频失败');
|
||
});
|
||
}
|
||
// 设置窗口控制回调
|
||
function setCallbacks() {
|
||
oWebControl.JS_SetWindowControlCallback({
|
||
cbIntegrationCallBack: cbIntegrationCallBack
|
||
});
|
||
}
|
||
|
||
// 页面缩放比例
|
||
function getRatio() {
|
||
let bodyWidth = document.body.clientWidth
|
||
// console.log(window.screen.width)
|
||
let bodyHeight = document.body.clientHeight
|
||
let scaleWidthNum = bodyWidth / 1920
|
||
let scaleHeightNum = bodyHeight / 1080
|
||
|
||
let ratio;
|
||
if (scaleWidthNum > scaleHeightNum) {
|
||
ratio = scaleHeightNum
|
||
} else {
|
||
ratio = scaleWidthNum
|
||
}
|
||
return ratio;
|
||
}
|
||
|
||
// 初始化
|
||
export function InitObjPlugin(appkey, secret, ip, port, type, videoData, layout) {
|
||
console.log(videoData)
|
||
a = appkey
|
||
b = secret
|
||
c = ip
|
||
d = port
|
||
types = type
|
||
layouts = layout
|
||
//
|
||
oWebControl = new WebControl({
|
||
szPluginContainer: "playWnd", //指定容器id
|
||
iServicePortStart: 15900,
|
||
iServicePortEnd: 15909,
|
||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
|
||
cbConnectSuccess: function () {
|
||
setCallbacks();
|
||
oWebControl.JS_StartService("window", {
|
||
dllPath: "./VideoPluginConnect.dll"
|
||
//dllPath: "./DllForTest-Win32.dll"
|
||
}).then(function () {
|
||
// if (type) {
|
||
// var a = document.getElementById('videoBoxContainer')
|
||
// width = a.offsetWidth - 10
|
||
// height = a.offsetHeight - 60
|
||
// } else {
|
||
// console.log(document.getElementById('videoOverview').offsetWidth,document.getElementById('videoOverview').offsetHeight)
|
||
var bottomHeight = 0
|
||
// if(window.location.href.indexOf('/project/')!=-1){
|
||
// bottomHeight = 60
|
||
// }
|
||
width = document.getElementById('videoOverview').offsetWidth
|
||
height = document.getElementById('videoOverview').offsetHeight - bottomHeight
|
||
let ratio = 1
|
||
// console.log(JSON.parse(localStorage.getItem('systemInfo')).zoomType)
|
||
if (enabledProjectV2 != 1) {
|
||
if (localStorage.getItem('systemInfo') && JSON.parse(localStorage.getItem('systemInfo')).zoomType != 1) {
|
||
ratio = getRatio()
|
||
}
|
||
}
|
||
console.log(ratio)
|
||
width = width * ratio
|
||
height = height * ratio
|
||
// width = 500
|
||
// height = 500
|
||
// console.dir(document.getElementById('videoOverview'))
|
||
console.log(width, height)
|
||
// }
|
||
window.$timeId = null;
|
||
if (window.localStorage.getItem('isIframe')) {
|
||
if (window.localStorage.getItem('isIframe') == '1') {
|
||
// width = 796
|
||
// height = 672
|
||
width = width * 0.66
|
||
height = height * 0.98
|
||
}
|
||
console.log(window.localStorage.getItem('isIframe'))
|
||
}
|
||
// 0.766667
|
||
console.log(12)
|
||
window.onresize = function () {
|
||
width = document.getElementById('videoOverview').offsetWidth
|
||
height = document.getElementById('videoOverview').offsetHeight - bottomHeight
|
||
let ratio = 1
|
||
// if(enabledProjectV2!=1){
|
||
// ratio = getRatio()
|
||
// }
|
||
width = width * ratio
|
||
height = height * ratio
|
||
clearTimeout(window.$timeId);
|
||
window.$timeId = setTimeout(() => {
|
||
var a = document.getElementById('videoBoxContainer') || document.querySelector('.videocBox')
|
||
if (a) {
|
||
width = a.offsetWidth
|
||
height = a.offsetHeight - 80
|
||
}
|
||
if (oWebControl != null) {
|
||
oWebControl.JS_Resize(width, height);
|
||
// setWndCover();
|
||
}
|
||
}, 10);
|
||
}
|
||
oWebControl.JS_CreateWnd("playWnd", width, height, {
|
||
bEmbed: false,
|
||
cbSetDocTitle: function (uuid) {
|
||
oWebControl._pendBg = false;
|
||
window.parent.postMessage({
|
||
action: 'updateTitle',
|
||
msg: '子页面通知父页面修改title',
|
||
info: uuid
|
||
}, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
|
||
}
|
||
}).then(function () {
|
||
console.log("JS_CreateWnd success");
|
||
// ;
|
||
|
||
init(videoData)
|
||
});
|
||
}, function () {
|
||
|
||
});
|
||
},
|
||
cbConnectError: function () {
|
||
console.log("cbConnectError");
|
||
oWebControl = null;
|
||
console.log("插件未启动，正在尝试启动，请稍候...");
|
||
WebControl.JS_WakeUp("VideoWebPlugin://");
|
||
initCount++;
|
||
console.log(initCount)
|
||
if (initCount < 3) {
|
||
setTimeout(function () {
|
||
InitObjPlugin(a, b, c, d, types);
|
||
}, 3000)
|
||
} else {
|
||
console.log("插件启动失败，请检查插件是否安装！");
|
||
if (confirm("检测到视频插件未安装，是否下载视频插件?")) {
|
||
// window.location.href = "http://139.159.136.114:8081/itbgp/file/b092b773-ca5a-479d-b5bc-1ed84d46e762.exe"
|
||
// window.location.href = "/video/VideoWebPlugin.exe"
|
||
window.location.href = "http://101.43.164.214:11111/image/VideoWebPlugin.rar"
|
||
// window.location.href = "https://jk.cscec1b1.com:5138/image/VideoWebPlugin.exe"
|
||
}
|
||
// _thiss.$confirm('检测到视频插件未安装，是否下载视频插件?', '提示', {
|
||
// confirmButtonText: '确定',
|
||
// cancelButtonText: '取消',
|
||
// type: 'warning'
|
||
// }).then(() => {
|
||
// window.location.href="http://139.217.224.209:8080/itbgp/file/VideoWebPlugin.exe"
|
||
// }).catch(() => {
|
||
// _thiss.$message({
|
||
// type: 'info',
|
||
// message: '已取消下载'
|
||
// });
|
||
// });
|
||
}
|
||
},
|
||
cbConnectClose: function () {
|
||
console.log("cbConnectClose");
|
||
oWebControl = null;
|
||
}
|
||
});
|
||
|
||
}
|
||
//初始化
|
||
export function init(videoData) {
|
||
console.log(222222222222, videoData)
|
||
getPubKey(function () {
|
||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||
// var appkey = "20880397"; //综合安防管理平台提供的appkey，必填
|
||
// var secret = setEncrypt("WhyICfLp0NAalGjRa8Hx"); //综合安防管理平台提供的secret，必填
|
||
|
||
var appkey = a; //综合安防管理平台提供的appkey，必填
|
||
var secret = setEncrypt(b); //综合安防管理平台提供的secret，必填
|
||
var ip = c; //综合安防管理平台IP地址，必填
|
||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||
var port = parseInt(d); //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||
var layout = layouts; //playMode指定模式的布局
|
||
// var layout = "2x2"; //playMode指定模式的布局
|
||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，是为1，否为0
|
||
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||
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 //自定义工具条按钮
|
||
})
|
||
}).then(function (oData) {
|
||
console.log(width, height, oWebControl)
|
||
console.log('COMPANY++++++++++++++',COMPANY)
|
||
console.log(window.localStorage.getItem('isIframe'))
|
||
|
||
if (COMPANY=='xingxuan') {
|
||
oWebControl.oDocOffset.top = 94;
|
||
oWebControl.oDocOffset.left = 280;
|
||
}
|
||
|
||
|
||
oWebControl.JS_Resize(width, height);
|
||
// console.log('OpenVideo')
|
||
for (let i = 0; i < videoData.length; i++) {
|
||
if (i < 24 && videoData.length >= i) {
|
||
// setTimeout(()=>{
|
||
OpenVideo(videoData[i].serialNumber, videoData[i].defaultStreamType, i + 1)
|
||
// },1000)
|
||
|
||
}
|
||
}
|
||
// oWebControl.JS_Resize(1000, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||
});
|
||
});
|
||
}
|
||
//判断有没有初始化插件
|
||
export function isLoadPlugin(devList, layout) {
|
||
console.log('isLoadPlugin', oWebControl, devList)
|
||
if (oWebControl) {
|
||
devList.forEach(element => {
|
||
setTimeout(() => {
|
||
OpenVideo(element.serialNumber,element.defaultStreamType)
|
||
}, 500)
|
||
|
||
});
|
||
} else {
|
||
if(!devList[0]?.outip){
|
||
InitObjPlugin(
|
||
devList[0].appId,
|
||
devList[0].appSecret,
|
||
devList[0].account,
|
||
devList[0].port || devList[0].password,
|
||
false,
|
||
devList,
|
||
layout
|
||
);
|
||
}else{
|
||
InitObjPlugin(
|
||
devList[0].appId,
|
||
devList[0].appSecret,
|
||
devList[0].outip,
|
||
devList[0].outport,
|
||
false,
|
||
devList,
|
||
layout
|
||
);
|
||
}
|
||
|
||
}
|
||
}
|
||
// 推送消息
|
||
function cbIntegrationCallBack(oData) {
|
||
console.log(JSON.stringify(oData.responseMsg));
|
||
}
|
||
//获取公钥
|
||
function getPubKey(callback) {
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "getRSAPubKey",
|
||
argument: JSON.stringify({
|
||
keyLength: 1024
|
||
})
|
||
}).then(function (oData) {
|
||
console.log(oData);
|
||
if (oData.responseMsg.data) {
|
||
pubKey = oData.responseMsg.data;
|
||
callback()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 滚动条scroll
|
||
// window.onscroll = function () {
|
||
// if (oWebControl != null) {
|
||
// width = document.getElementById('videoOverview').offsetWidth
|
||
// height = document.getElementById('videoOverview').offsetHeight - 0
|
||
// oWebControl.JS_Resize(width, height);
|
||
// // setWndCover();
|
||
// }
|
||
// }
|
||
|
||
// 监听滚动条 - 滚动摄像头列表会照成抖动(去除
|
||
// window.addEventListener('scroll', () => {
|
||
// // console.log('滚动条')
|
||
// if(oWebControl != null){
|
||
// width = document.getElementById('videoOverview').offsetWidth-20
|
||
// height = document.getElementById('videoOverview').offsetHeight-18
|
||
// oWebControl.JS_Resize(width, height );
|
||
// }
|
||
// },true);
|
||
// 监听窗口
|
||
// window.addEventListener('resize', () => {
|
||
// console.log('窗口')
|
||
// if(oWebControl != null){
|
||
// width = document.getElementById('videoOverview').offsetWidth-38
|
||
// height = document.getElementById('videoOverview').offsetHeight-20
|
||
// oWebControl.JS_Resize(width, height );
|
||
// }
|
||
// },true);
|
||
|
||
//窗口关闭时销毁插件
|
||
window.onunload = function () {
|
||
if (oWebControl != null) {
|
||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
oWebControl.JS_Disconnect().then(function () { }, function () { });
|
||
}
|
||
}
|
||
export function resizeFn(val) {
|
||
if (oWebControl) {
|
||
width = document.getElementById('videoOverview').offsetWidth
|
||
height = document.getElementById('videoOverview').offsetHeight - 0
|
||
if (val && val == 1) {
|
||
oWebControl.JS_Resize(width / 2 + 20, height - 215);
|
||
} else {
|
||
oWebControl.JS_Resize(width, height);
|
||
}
|
||
|
||
// setWndCover();
|
||
}
|
||
|
||
}
|
||
// 设置窗口遮挡
|
||
function setWndCover() {
|
||
console.log('setWndCover')
|
||
var iWidth = document.body.clientWidth;
|
||
var iHeight = document.body.clientHeight;
|
||
var oDivRect = document.getElementById('playWnd').getBoundingClientRect();
|
||
|
||
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
|
||
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
|
||
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||
|
||
iCoverLeft = (iCoverLeft > width) ? width : iCoverLeft;
|
||
iCoverTop = (iCoverTop > height) ? height : iCoverTop;
|
||
iCoverRight = (iCoverRight > width) ? width : iCoverRight;
|
||
iCoverBottom = (iCoverBottom > height) ? height : iCoverBottom;
|
||
|
||
if (iLastCoverLeft != iCoverLeft) {
|
||
console.log("iCoverLeft: " + iCoverLeft);
|
||
iLastCoverLeft = iCoverLeft;
|
||
oWebControl.JS_SetWndCover("left", iCoverLeft);
|
||
}
|
||
if (iLastCoverTop != iCoverTop) {
|
||
console.log("iCoverTop: " + iCoverTop);
|
||
iLastCoverTop = iCoverTop;
|
||
oWebControl.JS_SetWndCover("top", iCoverTop);
|
||
}
|
||
if (iLastCoverRight != iCoverRight) {
|
||
console.log("iCoverRight: " + iCoverRight);
|
||
iLastCoverRight = iCoverRight;
|
||
oWebControl.JS_SetWndCover("right", iCoverRight);
|
||
}
|
||
if (iLastCoverBottom != iCoverBottom) {
|
||
console.log("iCoverBottom: " + iCoverBottom);
|
||
iLastCoverBottom = iCoverBottom;
|
||
oWebControl.JS_SetWndCover("bottom", iCoverBottom);
|
||
}
|
||
}
|
||
//隐藏插件窗口
|
||
export function hidePluginWindow() {
|
||
// console.log(123)
|
||
// console.log('hidePluginWindow')
|
||
oWebControl.JS_HideWnd()
|
||
// oWebControl.JS_RequestInterface({
|
||
// funcName: "hideWnd"
|
||
// }).then(function(data){
|
||
// console.log('hidePluginWindow',data)
|
||
// })
|
||
}
|
||
//显示插件窗口
|
||
export function showPluginWindow() {
|
||
// console.log(112)
|
||
// console.log('showPluginWindow')
|
||
oWebControl.JS_ShowWnd()
|
||
// oWebControl.JS_RequestInterface({
|
||
// funcName: "showWnd"
|
||
// }).then(function(data){
|
||
// console.log('showPluginWindow',data)
|
||
// })
|
||
}
|
||
export function setOffset(l, t) {
|
||
WebControl.JS_SetDocOffset({
|
||
left: l,
|
||
top: t
|
||
})
|
||
console.log(l, t, "===============================")
|
||
}
|
||
|
||
export function setWidthAndHeight(width, height) {
|
||
oWebControl.JS_Resize(width, height);
|
||
|
||
}
|
||
// JS_CuttingPartWindow
|
||
export function cuttingPartWindow(iLeft, iTop, iWidth, iHeight) {
|
||
oWebControl.JS_CuttingPartWindow(iLeft, iTop, iWidth, iHeight)
|
||
}
|
||
// 关闭所有视频
|
||
export function closeAllVideo() {
|
||
oWebControl.JS_RequestInterface({
|
||
funcName: "stopAllPreview"
|
||
});
|
||
}
|
||
// 获取当前布局
|
||
export const getCurrentLayout = async () => {
|
||
const data = await oWebControl.JS_RequestInterface({
|
||
funcName: "getLayout"
|
||
});
|
||
return data;
|
||
} |