<template>
|
<teleport to="body">
|
<div class="mask">
|
<el-header class="go">
|
<div>
|
请把头移动到摄像头能拍到的位置，不要动 ！
|
</div>
|
<div class="box">
|
<video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
|
<canvas id="canvasCamera" class="canvas" :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>
|
</el-header>
|
</div>
|
</teleport>
|
</template>
|
<script lang="ts" setup>
|
import { ref, reactive, inject, toRefs, nextTick } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
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) {
|
thisVideo.play();
|
};
|
})
|
.catch((err) => {
|
ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
|
});
|
});
|
};
|
|
//绘制图片
|
const drawImage = () => {
|
getCompetence();
|
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 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 stopNavigator = () => {
|
// thisVideo = document.getElementById("videoCamera");
|
if (closedPhono.value && closedPhono.value !== null) {
|
thisVideo.srcObject.getTracks()[0].stop();
|
os.value = true;
|
} else {
|
ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
|
}
|
};
|
defineExpose({
|
stopNavigator,
|
});
|
</script>
|
<style scoped>
|
.footer {
|
width: 959px;
|
height: 50px;
|
background-color: white;
|
justify-content: space-between;
|
float: left;
|
margin-top: 217px;
|
z-index: 1999;
|
}
|
|
|
.mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
background-color: rgba(0, 0, 0, 0.5);
|
z-index: 999;
|
}
|
.closeBtn {
|
float: right;
|
}
|
.box {
|
width: 959px;
|
height: 700px;
|
margin-top: 10px;
|
background-color: rgba(0, 0, 0, 0.5);
|
/* float: left !important; */
|
padding-top: 100px;
|
text-align: center;
|
}
|
.go {
|
width: 1000px;
|
height: 800px;
|
background-color: white;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
display: inline-block;
|
}
|
|
</style>
|
