暂时提交专家人脸登录前端demo代码
This commit is contained in:
袁帅
44
src/pages/userformal/faceLogin/FrameFaceLogin.tsx
Normal file
44
src/pages/userformal/faceLogin/FrameFaceLogin.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
import FrameLoader from "./FrameLoader";
|
||||
export default class FrameFaceLogin extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
console.log(props, "props数据");
|
||||
this.state = {
|
||||
transferData: {
|
||||
optimizationOrderFn: false,
|
||||
allocationFn: false,
|
||||
releaseFn: false,
|
||||
revocationFn: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
// 接收Iframe 传递的数据
|
||||
window.addEventListener("message", (e) => {
|
||||
const { allocationFn, releaseFn } = e.data || {}; //传递的数据
|
||||
if (allocationFn || releaseFn) {
|
||||
this.setState({
|
||||
transferData: e.data,
|
||||
});
|
||||
|
||||
console.log(this.state.transferData, "传数据");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { transferData } = this.state || {};
|
||||
console.log(transferData, "数据");
|
||||
return (
|
||||
<div style={{ height: "100%" }}>
|
||||
{/* 设置Iframe 盒子的宽度 */}
|
||||
<div style={{ minHeight: "calc(55vh - 97px)", position: "relative" }}>
|
||||
{/* 这个是打包后的Iframe 地址：要到webpack中配置打包地址 */}
|
||||
<FrameLoader url="/faceLoginIE/index.html" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
33
src/pages/userformal/faceLogin/FrameLoader.tsx
Normal file
33
src/pages/userformal/faceLogin/FrameLoader.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import Iframe from "react-iframe";
|
||||
export default class FrameLoader extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
iFrameHeight: this.props.height ? this.props.height : 0, // 设置iframe的高度
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Iframe
|
||||
onLoad={() => {
|
||||
const obj = ReactDOM.findDOMNode(this);
|
||||
this.setState({
|
||||
iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px",
|
||||
});
|
||||
}}
|
||||
frameBorder="0"
|
||||
height="100%"
|
||||
width="100%"
|
||||
position="absolute"
|
||||
scrolling="no"
|
||||
// 接收到的 Iframe 的URL地址
|
||||
url={this.props.url}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
159
src/pages/userformal/faceLogin/index.tsx
Normal file
159
src/pages/userformal/faceLogin/index.tsx
Normal file
@ -0,0 +1,159 @@
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import {Tabs, message } from 'antd';
|
||||
import cookie from 'react-cookies';
|
||||
import FrameFaceLogin from './FrameFaceLogin';
|
||||
|
||||
const FaceLoginNotIE: React.FC<{}> = () => {
|
||||
const video = useRef(), canvas = useRef();
|
||||
const { TabPane } = Tabs;
|
||||
const whetherIE = useRef<boolean>(false)
|
||||
const [spinning, setSping] = useState<boolean>(false);//加载遮罩
|
||||
const onChange = (key: string) => {
|
||||
console.log(key);
|
||||
};
|
||||
//初始化浏览器类型
|
||||
const InitBrowser = () =>{
|
||||
//取得浏览器的userAgent字符串
|
||||
var userAgent = navigator.userAgent;
|
||||
//判断是否IE<11
|
||||
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
|
||||
//判断是否IE的Edge浏览器
|
||||
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
|
||||
//判断是否IE11
|
||||
var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
|
||||
if(isIE){
|
||||
var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
|
||||
reIE.test(userAgent);
|
||||
var fIEVersion = parseFloat(RegExp["$1"]);
|
||||
if(fIEVersion == 7){
|
||||
return 7;
|
||||
}else if(fIEVersion == 8){
|
||||
return 8;
|
||||
}else if(fIEVersion == 9){
|
||||
return 9;
|
||||
}else if(fIEVersion == 10){
|
||||
return 10;
|
||||
}else{
|
||||
//IE版本<=7
|
||||
return 6;
|
||||
}
|
||||
}else if(isEdge){
|
||||
return 'edge';
|
||||
}else if(isIE11){
|
||||
//IE11
|
||||
whetherIE.current = true;
|
||||
return 11;
|
||||
}else{
|
||||
//不是IE浏览器
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
//初始化video
|
||||
const initMedia = () => {
|
||||
if(!whetherIE.current){
|
||||
InitUserMedia({video : {width: 480, height: 320}}, success, error);
|
||||
}
|
||||
};
|
||||
//访问用户媒体设备的兼容方法
|
||||
const InitUserMedia = (constraints: any, success: any, error: any) => {
|
||||
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);
|
||||
}
|
||||
}
|
||||
//调用媒体设备成功回调方法
|
||||
const success = (stream: any) => {
|
||||
//兼容webkit核心浏览器
|
||||
const CompatibleURL = window.URL || window.webkitURL;
|
||||
//将视频流设置为video元素的源
|
||||
console.log(stream);
|
||||
//video.src = CompatibleURL.createObjectURL(stream);
|
||||
video.current.srcObject = stream;
|
||||
video.current.play();
|
||||
}
|
||||
//调用媒体设备失败回调方法
|
||||
const error = (error:any) => {
|
||||
message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
|
||||
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
|
||||
}
|
||||
//初始化
|
||||
useEffect(() => {
|
||||
cookie.remove('mall3_token');
|
||||
sessionStorage.clear();
|
||||
InitBrowser();
|
||||
initMedia();
|
||||
}, []);
|
||||
//人脸比对
|
||||
const Recog=() =>{
|
||||
if(canvas.current){
|
||||
setSping(true);
|
||||
const context = canvas.current.getContext('2d');
|
||||
context.drawImage(video.current, 0, 0, 480, 320);
|
||||
canvas.current.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.0/stock/logicStock/importStockDepotRelation';
|
||||
window.fetch(url,{
|
||||
method:'post',
|
||||
mode:'cors',
|
||||
body : formData
|
||||
}).then(res => res.json()).then(res => {
|
||||
if (null != res) {
|
||||
setSping(false);
|
||||
message.success('人脸比对成功');
|
||||
var _html = document.getElementById('result');
|
||||
var _data = eval("(" + res['data'] + ")");
|
||||
var _similarity = _data['UNI_BSS_BODY']['FACE_COMPARE_RSP']['SIMILARITY'];
|
||||
_html.innerText = '相似度：' + _similarity;
|
||||
//关闭摄像头
|
||||
video.current.srcObject.getTracks()[0].stop();
|
||||
} else {
|
||||
setSping(false);
|
||||
message.error('人脸比对失败');
|
||||
}
|
||||
}).catch(e =>{
|
||||
console.log(e);
|
||||
}).finally(() => {
|
||||
setSping(false);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
if(!whetherIE.current){
|
||||
return (
|
||||
<Tabs defaultActiveKey="1" onChange={onChange}>
|
||||
<TabPane tab="人脸识别登录" key="1">
|
||||
<video ref={video} width="480" height="320"></video>
|
||||
<div>
|
||||
<button id="recog" onClick={() => Recog()}>人脸识别</button>
|
||||
</div>
|
||||
<canvas id="canvas" ref={canvas} width="480" height="320"></canvas>
|
||||
<div id='result'></div>
|
||||
</TabPane>
|
||||
<TabPane tab="账号密码登录" key="2">
|
||||
Content of Tab Pane 2
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
);
|
||||
}else{
|
||||
return(
|
||||
<Tabs defaultActiveKey="1" onChange={onChange}>
|
||||
<TabPane tab="人脸识别登录" key="1">
|
||||
<FrameFaceLogin/>
|
||||
</TabPane>
|
||||
<TabPane tab="账号密码登录" key="2">
|
||||
Content of Tab Pane 2
|
||||
</TabPane>
|
||||
</Tabs>)
|
||||
}
|
||||
}
|
||||
export default FaceLoginNotIE;
|
||||
Reference in New Issue
Block a user