H5活体检测前端页面
前端H5人脸活体检测功能
前端代码
<template>
<view class="takePhotoBeforView">
<!-- 活体提示 -->
<div class="face-tips" v-if="step === 1">
<div class="title">多动作活体验证</div>
<div class="img">
<div class="img-bg"></div>
<div class="img-line"></div>
<img src="../static/images/face/face_tips4.png" alt="">
</div>
<div class="content">
<p>请根据动作提示，按动作顺序</p>
<p>录制 <span class="red-text">1-3秒动作</span> 视频</p>
<p>请正对手机摄像头，确保面部光源充足</p>
</div>
<div class="btn" @click="nextStep">开始验证</div>
</div>
<!-- 活体视频录制 -->
<div class="face-box" v-show="step === 2">
<div class="title">多动作活体验证</div>
<div class="action-box">
<div class="action-box-p" v-if="actionVal.length > 1"><span class="txt">先{{ actionList[actionVal[0]].text }}、后{{ actionList[actionVal[1]].text }}</span></div>
<div class="action-box-list">
<div class="item" v-for="(item, index) in actionVal" :key="index">
<img :src="actionList[item].icon" alt="">
</div>
</div>
</div>
<div class="face-success">
<div class="face-success-imgs">
<video ref="videoRef" style="object-fit:fill" :show-center-play-btn="false" muted preload></video>
</div>
</div>
<div class="btn" @click="saveVideo">{{ recordStatus === 0 ? '开始录制' : '结束录制(' + recordCount + 's)' }}</div>
</div>
<!-- 成功 -->
<div class="face-tips" v-if="step === 3">
<div class="title">多动作活体验证</div>
<div class="face-success">
<div class="face-success-img">
<img :src="videoImg" alt="">
</div>
</div>
<div class="btn" @click="successBack">确定</div>
</div>
<!-- 失败 -->
<div class="face-tips" v-if="step === 4">
<div class="title">多动作活体验证</div>
<div class="error-wrap">
<div class="error-tips">{{ errorTips }}</div>
<div class="error-p">请确保本人操作，并避免以下问题</div>
<ul class="error-list">
<li>
<img src="../static/images/face/face_error1.jpg" alt="">
<p>没有对焦</p>
</li>
<li>
<img src="../static/images/face/face_error2.jpg" alt="">
<p>遮挡人脸</p>
</li>
<li>
<img src="../static/images/face/face_error3.jpg" alt="">
<p>光照不均</p>
</li>
<li>
<img src="../static/images/face/face_error4.jpg" alt="">
<p>手机晃动</p>
</li>
</ul>
</div>
<div class="btn" @click="again">重新检测</div>
</div>
</view>
</template
js代码
export default {
name: "VideoVerify",
data() {
return {
show: false,
step: 1, // 1 提示 2 录制 3 成功 4 失败
name: '',
idnum: '',
actionList: {
1: {
text: '眨眼',
icon: require('../static/images/face/face_tips1.png')
},
2: {
text: '张嘴',
icon: require('../static/images/face/face_tips2.png')
},
5: {
text: '转头',
icon: require('../static/images/face/face_tips3.png')
},
},
actionVal: [],
mediaRecorder: null,
MediaStreamTrack: null,
recordStatus: 0, // 0 未开始 1 正在录制
recordCount: 5,
recordedBlobs: [],errorTips: '',
videoImg: '' ,// 人像识别图片
canvas: null,
}
},
mounted() {},
beforeDestroy() {
this.MediaStreamTrack && this.MediaStreamTrack.stop()
this.countTimer && clearTimeout(this.countTimer)
},
methods: {
showChoose(data) {
this.again()
this.show = true
this.name = data.name
this.idnum = data.idnum
},
cancelChoose() {
this.show = false
this.name = ''
this.idnum = ''
},
// 下一步
nextStep() {
//this.getCamera()
this.getActionData()
},
// 调用摄像头 开始录制
getCamera () {
let that = this
// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
let constraints = {
audio: false,
video: {
facingMode: 'user' // 优先调前置摄像头
}
}// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {}
}// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的话，就获得它
// var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
var getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
that.$modal.confirm('摄像头开启失败，请检查摄像头是否授权或是否可用！').then(() => {
that.cancelChoose()
})
return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
}// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject)
})
}
}navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
that.MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0]
console.log(stream)
console.log(that.MediaStreamTrack)
let winURL = window.URL || window.webkitURL
const video = document.querySelector("video");
if ('srcObject' in video) {
video.srcObject = stream
} else {
video.src = winURL.createObjectURL(stream)
}
video.onloadedmetadata = e => {
// 播放视频
video.play()
}let options = {
videoBitsPerSecond: 2500000
}
that.mediaRecorder = new MediaRecorder(stream, options)this.getActionData()
})
.catch((err) => {
that.$modal.confirm('摄像头开启失败，请检查摄像头是否授权或是否可用！').then(() => {
that.cancelChoose()
})
})
},
// 生成随机动作组
getActionData() {
this.actionVal = [1, 5]
// 显示录制框
this.step = 2
this.recordStatus = 0
},
// 录制倒计时
countDown() {
let that = this
let sendTime = Math.round(+new Date() / 1000)return function walk() {
that.countTimer = setTimeout(function() {
that.countTimer && clearTimeout(that.countTimer)
let diff = sendTime + 5 - Math.round(+new Date() / 1000)
if (diff > 0) {
that.recordCount = diff
walk()
} else {
console.log('倒计时结束')
that.recordStatus = 1
that.saveVideo()
}
}, 1000)
}
},
// 保存录制视频
saveVideo() {
this.canvas = document.createElement("canvas");
let context = this.canvas.getContext("2d");
const video = document.querySelector("video");
this.canvas.width = 720;
this.canvas.height = 864;
context.drawImage(video, 0, 0, this.canvas.width,this.canvas.height);
let canvas = this.canvas.toDataURL("image/png");
this.videoImg=canvas;
if (this.recordStatus === 1) {
this.countTimer && clearTimeout(this.countTimer)
//当录制的数据可用时
this.mediaRecorder.ondataavailable = (e) => {
console.log(e)
if (e.data && e.data.size > 0) {
this.recordedBlobs.push(e.data)
}
}
this.mediaRecorder.stop()setTimeout(() => {
var blob = new Blob(this.recordedBlobs, {type: 'video/mp4'})
console.log(blob)
this.isAlreadyRecord = false
this.MediaStreamTrack && this.MediaStreamTrack.stop()var reader = new FileReader();
reader.readAsDataURL(blob, 'utf-8')
reader.onload = () => {
console.log(reader.result); // base64格式
let result = reader.result.replace(/^data:video\/\w+;base64,/, '')
this.faceReco(result)
}
}, 1000)
} else {
this.count = 8
this.recordStatus = 1
this.mediaRecorder.start(5000)
this.countDown()()
}
},
// 视频识别活检比对
faceReco(video) {
console.log("视频识别活检比对中")
console.log(video)
let that = this
that.$modal.loading("验证中...")
setTimeout(() => {
let random_boolean = Math.random() < 0.5;
this.$modal.closeLoading()
this.step = 3
// 随机返回结果
/* if (random_boolean) {
this.$modal.closeLoading()
this.step = 3
//this.videoImg = video
} else {
this.$modal.closeLoading()
this.step = 4
this.errorTips = '人像不完整'
} */
this.recordedBlobs = []
this.recordStatus = 0
this.MediaStreamTrack && this.MediaStreamTrack.stop()
this.countTimer && clearTimeout(this.countTimer)
}, 2000)},
// 人脸失败、重试
again() {
this.step = 1
this.actionVal = []
this.errorTips = ''
this.videoImg = ''
},
// 人脸成功返回
successBack() {
this.$emit('on-success', {
photo: this.videoImg
})
this.$emit("openTakePhoto")
this.cancelChoose()
}
}
}
样式
<style scoped lang="less">
.face-popup {
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
transform: none;
box-sizing: border-box;
}
.face-box,
.face-tips {
display: flex;
flex-direction: column;
height: 100%;
text-align: center;
box-sizing: border-box;
}
.face-tips {
padding: 30px;
}
.face-box {
padding: 20px 0;
}
.title {
text-align: center;
line-height: 1.2;
font-size: 20px;
color: #333;
font-weight: 600;
}
.img {
position: relative;
margin: 7vh auto;
width: 260px;
height: 260px;
}
@keyframes bgmove {
from {
height: 0;
}
to {
height: 225px;
}
}
.img-bg,
.img-line {
position: absolute;
top: 17px;
left: 17px;
width: 225px;
overflow: hidden;
}
.img-bg {
animation: bgmove 4s linear infinite;
animation-direction: alternate;
z-index: 1;
}
.img-bg:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 225px;
height: 225px;
background: linear-gradient(0deg, transparent 0%, rgba(104, 24, 133, .3) 50%, transparent 100%);
border-radius: 50%;
}
.img-line {
z-index: 6;
height: 225px;
border-radius: 50%;
}
.img-line:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
border-bottom: 2px solid #007aff;
animation: bgmove 4s linear infinite;
animation-direction: alternate;
}
.img img {
position: relative;
width: 100%;
height: 100%;
z-index: 2;
}
.content {
flex: 1;
min-height: 0;
text-align: center;
font-size: 15px;
line-height: 1.8;
color: #999;
font-weight: 300;
}
.red-text {
color: #f00;
}
.btn {
height: 45px;
line-height: 45px;
text-align: center;
font-size: 18px;
color: #fff;
background-color: #007aff;
border-radius: 45px;
}
.face-success {
//flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.face-success-imgs {
position: relative;
width: 250px;
height: 250px;
//padding: 20px;
border-radius: 50%;
overflow: hidden;
}
.face-success-img {
position: relative;
width: 225px;
height: 225px;
padding: 20px;
}
.face-success-img:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: url('data:image/png;base64,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') center center / 100% 100% no-repeat;
}
.face-success-img img {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
.error-wrap {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.error-tips {
margin: 25px 0;
line-height: 1.4;
font-size: 20px;
color: #f54d55;
letter-spacing: 2px;
width: 100%;
}
.error-p {
line-height: 1.6;
font-size: 16px;
color: #d05b63;
letter-spacing: 2px;
width: 100%;
}
.error-list {
display: flex;
flex-wrap: wrap;
width: 100%;
li {
padding: 20px;
width: 50%;
box-sizing: border-box;
}
img {
width: 75px;
height: 75px;
margin: 0 auto 8px;
}
p {
line-height: 1.4;
font-size: 14px;
color: #d05b63;
}
}
.action-box {
margin-top: 20px;
padding: 10px 60px;
margin-bottom: 20px;
background-color: #ededed;
&-p {
margin-bottom: 10px;
font-size: 14px;
overflow: hidden;
color: #e84968;
.text {
position: relative;
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
margin-top: -8px;
width: 170px;
height: 170px;
background: url('data:image/jpeg;base64,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') center center / contain no-repeat;
}
&:before {
right: calc(100% + 25rpx);
}
&:after {
left: calc(100% + 25rpx)
}
}
}
&-list {
display: flex;
justify-content: center;
.item {
width: 60px;
height: 60px;
margin: 0 20px;
img {
display: block;
height: 100%;
width: auto;
}
}
}
}
.face-box {
video {
flex: 1;
min-height: 0;
object-fit: fill;
}
.btn {
margin: 20px 20px 0;
}
}
.takePhotoBeforView {
width: 100vw;
height: 100vh;
position: fixed;
top:0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
background-color: #FFFFFF;
}
uni-video {
width: 100%;
height: 100%;
}
</style>
参考地址：作者结合GitHub - reknown/videoPersonVerify进行优化改造
注意事项
对照后台算法，可以结合上传video文件进行活体检测，或者是结合进行截图对指定动作图片进行算法核验，具体实现看个人操作，具体还是要对比后台活体检测算法进行实现
效果展示
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
6
0- 0
已为社区贡献2条内容
所有评论(0)