专家人脸集成后台方法
This commit is contained in:
袁帅
@ -2,19 +2,25 @@ import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Form, Button, Input, Row, Col, Modal, Spin, message } from 'antd';
|
||||
import { UserOutlined, LockOutlined, SafetyCertificateOutlined, VideoCameraOutlined } from '@ant-design/icons';
|
||||
import './style.less';
|
||||
import { changePass } from './service';
|
||||
import { changePass, rgbToBase64 } from './service';
|
||||
import logo from '@/images/login/logoPic.png';
|
||||
import { refreshTokenApi, ZjfakeAccountLogin } from '@/services/login';
|
||||
import { refreshTokenApi, ZjfakeAccountLogin, ZjfakeFaceLogin } from '@/services/login';
|
||||
import { history } from 'umi';
|
||||
import cookie from 'react-cookies';
|
||||
import moment from 'moment';
|
||||
import FrameFaceLogin from '../faceLogin/FrameFaceLogin';
|
||||
import { fromPairs } from 'lodash';
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 13 },
|
||||
};
|
||||
|
||||
export interface RgbParams {
|
||||
type: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
const Index: React.FC<{}> = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [imgUrl, setImgUrl] = useState<any>('');
|
||||
@ -78,6 +84,54 @@ const Index: React.FC<{}> = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const hanleFaceSubmit = async (multipartFiles: any, values: any) => {
|
||||
let userName = form.getFieldValue('userName');
|
||||
if(whetherIE.current){
|
||||
if(!multipartFiles){
|
||||
const childFrameObj = document.getElementById('faceLoginFrame');
|
||||
childFrameObj.contentWindow.postMessage('capture', '*');
|
||||
}else{
|
||||
await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
|
||||
if (res?.success) {
|
||||
if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
|
||||
refreshToken(res?.data)
|
||||
} else {
|
||||
sessionStorage.setItem('Authorization', res?.data?.value);
|
||||
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
||||
sessionStorage.setItem('scope', res?.data?.scope);
|
||||
history.push('/redirect');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(!multipartFiles){
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.setAttribute('width','300');
|
||||
canvas.setAttribute('height', '200');
|
||||
const context = canvas.getContext('2d');
|
||||
context.drawImage(video.current, 0, 0, 300, 200);
|
||||
canvas.toBlob(function (result:any) {
|
||||
hanleFaceSubmit(result, null);
|
||||
})
|
||||
}else{
|
||||
await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
|
||||
if (res?.success) {
|
||||
if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
|
||||
refreshToken(res?.data)
|
||||
} else {
|
||||
sessionStorage.setItem('Authorization', res?.data?.value);
|
||||
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
||||
sessionStorage.setItem('scope', res?.data?.scope);
|
||||
history.push('/redirect');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleOk = () => { // 确定修改密码
|
||||
if (changeForm.getFieldValue("newPassword") !== changeForm.getFieldValue("newPassword1")) {
|
||||
message.warn('两次密码输入不一致，请重新输入')
|
||||
@ -192,6 +246,7 @@ const Index: React.FC<{}> = () => {
|
||||
message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
|
||||
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
|
||||
}
|
||||
|
||||
//base64转blob
|
||||
const base64ToBlob = (base64:string) =>{
|
||||
const parts = base64.split(";base64,");
|
||||
@ -204,84 +259,16 @@ const Index: React.FC<{}> = () => {
|
||||
}
|
||||
return new Blob([uInt8Array], { type: contentType });
|
||||
};
|
||||
//人脸比对
|
||||
const Recog=(image:any) =>{
|
||||
if(!whetherIE.current){
|
||||
setSping(true);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.setAttribute('width','300');
|
||||
canvas.setAttribute('height', '200');
|
||||
const context = canvas.getContext('2d');
|
||||
context.drawImage(video.current, 0, 0, 300, 200);
|
||||
canvas.toBlob(function (result:any) {
|
||||
var formData = new FormData();
|
||||
formData.append('multipartFiles', result, 'upload_face.jpeg');
|
||||
const url = 'http://127.0.0.1:8081/outer/v1/ebtp/face/faceCompare';
|
||||
window.fetch(url,{
|
||||
method:'post',
|
||||
mode:'cors',
|
||||
body : formData
|
||||
}).then(res => res.json()).then(res => {
|
||||
if (null != res) {
|
||||
setSping(false);
|
||||
var _data = eval("(" + res['data'] + ")");
|
||||
var _similarity = _data['UNI_BSS_BODY']['FACE_COMPARE_RSP']['SIMILARITY'];
|
||||
message.success('人脸比对成功:相似度' + _similarity);
|
||||
//关闭摄像头
|
||||
//video.current.srcObject.getTracks()[0].stop();
|
||||
} else {
|
||||
setSping(false);
|
||||
message.error('人脸比对失败');
|
||||
}
|
||||
}).catch(e =>{
|
||||
console.log(e);
|
||||
}).finally(() => {
|
||||
setSping(false);
|
||||
});
|
||||
});
|
||||
}else{
|
||||
setSping(true);
|
||||
const url = 'http://127.0.0.1:8081/outer/v1/ebtp/face/rgbArray2Base64';
|
||||
window.fetch(url,{
|
||||
method:'post',
|
||||
body : JSON.stringify({//post请求参数
|
||||
type: 'pixel',
|
||||
rgb: image
|
||||
})
|
||||
}).then(res => res.json()).then(res => {
|
||||
//base64图片进行人脸比对
|
||||
var formData = new FormData();
|
||||
formData.append('multipartFiles', base64ToBlob( 'data:image/jpg;base64,' + res.data), 'upload_face.jpeg');
|
||||
const url2 = 'http://127.0.0.1:8081/outer/v1/ebtp/face/faceCompare';
|
||||
window.fetch(url2,{
|
||||
method:'post',
|
||||
mode:'cors',
|
||||
body : formData
|
||||
}).then(res => res.json()).then(res => {
|
||||
if (null != res) {
|
||||
setSping(false);
|
||||
var _data = eval("(" + res['data'] + ")");
|
||||
var _similarity = _data['UNI_BSS_BODY']['FACE_COMPARE_RSP']['SIMILARITY'];
|
||||
message.success('人脸比对成功:相似度' + _similarity);
|
||||
//关闭摄像头
|
||||
//video.current.srcObject.getTracks()[0].stop();
|
||||
} else {
|
||||
setSping(false);
|
||||
message.error('人脸比对失败');
|
||||
}
|
||||
}).catch(e =>{
|
||||
console.log(e);
|
||||
}).finally(() => {
|
||||
setSping(false);
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//发送拍照请求
|
||||
const SendRequestToCapture = () => {
|
||||
const childFrameObj = document.getElementById('faceLoginFrame');
|
||||
childFrameObj.contentWindow.postMessage('capture', '*');
|
||||
//RgbToBase64
|
||||
const RgbToBase64 = async (image:any) =>{
|
||||
const _body = JSON.stringify({//post请求参数
|
||||
type: 'pixel',
|
||||
rgb: image
|
||||
});
|
||||
await rgbToBase64({_body}).then(res => res.json()).then(res => {
|
||||
hanleFaceSubmit(base64ToBlob( 'data:image/jpg;base64,' + res.data), null);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@ -373,7 +360,7 @@ const Index: React.FC<{}> = () => {
|
||||
className="form-box"
|
||||
initialValues={{ remember: true }}
|
||||
form={form}
|
||||
//onFinish={handleSubmit}
|
||||
onFinish={hanleFaceSubmit.bind(this, null)}
|
||||
// onFinishFailed={onFinishFailed}
|
||||
>
|
||||
<Form.Item
|
||||
@ -391,10 +378,11 @@ const Index: React.FC<{}> = () => {
|
||||
</Form.Item>
|
||||
{/* 加载摄像头 */}
|
||||
<Form.Item>
|
||||
{!whetherIE.current ? (<video ref={video} width="382" height="200"></video>):(<FrameFaceLogin faceCompareEvent = {Recog}/>)}
|
||||
{!whetherIE.current ? (<video ref={video} width="382" height="200"></video>):(<FrameFaceLogin faceCompareEvent = {hanleFaceSubmit}/>)}
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" className="w100" htmlType="submit" onClick={()=> {!whetherIE.current ? Recog('') : SendRequestToCapture()}}>
|
||||
{/* onClick={() => {hanleFaceSubmit(null, null);}} */}
|
||||
<Button type="primary" className="w100" htmlType="submit">
|
||||
登 录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
Reference in New Issue
Block a user