12.30 第四版
This commit is contained in:
jl-zhoujl2
@ -37,7 +37,7 @@ const Index: React.FC<{}> = () => {
|
||||
const mediaStreamTrack = useRef<any>();
|
||||
const { TabPane } = Tabs;
|
||||
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
|
||||
const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false);
|
||||
const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false);
|
||||
const lv = useRef<LivingNotIE>();
|
||||
const [timerShow, setTimeShow] = useState<boolean>(false);
|
||||
const [itemShow, setItemShow] = useState<boolean>(false);
|
||||
@ -46,8 +46,8 @@ const Index: React.FC<{}> = () => {
|
||||
/**
|
||||
* 设置活体检测token
|
||||
*/
|
||||
const setLiveDetectToken = () =>{
|
||||
let appKey= 'nkYy3g1yT0alE8pF6a1UTC4I'
|
||||
const setLiveDetectToken = () => {
|
||||
let appKey = 'nkYy3g1yT0alE8pF6a1UTC4I'
|
||||
let appSecrect = 'L30zHpTyAtTlY7tTCpbzdxxKCQgwWIQL'
|
||||
// Header
|
||||
var header = {
|
||||
@ -75,41 +75,41 @@ const Index: React.FC<{}> = () => {
|
||||
*/
|
||||
const liveDetectStart = () => {
|
||||
liveDetectStop();
|
||||
let _lv = new LivingNotIE(null, {
|
||||
let _lv = new LivingNotIE(null, {
|
||||
timer: 10000,
|
||||
action : [1,3,2],
|
||||
action: [1, 3, 2],
|
||||
token: setLiveDetectToken(),
|
||||
proxy:'/living/api',
|
||||
getFacePicture:()=>{
|
||||
proxy: '/living/api',
|
||||
getFacePicture: () => {
|
||||
return getLiveDetectFile()
|
||||
},
|
||||
//开始活体检测，此时token已鉴权成功
|
||||
onDetectStart:()=>{
|
||||
onDetectStart: () => {
|
||||
setSubmitLoading(true);
|
||||
},
|
||||
//每轮检测开始
|
||||
onDetectActionStart:(action:number)=>{
|
||||
onDetectActionStart: (action: number) => {
|
||||
setAction(action);
|
||||
// this.drawCanvas()
|
||||
},
|
||||
//每轮检测计时
|
||||
onDetectActionProgress:(action:number,timer:number)=>{
|
||||
onDetectActionProgress: (action: number, timer: number) => {
|
||||
setTimer(timer);
|
||||
},
|
||||
//每轮检测结束
|
||||
onDetectActionFinish:(action:number,data:any)=>{
|
||||
onDetectActionFinish: (action: number, data: any) => {
|
||||
// this.clearCanvas()
|
||||
setTimer(10000);
|
||||
console.log(data)
|
||||
},
|
||||
//活体检测完成
|
||||
onDetectFinish:(data:any)=>{
|
||||
if(data.code == 1){
|
||||
onDetectFinish: (data: any) => {
|
||||
if (data.code == 1) {
|
||||
setAction(4);
|
||||
setTimeShow(false);
|
||||
//人脸比对
|
||||
hanleFaceSubmit(data.file.file, null);
|
||||
}else{
|
||||
} else {
|
||||
message.error('活体检测失败');
|
||||
setSubmitLoading(false);
|
||||
}
|
||||
@ -140,12 +140,12 @@ const Index: React.FC<{}> = () => {
|
||||
console.log(_imgURI);
|
||||
let _file = base64ToBlob(_imgURI);
|
||||
return {
|
||||
file:_file//传给活体检测服务的文件
|
||||
file: _file//传给活体检测服务的文件
|
||||
}
|
||||
}
|
||||
const classColor = (action:any) => {
|
||||
const classColor = (action: any) => {
|
||||
let color = '';
|
||||
switch(action){
|
||||
switch (action) {
|
||||
case 1:
|
||||
color = '#409eff';
|
||||
break;
|
||||
@ -161,17 +161,17 @@ const Index: React.FC<{}> = () => {
|
||||
}
|
||||
return color;
|
||||
}
|
||||
const actionText = (action:number, timer:number) => {
|
||||
const actionText = (action: number, timer: number) => {
|
||||
let text = '';
|
||||
switch(action){
|
||||
switch (action) {
|
||||
case 1:
|
||||
text = '对准摄像头眨眨眼（'+ timer + 's）';
|
||||
text = '对准摄像头眨眨眼（' + timer + 's）';
|
||||
break;
|
||||
case 2:
|
||||
text = '对准摄像头张张嘴（'+ timer + 's）';
|
||||
text = '对准摄像头张张嘴（' + timer + 's）';
|
||||
break;
|
||||
case 3:
|
||||
text = '对准摄像头摇摇头（'+ timer + 's）';
|
||||
text = '对准摄像头摇摇头（' + timer + 's）';
|
||||
break;
|
||||
case 4:
|
||||
text = '请稍候，正在验证中...';
|
||||
@ -428,7 +428,7 @@ const Index: React.FC<{}> = () => {
|
||||
return new Blob([uInt8Array], { type: contentType });
|
||||
};
|
||||
|
||||
const IELiveDetectFinish2 = async(data:any) => {
|
||||
const IELiveDetectFinish2 = async (data: any) => {
|
||||
console.log(data);
|
||||
setAction(4);
|
||||
hanleFaceSubmit(data, null);
|
||||
@ -436,17 +436,17 @@ const Index: React.FC<{}> = () => {
|
||||
|
||||
//IELiveDetectFinish
|
||||
const IELiveDetectFinish = async (data: any) => {
|
||||
if(data.code != 0){
|
||||
if (data.code != 0) {
|
||||
console.log(data);
|
||||
setAction(4);
|
||||
hanleFaceSubmit(data.file.file, null);
|
||||
}else{
|
||||
} else {
|
||||
message.error('活体检测失败');
|
||||
setSubmitLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const UpdateDetectStatus = async(action:number, timer:number)=>{
|
||||
const UpdateDetectStatus = async (action: number, timer: number) => {
|
||||
setSubmitLoading(true);
|
||||
setAction(action);
|
||||
setTimer(timer);
|
||||
@ -563,7 +563,7 @@ const Index: React.FC<{}> = () => {
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</TabPane>
|
||||
<TabPane tab="人脸识别登录" key="2" disabled={faceLoginDisable}>
|
||||
{/* <TabPane tab="人脸识别登录" key="2" disabled={faceLoginDisable}>
|
||||
<Form
|
||||
name="basic2"
|
||||
className="form-box"
|
||||
@ -585,25 +585,27 @@ const Index: React.FC<{}> = () => {
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</Form.Item>
|
||||
{/* 加载摄像头 */}
|
||||
{/* <Form.Item hidden={!itemShow}>
|
||||
<div>
|
||||
<span style={{color:classColor(action)}}>{actionText(action)}</span>
|
||||
<span hidden={!timerShow}>{Math.round(timer/1000)}</span>
|
||||
</div>
|
||||
</Form.Item> */}
|
||||
|
||||
<Form.Item>
|
||||
{!whetherIE.current ? (<video ref={video} width="382" height="200"></video>) : (<FrameFaceLogin faceCompareEvent2={IELiveDetectFinish2} faceCompareEvent={IELiveDetectFinish} faceDetectStatusEvent = {UpdateDetectStatus}/>)}
|
||||
{/* <video ref={video} width="382" height="200"></video> */}
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
{/* onClick={() => {hanleFaceSubmit(null, null);}} */}
|
||||
|
||||
<Button type="primary" className="w100" loading={submitLoading} htmlType="submit">
|
||||
{submitLoading ? actionText(action, Math.round(timer/1000)) : '登 录'}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</TabPane>
|
||||
</TabPane> */}
|
||||
{/* 加载摄像头 */}
|
||||
{/* <Form.Item hidden={!itemShow}>
|
||||
<div>
|
||||
<span style={{color:classColor(action)}}>{actionText(action)}</span>
|
||||
<span hidden={!timerShow}>{Math.round(timer/1000)}</span>
|
||||
</div>
|
||||
</Form.Item> */}
|
||||
{/* <video ref={video} width="382" height="200"></video> */}
|
||||
{/* onClick={() => {hanleFaceSubmit(null, null);}} */}
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user