用PHP写了一个WEB程序，其中有个功能，会员表要记录人脸信息，会员登录时可以直接扫脸登录
人脸搜索和人脸检测准备用百度的，已经研究明白
但前端如何用WEB调用PC上的摄像头，自动拍照生成图片，这块不知道如何实现
请给我一个思路就行
参考：
<template>
<div>
<div class="face_header">
<div class="face_header_con">
<p class="face_header_lf">{{ this.testInfo.examName }}</p>
<a class="face_header_rg" @click="logoutHandle">
<span class="headsp"><img src="@/assets/images/exit.png"/></span>
退出
</a>
<router-link to="/profile" class="face_header_rg">
<span class="headsp"><img src="../assets/images/icon-user.png"/></span
>{{ this.userInfo.userName }}
</router-link>
</div>
</div>
<div class="face_con">
<div class="face_content">
<div class="face_con_left">
<h1 class="face_con_tit">
开始检测摄像头
<p>
请调整好摄像头，确保摄像头能够正常显示，并采集到正脸的位置，点击下面按钮开始检测
</p>
<div class="face_con_tit">
<div class="face_yanzhen">
<span>
<video id="videoCamera" style="width:100%;height:100%"></video>
<canvas
id="canvasCamera"
width="100%"
style="display: none;"
></canvas>
<a
class="face_yanzhen_btn"
href="javascript:void(0);"
@click="setImage"
>我已调好，开始检测</a
>
</span>
</div>
</div>
<!-- <p class="yanzhen_con">
说明：<br />
如摄像头不能正常显示，请阅读右边的常见问题，或拨打以下电话：<br />
林老师13250289550、张老师18022368859、陈老师13267869678、柳老师15915910399
</p> -->
</h1>
</div>
<div class="face_con_right">
<h1 class="face_con_tit face_right_tit">常见问题:</h1>
<p style="margin-top:0px;">
1、不支持IE浏览器，建议使用火狐、谷歌、Edge浏览器进行考试
</p>
<p>2、若浏览器弹出是否允许调用摄像头，请点击允许</p>
<p>
<img src="@/assets/images/cm.png" style="width:100%" />
</p>
<p>
3、如果问题还存在，请按<a
href="https://examai.cn/pc/zhinan.pdf"
target="_blank"
><font color="red"><b>启用摄像头操作指南</b></font></a
>进行操作>
</p>
<p>
<font size="3"
><b>4、技术支持:<br /><span v-html="description"/></b>
</font>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
window.addEventListener(
"popstate",
function(e) {
this.closeCamera();
console.log(e);
},
false
);
import { getExamById, myInfo, logout, sysDescById } from "@/api/login";
export default {
name: "CheckVideo",
data() {
return {
examBean: {
token: ""
},
tokenBean: {
token: "",
examUserId: ""
},
descBean: {
token: "",
id: ""
},
userInfo: {},
testInfo: {},
examUserId: "",
imgSrc: "",
video: null,
context: null,
canvas: null,
openSuccess: true,
description: ""
};
},
created() {
this.examBean.token = this.getToken();
this.examUserId = this.$route.query.examUserId;
this.tokenBean.token = this.getToken();
this.tokenBean.examUserId = this.examUserId;
this.descBean.token = this.getToken();
this.descBean.id = 14;
this.initData();
setTimeout(() => {
this.getCamera();
}, 1000);
},
methods: {
initData() {
myInfo(this.examBean).then(res => {
if (res.code === 200) {
console.log(res.data);
this.userInfo = res.data.user;
} else {
this.$message.error(res.data.message);
return;
}
});
getExamById(this.tokenBean).then(res => {
if (res.code === 200) {
this.testInfo = res.data;
}
});
sysDescById(this.descBean).then(res => {
this.description = res.data.msg;
});
},
readNotice() {
this.$router.push({
path: "/examNeedToKnow",
query: { examUserId: this.tokenBean.examUserId }
});
},
confirmInfo() {
this.$router.push({
path: "/confirmProfile",
query: { examUserId: this.tokenBean.examUserId }
});
},
// 打开摄像头
getCamera() {
this.video = document.getElementById("videoCamera");
this.canvas = document.getElementById("canvasCamera");
this.context = this.canvas.getContext("2d");
const errocb = () => {
this.$message.error("摄像头打开失败！");
this.openSuccess = false;
};
if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(
{ audio: false, video: true },
stream => {
// video.src=window.URL.createObjectURL(stream);
this.video.srcObject = stream;
this.video.play();
},
errocb
);
} else if (navigator.mediaDevices.getUserMedia) {
// var constraints = { audio: true, video: { width: 1280, height: 720 } };
const constraints = { audio: false, video: true };
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
// var video = document.querySelector('video');
this.video.srcObject = stream;
this.video.onloadedmetadata = () => {
this.video.play();
};
});
} else if (navigator.getUserMedia) {
navigator.getUserMedia(
{ audio: false, video: true },
stream => {
this.video.src = window.webkitURL.createObjectURL(stream);
this.video.srcObject = stream;
this.video.play();
},
errocb
);
} else {
alert("你的浏览器不支持打开摄像头");
}
},
// 绘制图片（拍照功能）
setImage() {
this.context.drawImage(this.video, 0, 0, 240, 240);
this.imgSrc = this.canvas.toDataURL("image/png");
if (this.imgSrc.length > 6000) {
this.$router.push({
path: "/examCatalog",
query: { examUserId: this.examUserId }
});
} else {
alert("检测到摄像头不正常，请重新调整，或切换到别的浏览器");
}
},
// 关闭摄像头
closeCamera() {
this.video.srcObject.getTracks()[0].stop();
},
logoutHandle() {
if (confirm("退出确认")) {
logout(this.examBean).then(res => {
if (res.code === 200) {
this.removeUserInfo();
}
});
this.$router.push("/login");
}
}
}
};
</script>
<style scoped></style>