284 lines
9.7 KiB
JavaScript
284 lines
9.7 KiB
JavaScript
// import './jsencrypt.min.js';
|
|
import { GlobalStore } from "@/stores";
|
|
const store = GlobalStore();
|
|
class VideoPlugin {
|
|
constructor() {
|
|
this.isChrome = navigator.userAgent.indexOf('Chrome') > -1;
|
|
this.WebControl = null;
|
|
this.oWebControl = null;
|
|
this.pubKey = '';
|
|
this.initCount = 0;
|
|
this.loadWebControl();
|
|
}
|
|
|
|
async loadWebControl() {
|
|
if (this.isChrome) {
|
|
try {
|
|
this.WebControl = window.WebControl;
|
|
} catch (error) {
|
|
console.error('加载WebControl失败:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
async initPlugin(itemId, appkey, secret, ip, port, videoData, layout) {
|
|
if (!this.WebControl) {
|
|
console.error('WebControl未加载完成');
|
|
return false;
|
|
}
|
|
// 确保所有必要参数都已初始化
|
|
this.appkey = appkey;
|
|
this.secret = secret;
|
|
this.ip = ip;
|
|
this.port = port;
|
|
this.layout = layout;
|
|
this.width = 0;
|
|
this.height = 0;
|
|
return new Promise((resolve, reject) => {
|
|
this.oWebControl = new this.WebControl({
|
|
szPluginContainer: `playWnd${itemId}`,
|
|
iServicePortStart: 15900,
|
|
iServicePortEnd: 15909,
|
|
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
|
|
cbConnectSuccess: () => this.onConnectSuccess(itemId, videoData, resolve),
|
|
cbConnectError: () => this.onConnectError(itemId, appkey, secret, ip, port, reject),
|
|
cbConnectClose: () => console.log("连接关闭")
|
|
});
|
|
});
|
|
}
|
|
|
|
onConnectSuccess(itemId, videoData, resolve) {
|
|
this.setCallbacks();
|
|
this.oWebControl.JS_StartService("window", {
|
|
dllPath: "./VideoPluginConnect.dll"
|
|
}).then(() => {
|
|
this.setupWindow(itemId, videoData);
|
|
resolve(true);
|
|
}).catch(error => {
|
|
console.error('启动服务失败:', error);
|
|
});
|
|
}
|
|
|
|
onConnectError(itemId, appkey, secret, ip, port, reject) {
|
|
console.log("插件未启动，正在尝试启动...");
|
|
this.initCount++;
|
|
|
|
if (this.initCount < 3) {
|
|
setTimeout(() => this.initPlugin(itemId, appkey, secret, ip, port), 3000);
|
|
} else {
|
|
reject(new Error("插件启动失败"));
|
|
this.showDownloadDialog();
|
|
}
|
|
}
|
|
|
|
setupWindow(itemId, videoData) {
|
|
const bottomHeight = 0;
|
|
let width = document.getElementById(`videoOverview${itemId}`).offsetWidth;
|
|
let height = document.getElementById(`videoOverview${itemId}`).offsetHeight - bottomHeight;
|
|
|
|
// 缩放比例计算
|
|
let ratio = 1;
|
|
// if (enabledProjectV2 != 1) {
|
|
// if (localStorage.getItem('systemInfo') && JSON.parse(localStorage.getItem('systemInfo')).zoomType != 1) {
|
|
// ratio = this.getRatio();
|
|
// }
|
|
// }
|
|
|
|
width = width * ratio;
|
|
height = height * ratio;
|
|
|
|
// 窗口大小调整处理
|
|
window.onresize = () => {
|
|
clearTimeout(window.$timeId);
|
|
window.$timeId = setTimeout(() => {
|
|
const container = document.getElementById('videoBoxContainer') || document.querySelector('.videocBox');
|
|
if (container) {
|
|
width = container.offsetWidth;
|
|
height = container.offsetHeight - 80;
|
|
}
|
|
if (this.oWebControl != null) {
|
|
this.oWebControl.JS_Resize(width, height);
|
|
}
|
|
}, 10);
|
|
};
|
|
|
|
this.oWebControl.JS_CreateWnd(`playWnd${itemId}`, width, height, {
|
|
bEmbed: false,
|
|
cbSetDocTitle: (uuid) => {
|
|
this.oWebControl._pendBg = false;
|
|
window.parent.postMessage({
|
|
action: 'updateTitle',
|
|
msg: '子页面通知父页面修改title',
|
|
info: uuid
|
|
}, '*');
|
|
}
|
|
}).then(() => {
|
|
console.log("JS_CreateWnd success");
|
|
this.initVideo(videoData, itemId);
|
|
});
|
|
}
|
|
|
|
initVideo(videoData, itemId) {
|
|
this.getPubKey().then(() => {
|
|
const config = {
|
|
appkey: this.appkey,
|
|
secret: this.setEncrypt(this.secret),
|
|
ip: this.ip,
|
|
playMode: 0,
|
|
port: parseInt(this.port),
|
|
snapDir: "D:\\SnapDir",
|
|
videoDir: "D:\\VideoDir",
|
|
layout: this.layout,
|
|
enableHTTPS: 1,
|
|
encryptedFields: 'secret',
|
|
showToolbar: 0,
|
|
showSmart: 1,
|
|
buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"
|
|
};
|
|
// 添加调试日志
|
|
console.log('初始化配置:', config);
|
|
console.log('视频数据:', videoData);
|
|
this.oWebControl.JS_RequestInterface({
|
|
funcName: "init",
|
|
argument: JSON.stringify(config)
|
|
}).then((response) => {
|
|
console.log('初始化响应:', response);
|
|
console.log("init success", videoData, document.getElementById(`videoOverview${itemId}`), document.getElementById(`videoOverview${itemId}`).width, document.getElementById(`videoOverview${itemId}`).offsetHeight);
|
|
// 确保使用最新的width和height
|
|
const width = document.getElementById(`videoOverview${itemId}`).offsetWidth;
|
|
const height = document.getElementById(`videoOverview${itemId}`).offsetHeight;
|
|
this.ratio = store.globalScale;
|
|
console.log('缩放比例:', this.ratio);
|
|
this.oWebControl.JS_Resize(width * this.ratio, height * this.ratio);
|
|
this.startVideoPreview(videoData);
|
|
});
|
|
});
|
|
}
|
|
startVideoPreview(videoData) {
|
|
for (let i = 0; i < videoData.length; i++) {
|
|
if (i < 24 && videoData.length >= i) {
|
|
this.openVideo(videoData[i].serialNumber, videoData[i].defaultStreamType, i + 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
openVideo(cameraIndexCode, streamMode, winIndex = 0) {
|
|
const transMode = 1; // TCP
|
|
const gpuMode = 0; // 不启用GPU硬解
|
|
// 添加调试信息
|
|
console.log('开始预览:', {
|
|
cameraIndexCode,
|
|
streamMode,
|
|
winIndex,
|
|
transMode,
|
|
gpuMode
|
|
});
|
|
this.oWebControl.JS_RequestInterface({
|
|
funcName: "startPreview",
|
|
argument: JSON.stringify({
|
|
cameraIndexCode: cameraIndexCode,
|
|
streamMode: streamMode == 2 && (winIndex > 4) ? 0 : 1,
|
|
transMode: transMode,
|
|
gpuMode: gpuMode,
|
|
wndId: winIndex || -1,
|
|
})
|
|
}).then((oData) => {
|
|
console.log('预览响应:', oData);
|
|
});
|
|
}
|
|
|
|
unInitPlugin() {
|
|
if (!this.oWebControl) return false;
|
|
|
|
const isIE = !!window.ActiveXObject || 'ActiveXObject' in window;
|
|
if (isIE) {
|
|
this.oWebControl.JS_Disconnect().then(() => {
|
|
console.log("JS_Disconnect");
|
|
});
|
|
} else {
|
|
this.oWebControl.JS_DestroyWnd().then(() => {
|
|
console.log("JS_DestroyWnd");
|
|
this.oWebControl.JS_StopService("window").then(() => {
|
|
this.oWebControl.JS_Disconnect().then(() => {
|
|
console.log("JS_Disconnect");
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
setCallbacks() {
|
|
this.oWebControl.JS_SetWindowControlCallback({
|
|
cbIntegrationCallBack: this.cbIntegrationCallBack
|
|
});
|
|
}
|
|
|
|
getRatio() {
|
|
const bodyWidth = document.body.clientWidth;
|
|
const bodyHeight = document.body.clientHeight;
|
|
const scaleWidthNum = bodyWidth / 1920;
|
|
const scaleHeightNum = bodyHeight / 1080;
|
|
|
|
return scaleWidthNum > scaleHeightNum ? scaleHeightNum : scaleWidthNum;
|
|
}
|
|
|
|
setEncrypt(value) {
|
|
const encrypt = new JSEncrypt();
|
|
encrypt.setPublicKey(this.pubKey);
|
|
return encrypt.encrypt(value);
|
|
}
|
|
|
|
getPubKey() {
|
|
return new Promise((resolve) => {
|
|
this.oWebControl.JS_RequestInterface({
|
|
funcName: "getRSAPubKey",
|
|
argument: JSON.stringify({ keyLength: 1024 })
|
|
}).then((oData) => {
|
|
if (oData.responseMsg.data) {
|
|
this.pubKey = oData.responseMsg.data;
|
|
resolve();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
cbIntegrationCallBack(oData) {
|
|
console.log(JSON.stringify(oData.responseMsg));
|
|
}
|
|
|
|
showDownloadDialog() {
|
|
if (confirm("检测到视频插件未安装，是否下载视频插件?")) {
|
|
window.location.href = "http://101.43.164.214:11111/image/VideoWebPlugin.rar";
|
|
}
|
|
}
|
|
|
|
resizePlugin(val, itemId) {
|
|
if (this.oWebControl) {
|
|
const width = document.getElementById(`videoOverview${itemId}`).offsetWidth;
|
|
const height = document.getElementById(`videoOverview${itemId}`).offsetHeight;
|
|
|
|
if (val && val == 1) {
|
|
this.oWebControl.JS_Resize(width / 2 + 20, height - 215);
|
|
} else {
|
|
this.oWebControl.JS_Resize(width, height);
|
|
}
|
|
}
|
|
}
|
|
hidePluginWindow() {
|
|
if (this.oWebControl) {
|
|
this.oWebControl.JS_HideWnd();
|
|
}
|
|
}
|
|
showPluginWindow() {
|
|
if (this.oWebControl) {
|
|
this.oWebControl.JS_ShowWnd();
|
|
}
|
|
}
|
|
setPluginOffset(left, top) {
|
|
if (this.WebControl) {
|
|
this.WebControl.JS_SetDocOffset({ left, top });
|
|
}
|
|
}
|
|
}
|
|
|
|
export default VideoPlugin; |