920 lines
30 KiB
JavaScript
920 lines
30 KiB
JavaScript
|
||
const ZQL_multivideo = {
|
||
setVideoEl: () => {
|
||
let videoContainer = document.querySelector("#video-container");
|
||
if (ZQL_playingSource.videoNum == 1) {
|
||
videoContainer.className = "one-video";
|
||
videoContainer.innerHTML = `
|
||
<div class="video-box">
|
||
<div class="tips" id="tip0">
|
||
<div class="icon-dot"></div>
|
||
<div class="deviceoffline">
|
||
<i class="z-icon-jiankonglixian" style="font-size: 40rem"></i>
|
||
<span>离线</span>
|
||
</div>
|
||
</div>
|
||
<div class="title-container" id="video-title0"></div>
|
||
<video ref="video" muted id="video0" class="video-js" autoplay="autoplay" preload="auto"></video>
|
||
<canvas class="canvas-shuju" id="canvas0"></canvas>
|
||
</div>
|
||
`
|
||
} else {
|
||
videoContainer.className = "four-video";
|
||
videoContainer.innerHTML = `
|
||
<div class="video-box">
|
||
<div class="tips" id="tip0">
|
||
|
||
</div>
|
||
<div class="title-container" id="video-title0"></div>
|
||
<video ref="video" muted id="video0" class="video-js" autoplay="autoplay" preload="auto"></video>
|
||
<canvas class="canvas-shuju" id="canvas0"></canvas>
|
||
</div>
|
||
<div class="video-box">
|
||
<div class="tips" id="tip1">
|
||
|
||
</div>
|
||
<div class="title-container" id="video-title1"></div>
|
||
<video ref="video" muted id="video1" class="video-js" autoplay="autoplay" preload="auto"></video>
|
||
<canvas class="canvas-shuju" id="canvas1"></canvas>
|
||
</div>
|
||
<div class="video-box">
|
||
<div class="tips" id="tip2">
|
||
|
||
</div>
|
||
<div class="title-container" id="video-title2"></div>
|
||
<video ref="video" muted id="video2" class="video-js" autoplay="autoplay" preload="auto"></video>
|
||
<canvas class="canvas-shuju" id="canvas2"></canvas>
|
||
</div>
|
||
<div class="video-box">
|
||
<div class="tips" id="tip3">
|
||
|
||
</div>
|
||
<div class="title-container" id="video-title3"></div>
|
||
<video ref="video" muted id="video3" class="video-js" autoplay="autoplay" preload="auto"></video>
|
||
<canvas class="canvas-shuju" id="canvas3"></canvas>
|
||
</div>
|
||
`
|
||
}
|
||
},
|
||
liveLoading: (index) => {
|
||
let tipel = document.querySelector("#tip" + index);
|
||
tipel.innerHTML = `<div class="icon-dot"></div>`
|
||
},
|
||
liveOffline: (index) => {
|
||
let tipel = document.querySelector("#tip" + index);
|
||
tipel.innerHTML = `
|
||
<div class="deviceoffline">
|
||
<i class="z-icon-jiankonglixian" style="font-size: 40rem"></i>
|
||
<span>离线</span>
|
||
</div>
|
||
`
|
||
},
|
||
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 = '<ul>';
|
||
for (let alg in algList) {
|
||
let name = algList[alg].reserved_args.ch_name;
|
||
algEl = algEl + `<li alg="${alg}" index="${index}">${name}</li>`
|
||
}
|
||
algEl = algEl + '</ul>'
|
||
el.innerHTML = `
|
||
<div class="camera">${ZQL_sources[ZQL_playingSource[index]].desc}</div>
|
||
<div class="alg">
|
||
<div class="algname">算法: ${ZQL_playingSource[index].alg ? ZQL_sources[ZQL_playingSource[index]].alg[alg].reserved_args.ch_name : ''}</div>
|
||
${algEl}
|
||
</div>
|
||
<div id="close${index}">关闭</div>
|
||
`;
|
||
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 => { })
|
||
} |