|
|
@@ -13,13 +13,22 @@
|
|
|
v-show="!takeOver"
|
|
|
id="video"
|
|
|
ref="videoEl"
|
|
|
+ style="width: 500px; height: 500px"
|
|
|
+ width="500"
|
|
|
+ height="500"
|
|
|
class="camera"
|
|
|
preload
|
|
|
autoplay
|
|
|
loop
|
|
|
muted
|
|
|
/>
|
|
|
- <canvas id="canvas" width="320" height="240"></canvas>
|
|
|
+ <canvas
|
|
|
+ v-show="false"
|
|
|
+ id="canvas"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ width="280"
|
|
|
+ height="280"
|
|
|
+ ></canvas>
|
|
|
<!-- 识别成功的动图 -->
|
|
|
<canvas
|
|
|
v-if="!takeOver && !first"
|
|
|
@@ -51,7 +60,7 @@
|
|
|
|
|
|
<script setup>
|
|
|
import TopLogoVue from "../../components/TopLogo/TopLogo.vue";
|
|
|
-import { ref, onMounted } from "vue";
|
|
|
+import { ref, onMounted ,onBeforeUnmount} from "vue";
|
|
|
import { PAGInit } from "libpag";
|
|
|
import axios from "axios";
|
|
|
import { useRouter } from "vue-router";
|
|
|
@@ -86,37 +95,43 @@ let backTimer = null; // 返回计时器
|
|
|
const canUpload = ref(true); // 是否可以上传
|
|
|
let tracker;
|
|
|
|
|
|
-// ------------------- NVR 相关配置 -------------------
|
|
|
+// ------------------- NVR 相关配置 -------------------
|
|
|
const NVRInit = () => {
|
|
|
let options = {
|
|
|
wsURL: "ws://" + "192.168.101.108" + ":" + "80" + "/rtspoverwebsocket",
|
|
|
rtspURL:
|
|
|
- "rtsp://" +
|
|
|
- "192.168.101.108"+":" +
|
|
|
- "80" +
|
|
|
- "/cam/realmonitor?channel=" +
|
|
|
- 1 +
|
|
|
- "&subtype=" +
|
|
|
- 0 +
|
|
|
- "&proto=Private3",
|
|
|
+ "rtsp://" +
|
|
|
+ "192.168.101.108" +
|
|
|
+ ":" +
|
|
|
+ "80" +
|
|
|
+ "/cam/realmonitor?channel=" +
|
|
|
+ 1 +
|
|
|
+ "&subtype=" +
|
|
|
+ 0 +
|
|
|
+ "&proto=Private3",
|
|
|
username: "admin",
|
|
|
password: "admin123",
|
|
|
};
|
|
|
let videoObj = document.getElementById("video");
|
|
|
let canvasObj = document.getElementById("canvas");
|
|
|
const player = new PlayerControl(options);
|
|
|
- console.log(player, "player");
|
|
|
+ // console.log(player, "player");
|
|
|
player.on("WorkerReady", function () {
|
|
|
//当文件准备完成后，开始拉流。
|
|
|
player.connect();
|
|
|
+ setTimeout(() => {
|
|
|
+ init();
|
|
|
+ }, 1000);
|
|
|
});
|
|
|
- player.init(videoObj, canvasObj); // 初始化播放器
|
|
|
+ // player.on("DecodeStart", (rs) => {
|
|
|
+ // console.log(rs, "rs");
|
|
|
+ // });
|
|
|
+ player.init(canvasObj, videoObj); // 初始化播放器
|
|
|
// RPC.login('admin', 'admin123', false).then((res)=>{
|
|
|
// console.log(res,'res');
|
|
|
// })
|
|
|
};
|
|
|
|
|
|
-
|
|
|
//-----------------------------------------------
|
|
|
// 检查摄像头并设置视频流
|
|
|
// async function checkCamera() {
|
|
|
@@ -151,44 +166,22 @@ const NVRInit = () => {
|
|
|
|
|
|
// 拍摄函数，截取摄像头当前帧并显示在页面上
|
|
|
function shoot() {
|
|
|
- // console.log(111);
|
|
|
- // 上锁避免重复发送请求
|
|
|
- // uploadLock.value = false;
|
|
|
- // // 检查视频元素和页面容器是否存在
|
|
|
- // if (!videoEl.value || !wrapper.value) return;
|
|
|
- // takeOver.value = true;
|
|
|
+ // console.log('shoot',shoot);
|
|
|
+ const canvas = document.createElement("canvas");
|
|
|
first.value = false;
|
|
|
- // // 创建一个画布元素，设置画布尺寸为视频流的尺寸
|
|
|
- // const canvas = document.createElement("canvas");
|
|
|
- // console.log(canvas, "canvas");
|
|
|
- // canvas.width = videoEl.value.videoWidth;
|
|
|
- // canvas.height = videoEl.value.videoHeight;
|
|
|
+ // console.log(canvas, "canvas");
|
|
|
+ canvas.width = videoEl.value.videoWidth;
|
|
|
+ canvas.height = videoEl.value.videoHeight;
|
|
|
|
|
|
// // 获取画布上下文对象
|
|
|
- // const ctx = canvas.getContext("2d");
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
|
|
|
// // 绘制当前视频帧到画布上
|
|
|
- // ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
|
|
|
- // // console.log(222);
|
|
|
-
|
|
|
+ ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
|
|
|
// 将画布内容转为 Base64 数据
|
|
|
const imageDataUrl = canvas.toDataURL("image/png");
|
|
|
- // console.log(333);
|
|
|
-
|
|
|
- // // 存储图片路径
|
|
|
- // imageUrl.value = imageDataUrl;
|
|
|
- // // console.log(imageDataUrl, "imageDataUrl");
|
|
|
-
|
|
|
- // // 创建一个图片元素
|
|
|
- // const imageElement = new Image();
|
|
|
- // imageElement.style.borderRadius = "50%";
|
|
|
-
|
|
|
- // // 将 Base64 数据设置为图片的 src 属性
|
|
|
- // imageElement.src = imageDataUrl;
|
|
|
+ // console.log('imageDataUrl:',imageDataUrl);
|
|
|
|
|
|
- // // 将图片元素添加到页面容器中
|
|
|
- // wrapper.value.appendChild(imageElement);
|
|
|
- // console.log(444);
|
|
|
timer = setInterval(() => {
|
|
|
if (loadingNum.value <= 16) {
|
|
|
loadingNum.value += 1;
|
|
|
@@ -198,31 +191,13 @@ function shoot() {
|
|
|
// console.log(loadingNum.value, "loadingNum");
|
|
|
}, 500);
|
|
|
uploadImgFn(imageDataUrl);
|
|
|
- // setTimeout(() => {
|
|
|
- // clearInterval(timer);
|
|
|
- // takeOver.value = false;
|
|
|
- // noface.value = true;
|
|
|
- // successInit();
|
|
|
- // }, 4000);
|
|
|
}
|
|
|
-// 关闭错误提示
|
|
|
+// 未识别到人脸，重新识别
|
|
|
const errfn = () => {
|
|
|
// console.log(errNum.value, "errNum");
|
|
|
loadingNum.value = ref(0);
|
|
|
- // errNum.value += 1;
|
|
|
- takeOver.value = false;
|
|
|
- // first.value = true;
|
|
|
uploadLock.value = true;
|
|
|
- // var box = document.querySelectorAll("img")[1];
|
|
|
- // // console.log(box, "box");
|
|
|
-
|
|
|
- // box?.remove();
|
|
|
- // console.log(mediaStreamTrack.srcObject, "mediaStreamTrack");
|
|
|
- // console.log(trackerTask, "trackerTask");
|
|
|
- // mediaStreamTrack.srcObject.getTracks()[0].stop();
|
|
|
- // trackerTask.stop();
|
|
|
- // checkCamera();
|
|
|
- init();
|
|
|
+ // init();
|
|
|
};
|
|
|
// 初始化 PAG
|
|
|
const pagInit = () => {
|
|
|
@@ -277,8 +252,10 @@ const successInit = () => {
|
|
|
// tracjking初始化
|
|
|
const init = () => {
|
|
|
// 识别失败一直识别 失败提示字体闪烁，30s未识别到人脸就返回主页
|
|
|
- video.value = mediaStreamTrack = document.getElementById("video");
|
|
|
- screenshotCanvas.value = document.getElementById("screenshotCanvas");
|
|
|
+ if(!video.value || !screenshotCanvas.value){
|
|
|
+ video.value = mediaStreamTrack = document.getElementById("video");
|
|
|
+ screenshotCanvas.value = document.getElementById("screenshotCanvas");
|
|
|
+ }
|
|
|
|
|
|
let canvas = document.getElementById("canvas");
|
|
|
let context = canvas.getContext("2d");
|
|
|
@@ -292,25 +269,18 @@ const init = () => {
|
|
|
tracker.setEdgesDensity(0.1);
|
|
|
// console.log("tracker", tracker);
|
|
|
trackerTask = window.tracking.track("#video", tracker, {
|
|
|
- camera: true,
|
|
|
+ camera: false,
|
|
|
});
|
|
|
}
|
|
|
- // // 固定写法
|
|
|
- // let tracker = new window.tracking.ObjectTracker("face");
|
|
|
- // // console.log(tracker, "tracker");
|
|
|
- // tracker.setInitialScale(4);
|
|
|
- // tracker.setStepSize(2);
|
|
|
- // tracker.setEdgesDensity(0.1);
|
|
|
- // // console.log("tracker", tracker);
|
|
|
- // trackerTask = window.tracking.track("#video", tracker, {
|
|
|
- // camera: true,
|
|
|
- // });
|
|
|
- // console.log(666);
|
|
|
tracker.on("track", function (event) {
|
|
|
+ // console.log("track");
|
|
|
// 检测出人脸 绘画人脸位置
|
|
|
- setTimeout(() => {
|
|
|
- context.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- // console.log(666);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // console.log("event", event);
|
|
|
+ context.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
+ // console.log(666);
|
|
|
+ if (event.data.length) {
|
|
|
+ // 区域内有人脸
|
|
|
event.data.forEach(function (rect) {
|
|
|
context.strokeStyle = "#0764B7";
|
|
|
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
|
|
|
@@ -318,7 +288,10 @@ const init = () => {
|
|
|
// 上传图片
|
|
|
uploadLock.value && shoot();
|
|
|
});
|
|
|
- }, 1000);
|
|
|
+ } else {
|
|
|
+ //没有人脸重新开始识别
|
|
|
+ }
|
|
|
+ // }, 1000);
|
|
|
});
|
|
|
};
|
|
|
//调接口把图片传到后端
|
|
|
@@ -339,9 +312,11 @@ const uploadImgFn = (imageDataUrl) => {
|
|
|
// console.log(response.data);
|
|
|
if (response.data.code === 200) {
|
|
|
// 识别成功 进入扫描入口
|
|
|
- clearInterval(timer);
|
|
|
+ clearInterval(timer); // 清除定时器
|
|
|
clearTimeout(backTimer);
|
|
|
+ canUpload.value = false; ///不再掉接口
|
|
|
takeOver.value = false;
|
|
|
+ lose.value = false;
|
|
|
successInit();
|
|
|
} else {
|
|
|
// console.log("lose");
|
|
|
@@ -360,17 +335,16 @@ const uploadImgFn = (imageDataUrl) => {
|
|
|
|
|
|
// 在组件挂载后执行检查摄像头的操作
|
|
|
onMounted(() => {
|
|
|
- // checkCamera();
|
|
|
- // setTimeout(() => {
|
|
|
- // shoot();
|
|
|
- // }, 3000);
|
|
|
pagInit();
|
|
|
- init();
|
|
|
NVRInit();
|
|
|
- backTimer = setTimeout(() => {
|
|
|
- router.push("/");
|
|
|
- }, 30000);
|
|
|
+ // backTimer = setTimeout(() => {
|
|
|
+ // router.push("/");
|
|
|
+ // }, 30000);
|
|
|
});
|
|
|
+onBeforeUnmount(()=>{
|
|
|
+ clearInterval()
|
|
|
+ clearTimeout()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -417,6 +391,7 @@ onMounted(() => {
|
|
|
width: 280px;
|
|
|
height: 280px;
|
|
|
border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
.bgcBox {
|
|
|
width: 450px;
|
|
|
@@ -482,6 +457,19 @@ onMounted(() => {
|
|
|
-ms-animation: blink 2s linear infinite;
|
|
|
-o-animation: blink 2s linear infinite;
|
|
|
}
|
|
|
+#video {
|
|
|
+ width: 500px;
|
|
|
+ height: 500px;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ left: -110px;
|
|
|
+ top: -110px;
|
|
|
+}
|
|
|
+#canvas {
|
|
|
+ width: 280px;
|
|
|
+ height: 280px;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
@keyframes blink {
|
|
|
0% {
|
|
|
opacity: 1;
|
liuqiang
