<template>
|
<view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
|
<view class="title">
|
<text style="color: #ffffff;">
|
{{second}}秒之后开始识别
|
</text>
|
</view>
|
<view class="preview" :style="{ width: windowWidth, height: windowHeight - 80 }">
|
<live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="SD" beauty="1" whiteness="0"
|
:aspect="aspect" min-bitrate="1000" audio-quality="16KHz" device-position="back" :auto-focus="true"
|
:muted="true" :enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange"
|
:style="{ width: cameraWidth, height: cameraHeight }"></live-pusher>
|
|
<!--提示语-->
|
<cover-view class="remind">
|
<text class="remind-text" style="">{{ message }}</text>
|
</cover-view>
|
|
<!--辅助线-->
|
<cover-view class="outline-box" :style="{ width: windowWidth, height: windowHeight - 80 }">
|
<cover-image class="outline-img" src="/static/live-camera/outline/portrait.png" style=""></cover-image>
|
</cover-view>
|
</view>
|
|
<view class="menu">
|
<!--底部菜单区域背景-->
|
<cover-image class="menu-mask" src="/static/live-camera/bar.png"></cover-image>
|
<button v-if="buttonShow" class="submit" style="background: #14b9c8;" ; @click="again">
|
<text style='color: #FFF'>重新识别</text>
|
</button>
|
<!--返回键-->
|
<!-- <cover-image class="menu-back" @tap="back" src="/static/live-camera/back.png"></cover-image> -->
|
<!--快门键-->
|
<!-- <cover-image class="menu-snapshot" @tap="snapshot" src="/static/live-camera/shutter.png"></cover-image> -->
|
<!--反转键-->
|
<!-- <cover-image class="menu-flip" @tap="flip" src="/static/live-camera/flip.png"></cover-image> -->
|
</view>
|
</view>
|
</template>
|
|
<script>
|
let _this = null;
|
export default {
|
data() {
|
return {
|
dotype: 'idphoto', //操作类型
|
message: '', //提示
|
aspect: '2:3', //比例
|
cameraWidth: '', //相机画面宽度
|
cameraHeight: '', //相机画面宽度
|
windowWidth: '', //屏幕可用宽度
|
windowHeight: '', //屏幕可用高度
|
camerastate: false, //相机准备好了
|
livePusher: null, //流视频对象
|
snapshotsrc: null, //快照
|
//倒计时
|
second: 0,
|
ifPhoto: false,
|
faceNext: false,
|
buttonShow: false,
|
dataForm: "",
|
};
|
},
|
onLoad(e) {
|
_this = this;
|
this.dataForm = JSON.parse(decodeURIComponent(e.data));
|
if (e.dotype != undefined) this.dotype = e.dotype;
|
this.initCamera();
|
setTimeout(() => {
|
//倒计时
|
this.getCount()
|
}, 500);
|
},
|
onReady() {
|
this.livePusher = uni.createLivePusherContext('livePusher', this);
|
this.startPreview(); //开启预览并设置摄像头
|
this.livePusher.switchCamera();
|
},
|
methods: {
|
//初始化相机
|
initCamera() {
|
uni.getSystemInfo({
|
success: function(res) {
|
_this.windowWidth = res.windowWidth;
|
_this.windowHeight = res.windowHeight;
|
_this.cameraWidth = res.windowWidth;
|
_this.cameraHeight = res.windowWidth * 1.5;
|
}
|
});
|
},
|
//开始预览
|
startPreview() {
|
this.livePusher.startPreview({
|
success: a => {
|
console.log(a);
|
}
|
});
|
},
|
//停止预览
|
stopPreview() {
|
this.livePusher.stopPreview({
|
success: a => {
|
_this.camerastate = false; //标记相机未启动
|
}
|
});
|
},
|
|
//状态
|
statechange(e) {
|
//状态改变
|
// console.log('摄像头', e);
|
if (this.ifPhoto == true) {
|
//拍照
|
this.snapshot();
|
}
|
},
|
|
//返回
|
back() {
|
uni.navigateBack();
|
},
|
|
//抓拍
|
snapshot() {
|
var that = this;
|
this.livePusher.snapshot({
|
success(res) {
|
that.FaceVerification(res);
|
}
|
});
|
},
|
|
//反转
|
flip() {
|
this.livePusher.switchCamera();
|
},
|
|
//设置
|
setImage() {
|
let pages = getCurrentPages();
|
let prevPage = pages[pages.length - 2]; //上一个页面
|
|
//直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
|
prevPage.$vm.setImage({
|
path: _this.snapshotsrc,
|
dotype: this.dotype
|
});
|
}
|
// 倒计时
|
,
|
getCount() {
|
this.second = 5
|
let timer = setInterval(() => {
|
this.second--;
|
if (this.second < 1) {
|
clearInterval(timer);
|
this.second = 0
|
this.ifPhoto = true
|
this.statechange()
|
}
|
}, 1000);
|
},
|
again() {
|
this.getCount();
|
},
|
//人脸验证
|
FaceVerification(res) {
|
var that = this;
|
uni.showLoading({
|
title: '人脸验证中'
|
});
|
var url = that.$store.state.piAPI + 'blade-user/faceCompare',
|
data = {
|
"name": that.dataForm.name,
|
"idCardNo": that.dataForm.carId,
|
// "name": "曾杭",
|
// "idCardNo": "360728199712210012"
|
};
|
uni.uploadFile({
|
url: url,
|
filePath: res.message.tempImagePath,
|
name: 'file',
|
formData: data,
|
success: (data) => {
|
uni.hideLoading();
|
if (data.statusCode == 200) {
|
var data = JSON.parse(data.data);
|
if (data.data.result == 0) {
|
that.buttonShow = false;
|
uni.showToast({
|
title: '人脸识别成功！',
|
icon: "none",
|
duration: 1000
|
});
|
that.insterAccounts(that.dataForm);
|
} else {
|
that.buttonShow = true;
|
uni.showToast({
|
title: data.data.errMsg == "pic not has face" ?
|
'未检测到人脸' : data.data.errMsg,
|
icon: "none",
|
duration: 1000
|
});
|
}
|
} else {
|
that.buttonShow = true;
|
uni.showToast({
|
title: '服务器连接失败！',
|
icon: "none",
|
duration: 1000
|
});
|
}
|
// console.log(data)
|
}
|
});
|
},
|
//帐号注册
|
insterAccounts(d) {
|
var that = this;
|
var url = that.$store.state.piAPI + '/zc/inster',
|
data = {
|
// deptid: ,
|
password: d.pass,
|
password2: d.passTwo,
|
phone: d.phone,
|
sex: d.sex == '男' ? 1 : 2,
|
sname: d.name,
|
username: d.user,
|
deptid: d.objId,
|
parentId: d.jsid,
|
jurisdiction: d.xqobjId,
|
cardid: d.carId,
|
address: d.address,
|
workunit: d.obj
|
}
|
uni.request({
|
url: url,
|
method: 'POST',
|
data: data,
|
success: (res) => {
|
uni.showToast({
|
title: '注册成功，请等待审核',
|
icon: 'none',
|
duration: 2000
|
});
|
setTimeout(function() {
|
uni.navigateTo({
|
url: '/pages/loging/loging'
|
})
|
}, 2000);
|
}
|
});
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.submit {
|
margin: 30rpx 50rpx 0;
|
border: none;
|
width: 572rpx;
|
height: 86rpx;
|
line-height: 86rpx;
|
box-sizing: border-box;
|
border-radius: 15rpx;
|
}
|
|
.live-camera {
|
.preview {
|
justify-content: center;
|
align-items: center;
|
|
.outline-box {
|
position: absolute;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
z-index: 99;
|
align-items: center;
|
justify-content: center;
|
|
.outline-img {
|
width: 1000rpx;
|
height: 1500rpx;
|
}
|
}
|
|
.remind {
|
position: absolute;
|
top: 880rpx;
|
width: 750rpx;
|
z-index: 100;
|
align-items: center;
|
justify-content: center;
|
|
.remind-text {
|
color: #dddddd;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.title {
|
font-size: 35rpx;
|
background-color: #0BB9C8;
|
color: #ffffff;
|
line-height: 80rpx;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.menu {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
width: 750rpx;
|
height: 180rpx;
|
z-index: 98;
|
align-items: center;
|
justify-content: center;
|
|
.menu-mask {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
width: 750rpx;
|
height: 180rpx;
|
z-index: 98;
|
}
|
|
.menu-back {
|
position: absolute;
|
left: 30rpx;
|
bottom: 50rpx;
|
width: 80rpx;
|
height: 80rpx;
|
z-index: 99;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.menu-snapshot {
|
width: 130rpx;
|
height: 130rpx;
|
z-index: 99;
|
}
|
|
.menu-flip {
|
position: absolute;
|
right: 30rpx;
|
bottom: 50rpx;
|
width: 80rpx;
|
height: 80rpx;
|
z-index: 99;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
