const ZQL_multivideo = {
setVideoEl: () => {
let videoContainer = document.querySelector("#video-container");
if (ZQL_playingSource.videoNum == 1) {
videoContainer.className = "one-video";
videoContainer.innerHTML = `
`
} else {
videoContainer.className = "four-video";
videoContainer.innerHTML = `
`
}
},
liveLoading: (index) => {
let tipel = document.querySelector("#tip" + index);
tipel.innerHTML = ``
},
liveOffline: (index) => {
let tipel = document.querySelector("#tip" + index);
tipel.innerHTML = `
离线
`
},
liveStopLoading: (index) => {
let tipel = document.querySelector("#tip" + index);
if (tipel) {
tipel.innerHTML = ``
}
},
setAlgList(index) {
let el = document.querySelector(`#video-title${index}`);
let algList = ZQL_sources[ZQL_playingSource[index]].alg;
let algEl = '';
for (let alg in algList) {
let name = algList[alg].reserved_args.ch_name;
algEl = algEl + `- ${name}
`
}
algEl = algEl + '
'
el.innerHTML = `
${ZQL_sources[ZQL_playingSource[index]].desc}
算法: ${ZQL_playingSource[index].alg ? ZQL_sources[ZQL_playingSource[index]].alg[alg].reserved_args.ch_name : ''}
${algEl}
关闭
`;
el.querySelectorAll('li').forEach(item => {
item.addEventListener('click', (e) => {
let index = e.currentTarget.getAttribute("index");
let alg = e.currentTarget.getAttribute("alg")
ZQL_videosInfos[index].alg = alg;
let videlel = document.querySelector(`#video-title${index}`);
videlel.querySelector(".algname").innerHTML = '算法：' + ZQL_sources[ZQL_playingSource[index]].alg[alg].reserved_args.ch_name
})
})
document.querySelector(`#close${index}`).addEventListener('click', () => {
ZQL_multivideo.clearAlgList(index);
ZQL_multivideo.liveStopLoading(index);
ZQL_multivideo.destoryVideoByIndex(index);
ZQL_playingSource[index] = null;
ZQL_videosInfos[index] = null;
})
},
clearAlgList(index) {
let el = document.querySelector(`#video-title${index}`);
if (el) {
el.innerHTML = ""
}
},
handleRefresh(index) {
if (!ZQL_videosInfos[index]) {
return;
}
if (ZQL_videosInfos[index].status == "离线") {
ZQL_multivideo.destoryVideoByIndex(index);
ZQL_multivideo.subscribeLive(ZQL_playingSource[index], index);
} else {
if (!ZQL_videosInfos[index].stream) {
return;
}
let video = document.getElementById("video" + index);
video && (video.srcObject = null);
if (ZQL_videosInfos[index] && ZQL_videosInfos[index].replayTimer) {
clearTimeout(ZQL_videosInfos[index].replayTimer);
ZQL_videosInfos[index].replayTimer = null;
}
ZQL_videosInfos[index] &&
ZQL_videosInfos[index].srsrtc &&
ZQL_videosInfos[index].srsrtc.destroy();
ZQL_videosInfos[index].srsrtc = null;
ZQL_videosInfos[index].status = "";
ZQL_multivideo.playVideo(ZQL_playingSource[index], index);
}
},
subscribeLive(cameraId, index) {
ZQL_multivideo.getCameraSize(cameraId, index);
ZQL_multivideo.liveLoading(index);
ZQL_apis
.subscribeLive(
// ZQL_sources[cameraId].deviceId,
// ZQL_sources[cameraId].sourceId
cameraId
)
.then((data) => {
let stream = data.data;
if (data && stream) {
ZQL_videosInfos[index].stream = stream;
ZQL_multivideo.playVideo(cameraId, index);
} else {
if (ZQL_playingSource[index] == cameraId) {
ZQL_multivideo.liveOffline(index);
// ZQL_videosInfos[index].status = "离线";
// ZQL_videosInfos[index].loading = false;
// this.reSubcribe(cameraId, index);
}
}
})
.catch((err) => {
if (
ZQL_playingSource[index] == cameraId &&
ZQL_videosInfos[index]
) {
ZQL_multivideo.liveOffline(index);
// ZQL_videosInfos[index].status = "离线";
// ZQL_videosInfos[index].loading = false;
// this.reSubcribe(cameraId, index);
}
});
},
playVideo(cameraId, index) {
if (ZQL_videosInfos[index].srsrtc) {
return;
}
ZQL_videosInfos[index].loading = true;
let video = document.getElementById("video" + index);
let stream = ZQL_videosInfos[index].stream;
var srsrtc;
if (stream.indexOf("webrtc") >= 0) {
let src =
"webrtc://" + ZQLGLOBAL.serverIp + "/live" + stream.split("/live")[1];
srsrtc = new JSWebrtc.Player(src, {
video: video,
autoplay: true,
onPlay: (obj) => {
ZQL_multivideo.liveStopLoading(index);
ZQL_videosInfos[index].loading = false;
ZQL_videosInfos[index].playerState = "success";
},
});
} else if (stream.indexOf(".flv") >= 0) {
let src = `http://${ZQLGLOBAL.serverIp}:${ZQLGLOBAL.srs_http_server}/live${stream.split("/live")[1]
}`;
srsrtc = mpegts.createPlayer(
{
type: "flv",
url: src,
isLive: true,
},
{ enableWorker: true }
);
srsrtc.attachMediaElement(video);
srsrtc.load();
ZQL_videosInfos[index].playerState = "";
srsrtc
.play()
.then((res) => {
ZQL_multivideo.liveStopLoading(index);
ZQL_videosInfos[index].playerState = "success";
ZQL_videosInfos[index].loading = false;
if (ZQL_videosInfos[index].refreshTimeInterval) {
clearInterval(ZQL_videosInfos[index].refreshTimeInterval);
}
ZQL_videosInfos[index].refreshTime =
parseInt((Math.random() * 5 + 5) * 1000) * 60;
ZQL_videosInfos[index].refreshTimeInterval = setInterval(() => {
handleRefresh(index);
}, ZQL_videosInfos[index].refreshTime);
})
.catch((err) => { });
if (ZQL_videosInfos[index].replayTimer) {
clearTimeout(ZQL_videosInfos[index].replayTimer);
}
ZQL_videosInfos[index].replayTimer = setTimeout(() => {
ZQL_multivideo.replayflv(srsrtc, cameraId, index);
}, 3000);
}
ZQL_videosInfos[index].srsrtc = srsrtc;
},
replayflv(srsrtc, cameraId, index) {
if (!ZQL_videosInfos[index]) {
return;
}
if (ZQL_videosInfos[index].playerState == "success") {
return;
} else {
srsrtc.unload();
srsrtc.load();
srsrtc
.play()
.then((res) => {
ZQL_multivideo.liveStopLoading(index);
ZQL_videosInfos[index].playerState = "success";
ZQL_videosInfos[index].loading = false;
if (ZQL_videosInfos[index].refreshTimeInterval) {
clearInterval(ZQL_videosInfos[index].refreshTimeInterval);
}
ZQL_videosInfos[index].refreshTime =
parseInt((Math.random() * 5 + 5) * 1000) * 60;
ZQL_videosInfos[index].refreshTimeInterval = setInterval(() => {
ZQL_multivideo.handleRefresh(index);
}, ZQL_videosInfos[index].refreshTime);
})
.catch((err) => {
// this.destoryVideoByIndex(index);
// this.subscribeLive(cameraId, index);
});
if (ZQL_videosInfos[index].replayTimer) {
clearTimeout(ZQL_videosInfos[index].replayTimer);
}
ZQL_videosInfos[index].replayTimer = setTimeout(() => {
ZQL_multivideo.replayflv(srsrtc, cameraId, index);
}, 3000);
}
},
reSubcribe(cameraId, index) {
if (ZQL_videosInfos[index].subscribeTimeout) {
clearTimeout(ZQL_videosInfos[index].subscribeTimeout);
ZQL_videosInfos[index].subscribeTimeout = null;
}
ZQL_multivideo.videosInfos[index].subscribeTimeout = setTimeout(() => {
ZQL_multivideo.subscribeLive(cameraId, index);
}, 1000);
},
getCameraSize(id, index) {
ZQL_multivideo.setOrisize(
ZQL_sources[id].draw_size[0],
ZQL_sources[id].draw_size[1],
index, id
);
},
setOrisize(width, height, index, id) {
let container = document.querySelector(".video-box");
if (!container) {
return;
}
if (!ZQL_videosInfos[index]) {
let alg = null;
if (sessionStorage.getItem("curalgs")) {
let cameraId = ZQL_playingSource[index];
let curalgs = JSON.parse(sessionStorage.getItem("curalgs"));
alg = curalgs[cameraId]
? JSON.parse(JSON.stringify(curalgs[cameraId]))
: null;
}
ZQL_videosInfos[index] = {
id: id,
loading: true,
openWs: true,
alg: alg,
algListShow: false,
subscribeTimeout: null,
refreshTimeInterval: null, // 定时刷新定时器
refreshTime: null, // 定时刷新时间
replayTimer: null,
playerState: "pending",
detectInterval: null,
quanping: false,
srsrtc: null,
stream: "",
status: "",
stream_code: "",
};
}
if (ZQL_videosInfos[index]) {
let oriWidth = width;
let oriHeight = height;
ZQL_videosInfos[index].oriWidth = oriWidth;
ZQL_videosInfos[index].oriHeight = oriHeight;
if (
oriWidth / container.offsetWidth >
oriHeight / container.offsetHeight
) {
ZQL_videosInfos[index].actualHeight = container.offsetWidth / (oriWidth / oriHeight)
ZQL_videosInfos[index].actualWidth = container.offsetWidth;
} else {
ZQL_videosInfos[index].actualHeight = container.offsetHeight
ZQL_videosInfos[index].actualWidth = container.offsetHeight * (oriWidth / oriHeight)
}
// videoWidth = ZQL_videosInfos[index].actualWidth;
ZQL_multivideo.setPosition(index);
}
},
setPosition(index) {
let container = document.querySelector(".video-box");
let video = document.querySelector("#video" + index);
let canvas = document.getElementById("canvas" + index);
let width = ZQL_videosInfos[index].actualWidth, height = ZQL_videosInfos[index].actualHeight;
video.style.position = "absolute";
video.style.width = width + "px";
video.style.height = height + "px";
canvas.width = width;
canvas.height = height;
if (width / container.offsetWidth < height / container.offsetHeight) {
let left = (container.offsetWidth - width) / 2;
video.style.left = Math.floor(left) + "px";
video.style.top = 0 + "px";
canvas.style.left = Math.floor(left) + "px";
canvas.style.top = "0px";
} else {
let top = (container.offsetHeight - height) / 2;
video.style.top = Math.floor(top) + "px";
video.style.left = 0 + "px";
canvas.style.top = Math.floor(top) + "px";
canvas.style.left = "0px";
}
},
setAlarms: (data, index) => {
ZQL_multivideo.clearCanvas(index);
if (ZQL_videosInfos[index] && !ZQL_videosInfos[index].canvas) {
ZQL_videosInfos[index].canvas = document.getElementById("canvas" + index)
}
if (
!ZQL_videosInfos[index] ||
!ZQL_videosInfos[index].actualWidth ||
!ZQL_videosInfos[index].actualHeight ||
!ZQL_videosInfos[index].oriWidth ||
!ZQL_videosInfos[index].oriHeight
) {
return;
}
// let bbox = data.result.data.bbox;
let bbox = data.bbox;
if (Object.values(bbox.polygons).length > 0) {
Object.values(bbox.polygons).forEach((item) => {
let color = JSON.parse(JSON.stringify(item.color)).reverse();
// let color = item.color;
let points = item.polygon.map((point) => {
return [
Math.round(
(point[0] * ZQL_videosInfos[index].actualWidth) /
ZQL_videosInfos[index].oriWidth
),
Math.round(
(point[1] * ZQL_videosInfos[index].actualHeight) /
ZQL_videosInfos[index].oriHeight
),
];
});
let context = ZQL_videosInfos[index].canvas.getContext("2d");
context.font = "20px Arial bolder";
context.fillStyle = "transparent";
context.strokeStyle = "rgb(" + color.join(",") + ")";
context.lineWidth = 2;
ZQL_multivideo.drawPolygons(points, context);
ZQL_multivideo.drawPolygonInfo(context, Object.values(bbox.polygons), index);
});
}
if (bbox.rectangles.length > 0) {
bbox.rectangles.forEach((item, i) => {
let color = JSON.parse(JSON.stringify(item.color)).reverse();
let coordinates = {
x: Math.round(
(item.xyxy[0] * ZQL_videosInfos[index].actualWidth) /
ZQL_videosInfos[index].oriWidth
),
y: Math.round(
(item.xyxy[1] * ZQL_videosInfos[index].actualHeight) /
ZQL_videosInfos[index].oriHeight
),
x1: Math.round(
(item.xyxy[2] * ZQL_videosInfos[index].actualWidth) /
ZQL_videosInfos[index].oriWidth
),
y1: Math.round(
(item.xyxy[3] * ZQL_videosInfos[index].actualHeight) /
ZQL_videosInfos[index].oriHeight
),
};
let context = ZQL_videosInfos[index].canvas.getContext("2d");
context.font = "20px Arial bolder";
context.fillStyle = "rgb(" + color.join(",") + ")";
context.fillText(item.label || "", coordinates.x, coordinates.y - 10);
context.strokeStyle = "rgb(" + color.join(",") + ")";
context.lineWidth = 2;
// context.strokeRect(
// coordinates.x,
// coordinates.y,
// coordinates.x1 - coordinates.x,
// coordinates.y1 - coordinates.y
// );
let lines = [];
let lineWidth = (coordinates.x1 - coordinates.x) / 4;
let lineHeight = (coordinates.y1 - coordinates.y) / 4;
lines[0] = {
x: coordinates.x,
y: coordinates.y,
x1: coordinates.x + lineWidth,
y1: coordinates.y,
};
lines[1] = {
x: coordinates.x,
y: coordinates.y,
x1: coordinates.x,
y1: coordinates.y + lineHeight,
};
lines[2] = {
x: coordinates.x1,
y: coordinates.y,
x1: coordinates.x1 - lineWidth,
y1: coordinates.y,
};
lines[3] = {
x: coordinates.x1,
y: coordinates.y,
x1: coordinates.x1,
y1: coordinates.y + lineHeight,
};
lines[4] = {
x: coordinates.x,
y: coordinates.y1,
x1: coordinates.x + lineWidth,
y1: coordinates.y1,
};
lines[5] = {
x: coordinates.x,
y: coordinates.y1,
x1: coordinates.x,
y1: coordinates.y1 - lineHeight,
};
lines[6] = {
x: coordinates.x1,
y: coordinates.y1,
x1: coordinates.x1 - lineWidth,
y1: coordinates.y1,
};
lines[7] = {
x: coordinates.x1,
y: coordinates.y1,
x1: coordinates.x1,
y1: coordinates.y1 - lineHeight,
};
lines.forEach((item) => {
ZQL_multivideo.drawLine(context, item);
});
});
}
if (Object.values(bbox.lines).length > 0) {
Object.values(bbox.lines).forEach((item, i) => {
let color = JSON.parse(JSON.stringify(item.color)).reverse();
let coordinates = {
x: Math.round(
(item.line[0][0] * ZQL_videosInfos[index].actualWidth) /
ZQL_videosInfos[index].oriWidth
),
y: Math.round(
(item.line[0][1] * ZQL_videosInfos[index].actualHeight) /
ZQL_videosInfos[index].oriHeight
),
x1: Math.round(
(item.line[1][0] * ZQL_videosInfos[index].actualWidth) /
ZQL_videosInfos[index].oriWidth
),
y1: Math.round(
(item.line[1][1] * ZQL_videosInfos[index].actualHeight) /
ZQL_videosInfos[index].oriHeight
),
};
let context = ZQL_videosInfos[index].canvas.getContext("2d");
context.font = "20px Arial bolder";
context.fillStyle = "rgb(" + color.join(",") + ")";
if (item.ext.direction) {
context.fillText(item.name, (coordinates.x + coordinates.x1) / 2, (coordinates.y + coordinates.y1) / 2 + 20);
}
context.strokeStyle = "rgb(" + color.join(",") + ")";
context.lineWidth = 2;
ZQL_multivideo.drawLine(context, coordinates);
ZQL_multivideo.drawCountingInfo(context, Object.values(bbox.lines));
});
}
},
drawPolygons(points, context) {
context.beginPath();
context.moveTo(points[0][0], points[0][1]);
for (var i = 1; i < points.length; i++) {
context.lineTo(points[i][0], points[i][1]);
}
context.closePath();
context.fill();
context.stroke();
},
drawLine(ctx, line) {
ctx.beginPath();
ctx.moveTo(line.x, line.y);
ctx.lineTo(line.x1, line.y1);
ctx.stroke();
},
drawCountingInfo(context, lines) {
lines.forEach((item, index) => {
context.fillStyle = "rgb(255,0,0)";
if (item.ext.direction.length == 2) {
context.fillText(`[${item.name}] ${item.ext.action.count}: ${item.ext.result.count}`, 0, 20 * index + 20);
} else {
context.fillText(`[${item.name}] ${item.ext.action.increase}: ${item.ext.result.increase},${item.ext.action.decrease}: ${item.ext.result.decrease},${item.ext.action.delta}: ${item.ext.result.delta}`, 0, 20 * index + 20);
}
});
},
drawPolygonInfo(context, polygons, videoindex) {
polygons.forEach((item, index) => {
context.fillStyle =
"rgb(" +
JSON.parse(JSON.stringify(item.color)).reverse().join(",") +
")";
let leftPoint = item.polygon[0];
for (let i = 1; i < item.polygon.length; i++) {
if (item.polygon[i][0] < leftPoint[0]) {
leftPoint = item.polygon[i];
}
}
context.fillText(
`${item.name}`,
(leftPoint[0] * ZQL_videosInfos[videoindex].actualWidth) /
ZQL_videosInfos[videoindex].oriWidth,
(leftPoint[1] * ZQL_videosInfos[videoindex].actualHeight) /
ZQL_videosInfos[videoindex].oriHeight + 20
);
if (item.ext.result) {
context.fillStyle = "rgb(255,0,0)";
context.fillText(`${item.name}: ${item.ext.result}`, 0, 20 * index + 20);
}
});
},
destroyVideo(videonum) {
for (let i = 0; i < videonum; i++) {
ZQL_multivideo.destoryVideoByIndex(i);
}
},
destoryVideoByIndex(index) {
ZQL_multivideo.clearCanvas(index);
if (ZQL_videosInfos[index]) {
if (
ZQL_videosInfos[index] &&
ZQL_videosInfos[index].subscribeTimeout
) {
clearTimeout(ZQL_videosInfos[index].subscribeTimeout);
ZQL_videosInfos[index].subscribeTimeout = null;
}
if (ZQL_videosInfos[index] && ZQL_videosInfos[index].replayTimer) {
clearTimeout(ZQL_videosInfos[index].replayTimer);
ZQL_videosInfos[index].replayTimer = null;
}
if (ZQL_videosInfos[index].refreshTimeInterval) {
clearInterval(ZQL_videosInfos[index].refreshTimeInterval);
ZQL_videosInfos[index].refreshTimeInterval = null;
}
let video = document.getElementById("video" + index);
video && (video.srcObject = null);
ZQL_videosInfos[index].srsrtc &&
ZQL_videosInfos[index].srsrtc.destroy();
ZQL_multivideo.clearCanvas(index);
ZQL_videosInfos[index] = null;
}
},
clearCanvas(index) {
let canvas = document.getElementById("canvas" + index);
if (canvas && canvas.getContext("2d")) {
canvas
.getContext("2d")
.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
}
},
connectMqtt() {
let mqttclient = mqtt.connect(`ws://${ZQLGLOBAL.serverIp}:${ZQLGLOBAL.websocket}/mqtt`);
mqttclient.subscribe(
ZQLGLOBAL.resultTopic,
{ qos: 0 },
(error) => {
if (error) {
console.log("subscribe error:", error);
return;
}
}
);
mqttclient.subscribe(
ZQLGLOBAL.streamCodeTopic,
{ qos: 0 },
(error) => {
if (error) {
console.log("subscribe error:", error);
return;
}
}
);
mqttclient.on("message", (topic, payload) => {
let msg = JSON.parse(payload.toString());
if (msg.msg_type == "result") {
let id = msg.data.source.id;
for (let i = 0; i < 4; i++) {
if (ZQL_videosInfos[i]) {
let alg =
ZQL_videosInfos[i].alg && ZQL_videosInfos[i].alg.algname;
if (
id == ZQL_playingSource[i] &&
msg.data.alg.name == ZQL_videosInfos[i].alg
) {
ZQL_multivideo.setAlarms(msg.data.reserved_data, i);
if (
ZQL_videosInfos[i] &&
ZQL_videosInfos[i].canvasTimeout
) {
clearTimeout(ZQL_videosInfos[i].canvasTimeout);
}
ZQL_videosInfos[i].canvasTimeout = setTimeout(() => {
ZQL_multivideo.clearCanvas(i);
}, 1000);
break;
}
}
}
}
if (msg.msg_type == "stream_code") {
let cameraId = msg.data.source_id;
for (let i = 0; i < ZQL_playingSource.videoNum; i++) {
if (cameraId == ZQL_playingSource[i] && ZQL_videosInfos[i]) {
if (!ZQL_videosInfos[i].stream_code) {
ZQL_videosInfos[i].stream_code = msg.data.stream_code;
} else if (
msg.data.stream_code != ZQL_videosInfos[i].stream_code
) {
ZQL_videosInfos[i].stream_code = msg.data.stream_code;
ZQL_multivideo.handleRefresh(i);
}
break;
}
}
}
});
}
}
const ZQL_apis = {
getSources: () => {
return new Promise((resolve, reject) => {
$.ajax({
type: "GET",
dataType: "json",
url: `http://${ZQLGLOBAL.serverIp}${ZQLGLOBAL.getSources}`,
success: function (res) {
resolve(res)
},
error: function (err) {
reject(err)
}
});
})
},
subscribeLive: (source_id) => {
return new Promise((resolve, reject) => {
$.ajax({
type: "GET",
dataType: "json",
url: `http://${ZQLGLOBAL.serverIp}${ZQLGLOBAL.subscribe}?source_id=${source_id}`,
success: function (res) {
resolve(res)
},
error: function (err) {
reject(err)
}
});
})
},
sysArgs: () => {
return new Promise((resolve, reject) => {
$.ajax({
type: "GET",
dataType: "json",
url: `http://${ZQLGLOBAL.serverIp}${ZQLGLOBAL.tunnel}`,
success: function (tunnel) {
if (tunnel.data.enable == false) {
$.ajax({
type: "GET",
dataType: "json",
url: `http://${ZQLGLOBAL.serverIp}${ZQLGLOBAL.sysArgs}`,
success: function (res) {
resolve(res.data.map.local)
},
error: function (err) {
reject(err)
}
});
} else {
resolve({
"srs_server": tunnel.data.srs_server,
"srs_http_api": tunnel.data.srs_http_api,
"srs_http_server": tunnel.data.srs_http_server,
"websocket": tunnel.data.websocket
})
}
},
error: function (err) {
reject(err)
}
});
})
},
detectStream: () => {
return new Promise((resolve, reject) => {
$.ajax({
type: "GET",
dataType: "json",
url: `http://${ZQLGLOBAL.serverIp}:${ZQLGLOBAL.srs_http_api}/api/v1/streams?start=0&count=10000`,
success: function (res) {
resolve(res)
},
error: function (err) {
reject(err)
}
});
})
},
detectVideo: (device_id, stream) => {
return new Promise((resolve, reject) => {
$.ajax({
type: "GET",
dataType: "json",
url: `http://${ZQLGLOBAL.serverIp}${ZQLGLOBAL.detect}?device_id=${device_id}&stream=${stream}&draw_size=1280`,
success: function (res) {
if (res.error == 0) {
resolve({ status: 1 })
} else {
resolve({ status: 0 })
}
},
error: function (err) {
reject(err)
}
});
})
},
gettoken: () => {
var ak = ZQLGLOBAL.accessKey;
var sk = ZQLGLOBAL.accessSecret;
var timestamp = parseInt(new Date().getTime() / 1000);
var nonce = ZQL_apis.generateRandomString(10);
let signature = ZQL_apis.generateSignature(ak, sk, timestamp, nonce)
return new Promise((resolve, reject) => {
$.ajax({
type: "GET",
dataType: "json",
url: `http://${ZQLGLOBAL.serverIp}${ZQLGLOBAL.getToken}?signature=${signature}&ak=${ak}×tamp=${timestamp}&nonce=${nonce}`,
success: function (res) {
resolve(res)
},
error: function (err) {
reject(err)
}
});
})
},
generateSignature: (ak, sk, timestamp, nonce) => {
var message = `${ak}:${timestamp}:${nonce}`;
var hash = CryptoJS.HmacSHA256(message, sk);
var signature = CryptoJS.enc.Hex.stringify(hash);
return signature
},
generateRandomString(length) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
}
function init() {
// 设置文档结构
ZQL_multivideo.setVideoEl();
// 设置事件监听
// document.querySelector("#icon-oneviveo").addEventListener('click', () => {
// playingSource.videoNum = 1;
// setVideoEl();
// })
// document.querySelector("#icon-fourviveo").addEventListener('click', () => {
// playingSource.videoNum = 4;
// ZQL_multivideo.setVideoEl();
// })
// 1. 获取摄像头列表
Promise.all([ZQL_apis.getSources()]).then(res => {
let cameras = res[0].data.map(item => {
item.sourceId = item.id;
item.title = item.desc;
item.type = 'source';
item.checked = false;
ZQL_sources[item.id] = item
return item
});
layui.use(function () {
var tree = layui.tree;
var layer = layui.layer;
tree.render({
elem: '#ZQL_source_tree',
data: cameras,
// showCheckbox:true,
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
click: function (obj) {
if (obj.data.sourceId) {
let key = obj.data.sourceId;
if (ZQL_sources[key].checked == false) {
ZQL_sources[key].checked = true
if (ZQL_playingSource.videoNum == 1) {
ZQL_playingSource[0] = key;
ZQL_multivideo.subscribeLive(key, 0);
ZQL_multivideo.setAlgList(0);
} else {
for (let i = 0; i < 4; i++) {
if (!ZQL_playingSource[i]) {
ZQL_playingSource[i] = key;
ZQL_multivideo.subscribeLive(key, i);
ZQL_multivideo.setAlgList(i)
break;
}
}
}
} else {
ZQL_sources[key].checked = false
if (ZQL_playingSource.videoNum == 1) {
ZQL_playingSource[0] = null;
ZQL_multivideo.destoryVideoByIndex(0);
ZQL_multivideo.clearAlgList(0);
ZQL_multivideo.liveStopLoading(0);
} else {
for (let i = 0; i < 4; i++) {
if (ZQL_playingSource[i] == key) {
ZQL_playingSource[i] = null;
ZQL_multivideo.destoryVideoByIndex(i);
ZQL_multivideo.clearAlgList(i)
ZQL_multivideo.liveStopLoading(i);
}
}
}
}
}
}
});
});
}).catch(err => {
console.log(err)
})
// 获取系统参数，连接mqtt,通过mqtt获取实时检测结果和视频流状态码
ZQL_apis.sysArgs().then(res => {
ZQLGLOBAL = Object.assign(ZQLGLOBAL, res)
ZQL_multivideo.connectMqtt()
}).catch(err => { })
}