<template>
|
<div class="pages">
|
<p>{{sysModel}}</p>
|
<video id="video" ref="video" width="480" height="320" style="display:none"></video>
|
<canvas ref="canvas" width="480" height="320"></canvas>
|
<div style="height: 200px;">
|
<p>{{face.detect}}</p>
|
</div>
|
|
<br>
|
<button @click="setType('detect')">人脸检测</button>
|
<button @click="setType('search')">人脸搜索</button>
|
<button @click="stopRecorder">停止</button>
|
<!-- <button @click="getMsg">获取信息</button> -->
|
</div>
|
</template>
|
|
<script>
|
import {
|
HCookie,
|
Timeout,
|
faceInfo,
|
} from '@/assets/js/common'
|
export default {
|
data() {
|
return {
|
video: '',
|
mediaRecorder: '',
|
img: '',
|
subImg: '',
|
canvas: '',
|
context: '',
|
hCookie: new HCookie(),
|
msg: '',
|
face: {
|
detect: ''
|
},
|
timer: new Timeout(),
|
type: '',
|
}
|
},
|
methods: {
|
setType(type) {
|
this.type = type;
|
if(this.mediaRecorder.state != "recording") {
|
this.mediaRecorder.start(10);
|
}
|
|
this.startExeFaceApi();
|
},
|
startExeFaceApi: function() {
|
var type = this.type;
|
this.timer.start(()=>{
|
this.exeFaceApi(type);
|
}, 1000);
|
},
|
exeFaceApi: function(type) {
|
switch(type) {
|
case 'detect':
|
this.faceDetect();
|
break;
|
case 'search':
|
this.faceSearch();
|
break;
|
}
|
},
|
getImgInfo: function(img) {
|
var rs = {
|
code: 0,
|
data: '',
|
msg: '未获取到图片'
|
};
|
|
if(img) {
|
rs.code = 1;
|
rs.msg = "检测到图片"
|
var patt= /^data:.*base64,/i;
|
var subImg = img.replace(patt,'');
|
rs.data = encodeURIComponent(subImg);
|
}
|
return rs;
|
},
|
setAccessToken: function(type) {
|
// 获取到access_token
|
if(this.hCookie.getCookie('access_token')) {
|
return;
|
}
|
// 请求后台获取access_token
|
this.$axios({
|
method: 'get',
|
url: 'FaceIdentify_face_Auth',
|
data: null
|
}).then((res)=> {
|
var rs = JSON.parse(JSON.parse(res.data.result));
|
this.hCookie.setCookie('access_token', rs.access_token, 20);
|
|
// 根据type的值执行方法
|
this.startExeFaceApi(type);
|
}).catch((e)=>{
|
console.log(e);
|
});
|
},
|
faceDetect: function() {
|
var imgInfo = this.getImgInfo(this.img);
|
if(imgInfo.code == 1) {
|
var access_token = this.hCookie.getCookie('access_token')
|
// 获取到access_token
|
if(!access_token) {
|
this.msg="读取到access_token";
|
this.setAccessToken();
|
return;
|
}
|
// 构造查询条件
|
var searchParams = {
|
image: imgInfo.data,
|
image_type: 'BASE64',
|
accessToken: access_token,
|
face_field: 'faceshape,facetype',
|
};
|
// 请求后台进行人脸检测
|
this.$axios({
|
method: 'post',
|
url: 'FaceIdentify_face_faceDetect',
|
data: 'json='+JSON.stringify(searchParams),
|
}).then((res)=> {
|
var rs = JSON.parse(JSON.parse(res.data.result));
|
if(rs.error_code == 0) {
|
this.face.detect = rs;
|
}else {
|
this.face.detect = faceInfo.getErrorMsg(rs.error_code);
|
}
|
this.timer.open();
|
}).catch((e)=>{
|
console.log(e);
|
});
|
}else {
|
this.msg=imgInfo.msg;
|
}
|
},
|
faceSearch(){
|
var imgInfo = this.getImgInfo(this.img);
|
if(imgInfo.code == 1) {
|
var access_token = this.hCookie.getCookie('access_token')
|
// 获取到access_token
|
if(!access_token) {
|
this.msg="读取到access_token";
|
this.setAccessToken();
|
return;
|
}
|
// 构造查询条件
|
var searchParams = {
|
image: imgInfo.data,
|
image_type: 'BASE64',
|
accessToken: access_token,
|
liveness_control: 'NORMAL',
|
group_id_list: 'group_repeat,10001',
|
quality_control: 'LOW'
|
};
|
// 请求后台进行人脸检测
|
this.$axios({
|
method: 'post',
|
url: 'FaceIdentify_face_faceSearch',
|
data: 'json='+JSON.stringify(searchParams),
|
}).then((res)=> {
|
var rs = JSON.parse(JSON.parse(res.data.result));
|
if(rs.error_code == 0) {
|
this.face.detect = rs;
|
}else {
|
this.face.detect = faceInfo.getErrorMsg(rs.error_code);
|
}
|
this.timer.open();
|
}).catch((e)=>{
|
console.log(e);
|
});
|
}else {
|
this.msg=imgInfo.msg;
|
}
|
},
|
//访问用户媒体设备的兼容方法
|
getUserMedia(constraints, success, error) {
|
if (navigator.mediaDevices.getUserMedia) {
|
//最新的标准API
|
navigator.mediaDevices.getUserMedia(constraints).then(success)
|
.catch(error);
|
} else if (navigator.webkitGetUserMedia) {
|
//webkit核心浏览器
|
navigator.webkitGetUserMedia(constraints,success, error)
|
} else if (navigator.mozGetUserMedia) {
|
//firfox浏览器
|
navigator.mozGetUserMedia(constraints, success, error);
|
} else if (navigator.getUserMedia) {
|
//旧版API
|
navigator.getUserMedia(constraints, success, error);
|
}
|
},
|
success(stream) {
|
var self = this;
|
|
this.mediaRecorder = new MediaRecorder(stream);
|
//将视频流设置为video元素的源
|
this.video.srcObject = stream;
|
this.video.play();
|
|
this.mediaRecorder.ondataavailable = function() {
|
self.context.drawImage(self.video, 0, 0, 480, 320);
|
self.img = self.canvas.toDataURL('image/png');
|
}
|
this.mediaRecorder.onstart = function() {
|
self.context.drawImage(self.video, 0, 0, 480, 320);
|
self.img = self.canvas.toDataURL('image/png');
|
self.startExeFaceApi();
|
};
|
},
|
error(error) {
|
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
|
},
|
stopRecorder(){
|
this.timer.stop();
|
if(this.mediaRecorder.state == "recording") {
|
this.mediaRecorder.stop();
|
}else {
|
console.log(this.mediaRecorder.state);
|
}
|
},
|
|
},
|
computed: {
|
getImg() {
|
return 'data:image/jpg;base64,'+this.subImg;
|
},
|
sysModel() {
|
var rs = '未知';
|
switch(this.type) {
|
case 'detect':
|
rs = '人脸检测模式';
|
break;
|
case 'search':
|
rs = '人脸搜索模式';
|
break;
|
}
|
return rs;
|
}
|
},
|
mounted() {
|
this.video = this.$refs['video'];
|
this.canvas = this.$refs['canvas'];
|
this.context = this.canvas.getContext('2d');
|
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia ||
|
navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
|
//调用用户媒体设备, 访问摄像头
|
this.getUserMedia({video : {width: 480, height: 320}}, this.success,
|
this.error);
|
} else {
|
alert('不支持访问用户媒体');
|
}
|
// 获取并设置accessToken
|
this.setAccessToken();
|
},
|
destroyed() {
|
// 关闭记录
|
this.stopRecorder();
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
