From bed99d5cea4963f31277c57d008a8205656a97c0 Mon Sep 17 00:00:00 2001
From: chenyincheng <501753378@qq.com>
Date: 星期六, 25 二月 2023 14:57:15 +0800
Subject: [PATCH] 45
---
src/views/login/index.vue | 189 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 189 insertions(+), 0 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..03ed1c8
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,189 @@
+<template>
+ <div class="mask">
+ <div class="go">
+ <div class="titleH" style="color: white;">
+ <h3>请把头移动到摄像头能拍到的位置，不要动 ！</h3>
+ </div>
+ <div class="box">
+ <video id="videoCamera" class="canvas1" :width="videoWidth" :height="videoHeight" autoPlay></video>
+ <br/>
+ <canvas id="canvasCamera" class="canvas2" :width="300" :height="300"></canvas>
+ </div>
+ <!-- <div class="footer">
+ <el-button @click="getCompetence" icon="el-icon-video-camera"> 打开摄像头 </el-button>
+ <el-button @click="drawImage" icon="el-icon-camera"> 拍照 </el-button>
+ <el-button @click="stopNavigator" icon="el-icon-switch-button"> 关闭摄像头 </el-button>
+ <el-button @click="resetCanvas" icon="el-icon-refresh"> 重置 </el-button>
+ </div> -->
+ </div>
+ </div>
+</template>
+<script lang="ts" setup>
+ import { ref, reactive, onMounted, toRefs, nextTick } from "vue";
+ import { ElMessage, ElMessageBox } from "element-plus";
+ import {sundSocket} from "@/samples/socketClient"
+ import { confingInfoStore } from '@/stores/StoresConfing'
+ const loading = ref(false);
+ const os = ref(false); //控制摄像头开关
+ let thisVideo = ref("");
+ let thisContext = ref("");
+ let thisCancas = ref("");
+ const videoWidth = ref(500);
+ const videoHeight = ref(500);
+ const postOptions = ref([]);
+ const certCtl = ref("");
+ const mask = ref(true);
+
+ //查询参数
+ const queryParams = reactive({
+ pageNum: 1,
+ pageSize: 10,
+ imgSrc: undefined,
+ });
+ const closedPhono = ref(null);
+
+ const emit = defineEmits(["closed"]);
+ const props = defineProps({
+ visible: { type: Boolean },
+ });
+ const { visible } = toRefs(props);
+ const handleChange = (val) => {
+ console.log(visible);
+ };
+
+ //调用摄像头权限
+ const getCompetence = () => {
+ nextTick(() => {
+ os.value = false;
+ thisCancas = document.getElementById("canvasCamera");
+ thisContext = thisCancas.getContext("2d");
+ thisVideo = document.getElementById("videoCamera");
+ closedPhono.value = thisVideo;
+ if (navigator.mediaDevices === undefined) {
+ navigator.mediaDevices = {};
+ }
+
+ if (navigator.mediaDevices.getUserMedia === undefined) {
+ navigator.mediaDevices.getUserMedia = function (constraints) {
+ // 首先获取现存的getUserMedia(如果存在)
+ let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
+ if (!getUserMedia) {
+ return Promise.reject(new Error("getUserMedia is not implemented in this browser"));
+ }
+ return new Promise(function (resolve, reject) {
+ getUserMedia.call(navigator, constraints, resolve, reject);
+ });
+ };
+ }
+
+ const constraints = {
+ audio: false,
+ video: { width: videoWidth.value, height: videoHeight.value, transform: "scaleX(-1)" },
+ };
+
+ navigator.mediaDevices
+ .getUserMedia(constraints)
+ .then(function (stream) {
+ if ("srcObject" in thisVideo) {
+ thisVideo.srcObject = stream;
+ } else {
+ thisVideo.src = window.URL.createObjectURL(stream);
+ }
+ thisVideo.onloadedmetadata = function (e) {
+ console.log('摄像头打开了')
+ SendTime()
+ thisVideo.play();
+ };
+ })
+ .catch((err) => {
+ ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
+ });
+ });
+ };
+
+ //绘制图片
+ const drawImage = () => {
+ thisCancas = document.getElementById("canvasCamera");
+ thisContext = thisCancas.getContext("2d");
+ thisVideo = document.getElementById("videoCamera");
+ thisContext.drawImage(thisVideo, 0, 0, 300, 300);
+ //获取图片地址
+ queryParams.imgSrc = thisCancas.toDataURL('image/png');
+ // console.log(queryParams.imgSrc);
+ const str=`<STX>{"photo":"${queryParams.imgSrc}"}<ETX>`
+ sundSocket(str)
+ };
+
+ //清空画布
+ const clearCanvas = (id) => {
+ let c = document.getElementById(id);
+ let cxt = c.getContext("2d");
+ cxt.clearRect(0, 0, 500, 500);
+
+ };
+
+ //重置画布
+ const resetCanvas = () => {
+ queryParams.imgSrc = "";
+ clearCanvas("canvasCamera");
+ };
+ const SendTime=()=>{
+ setInterval(drawImage,confingInfoStore().confingInfo.faceRecogDetectInterval*1000)
+ }
+
+ //关闭摄像头
+ const stopNavigator = () => {
+ // thisVideo = document.getElementById("videoCamera");
+ if (closedPhono.value && closedPhono.value !== null) {
+ thisVideo.srcObject.getTracks()[0].stop();
+ os.value = true;
+ } else {
+ ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
+ }
+ };
+ onMounted(()=>{
+ console.log('页面初始化读取配置文件',confingInfoStore().confingInfo)
+ getCompetence()
+ })
+ defineExpose({
+ stopNavigator,
+ });
+</script>
+<style scoped>
+ .footer {
+ height: 50px;
+ background-color: white;
+ justify-content: space-between;
+ float: left;
+ z-index: 1999;
+ }
+
+
+ .mask {
+ z-index: 999;
+ text-align: center;
+ }
+ .go {
+ width: 100%;
+ background-color:#409EFF;
+ text-align: center;
+ display: inline-block;
+ }
+ .box {
+ width: 100%;
+ text-align: center;
+
+ background-color: #d9ecff;
+ }
+ .canvas1{
+ margin-top: 100px;
+ border: 2px solid #409EFF;
+ border-radius: 10%;
+
+ }
+ .canvas2{
+ visibility:hidden;
+ }
+
+
+ </style>
\ No newline at end of file
--
Gitblit v1.8.0