253 lines
8.1 KiB
HTML
253 lines
8.1 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>人脸识别</title>
|
||
<script src="./js/vue.js"></script>
|
||
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
|
||
<script src="../config.js"></script>
|
||
<script src="build/tracking-min.js"></script>
|
||
<script src="build/data/face-min.js"></script>
|
||
|
||
<style>
|
||
#video {
|
||
transform: rotateY(180deg);
|
||
}
|
||
.face-capture {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.face-capture video, .face-capture canvas {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
z-index: 2;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.face-capture canvas {
|
||
z-index: 2;
|
||
}
|
||
|
||
.face-capture .img-cover {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
z-index: 2;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.face-capture .rect {
|
||
border: 2px solid #0aeb08;
|
||
position: fixed;
|
||
z-index: 3;
|
||
}
|
||
|
||
.face-capture .control-container {
|
||
margin-top: 10rem;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
z-index: 4;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.face-capture .title {
|
||
text-align: center;
|
||
color: white;
|
||
margin: 1.6rem auto;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.face-capture .close {
|
||
width: 0.8rem;
|
||
height: 0.8rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div v-show="showContainer" class="face-capture" id="face-capture">
|
||
<video ref="refVideo" id="video" autoplay></video>
|
||
<!-- <img src="./../images/video-cover.png" alt="cover" class="img-cover"/> -->
|
||
<div class="control-container face-capture">
|
||
<h2 class="title">{{scanTip}}</h2>
|
||
<h2 class="title">{{msg}}</h2>
|
||
<!-- <img class="close" src="./../images/address_edit_clear.png" alt=""/> -->
|
||
<canvas ref="refCanvas" :width="screenSize.width" :height="screenSize.height" :style="{opacity: 0}"></canvas>
|
||
</div>
|
||
<div class="rect" v-for="item in profile"
|
||
:style="{ width: item.width + 'px', height: item.height + 'px', left: item.left + 'px', top: item.top + 'px'}"></div>
|
||
</div>
|
||
<div v-show="!showContainer">验证成功</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<script type="text/javascript">
|
||
var vm = new Vue({
|
||
el: '#app',
|
||
|
||
data: {
|
||
USER_ID: null,
|
||
screenSize: { width: window.screen.width, height: window.screen.height },
|
||
URL: null,
|
||
streamIns: null, // 视频流
|
||
showContainer: true, // 显示
|
||
tracker: null,
|
||
tipFlag: false, // 提示用户已经检测到
|
||
flag: false, // 判断是否已经拍照
|
||
context: null, // canvas上下文
|
||
profile: [], // 轮廓
|
||
removePhotoID: null, // 停止转换图片
|
||
scanTip: '人脸识别中...请将人脸置于镜头内', // 提示文字
|
||
imgUrl: '', // base64格式图片
|
||
weburl: config.weburl,
|
||
msg: '',
|
||
countdown: 0,
|
||
timer: null
|
||
},
|
||
beforeDestroy() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
}
|
||
},
|
||
mounted() {
|
||
this.USER_ID = this.getUrlKey('USER_ID')
|
||
// 这段代 主要是获取摄像头的视频流并显示在Video 签中
|
||
window.addEventListener('DOMContentLoaded', function() {
|
||
// 拍照按钮
|
||
// $("#snap").click(function () {
|
||
// context.drawImage(video, 0, 0, 330, 250);
|
||
// })
|
||
// 拍照每秒一次
|
||
// setInterval(function(){
|
||
// context.drawImage(video, 0, 0, 330, 250)
|
||
// },1000);
|
||
var 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.webkitGetUserMedia || navigator.mozGetUserMedia
|
||
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
|
||
if (!getUserMedia) {
|
||
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)
|
||
})
|
||
}
|
||
}
|
||
if (window.stream) {
|
||
window.stream.getTracks().forEach(track => {
|
||
track.stop()
|
||
})
|
||
}
|
||
navigator.mediaDevices.getUserMedia(constraints)
|
||
.then(function(stream) {
|
||
var video = document.querySelector('video')
|
||
video.setAttribute('playsinline', true)
|
||
// 旧的浏览器可能没有srcObject
|
||
window.stream = stream
|
||
if ('srcObject' in video) {
|
||
video.srcObject = stream
|
||
} else {
|
||
// 防止在新的浏览器里使用它，应为它已经不再支持了
|
||
video.src = window.URL.createObjectURL(stream)
|
||
}
|
||
video.play()
|
||
})
|
||
.catch(function(err) {
|
||
alert(err.name + ': ' + err.message)
|
||
}) // 总是在最后检查错误
|
||
}, false)
|
||
this.tackPhoto()
|
||
},
|
||
methods: {
|
||
// 拍照
|
||
tackPhoto() {
|
||
this.context = this.$refs.refCanvas.getContext('2d') // 画布
|
||
this.timer = setInterval(() => {
|
||
this.countdown += 1
|
||
if (this.countdown > 30) {
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
this.msg = '验证失败,请重新打开此页面'
|
||
}
|
||
this.context.drawImage(this.$refs.refVideo, 0, 0, this.screenSize.width, this.screenSize.height)
|
||
// // 保存为base64格式
|
||
this.imgUrl = this.saveAsPNG(this.$refs.refCanvas)
|
||
// /** 拿到base64格式图片之后就可以在this.compare方法中去调用后端接口比较了，也可以调用getBlobBydataURI方法转化成文件再去比较
|
||
// * 我们项目里有一个设置个人头像的地方，先保存一下用户的图片，然后去拿这个图片的地址和当前拍照图片给后端接口去比较。
|
||
// * */
|
||
var _this = this
|
||
var USERAVATARURL = this.imgUrl.substring(this.imgUrl.indexOf('base64,') + 7)
|
||
$.ajax({
|
||
xhrFields: {
|
||
withCredentials: true
|
||
},
|
||
type: 'POST',
|
||
url: config.httpurl + '/app/user/compareFaceForH5',
|
||
data: {
|
||
USERAVATARURL: USERAVATARURL,
|
||
USER_ID: this.USER_ID
|
||
},
|
||
dataType: 'json',
|
||
success: function(data) {
|
||
var result = data.result
|
||
if (result == 'success') {
|
||
clearInterval(_this.timer)
|
||
_this.timer = null
|
||
_this.msg = '验证成功'
|
||
_this.showContainer = false
|
||
} else if (result == 'error') {
|
||
_this.msg = data.msg
|
||
}
|
||
},
|
||
fail: function(data) {
|
||
_this.msg = '验证失败'
|
||
}
|
||
})
|
||
// this.msg = USERAVATARURL
|
||
}, 2000)
|
||
},
|
||
// 保存为png,base64格式图片
|
||
saveAsPNG(c) {
|
||
return c.toDataURL('image/png', 0.3)
|
||
},
|
||
// 根据url参数名称获取参数值
|
||
getUrlKey: function(name) {
|
||
return decodeURIComponent(
|
||
(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|