liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暂时提交专家人脸登录前端demo代码

Browse Source
This commit is contained in:
袁帅
2022-08-08 10:55:27 +08:00
parent 541b685651
commit 70ab971831
12 changed files with 11286 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
config/router_transfer.ts
View File

@ -91,6 +91,11 @@ export default [
path: '/userformal/login', path: '/userformal/login',
component: './userformal/login', component: './userformal/login',
}, },
{
name: 'faceLogin',
path: '/userformal/faceLogin',
component: './userformal/faceLogin',
}
], ],
}, },
{ {

1
package.json
View File

@ -124,6 +124,7 @@
"prettier": "^2.0.1", "prettier": "^2.0.1",
"pro-download": "1.0.1", "pro-download": "1.0.1",
"puppeteer-core": "^5.0.0", "puppeteer-core": "^5.0.0",
"react-iframe": "^1.8.0",
"react-pdf-js": "^4.0.1", "react-pdf-js": "^4.0.1",
"stylelint": "^13.0.0", "stylelint": "^13.0.0",
"typescript": "^3.9.7" "typescript": "^3.9.7"

4
public/faceLoginIE/cs.css Normal file
View File

@ -0,0 +1,4 @@
@charset "utf-8";
/* CSS Document */
#webcam{ border: 1px solid #666666; width: auto; height: auto; float: left; }

50
public/faceLoginIE/index.html Normal file
View File

@ -0,0 +1,50 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery-webcam-master</title>
<link href="cs.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.webcam.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller
onTick: function(remain) {
if (0 == remain) {
jQuery("#status").text("Cheese!");
} else {
jQuery("#status").text(remain + " seconds remaining...");
}
},
onSave: function(data) {
var col = data.split(";");
// Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
},
onCapture: function () {
webcam.save();
// Show a flash for example
},
debug: function (type, string) {
// Write debug information to console.log() or a div, ...
},
onLoad: function () {
// Page load
var cams = webcam.getCameraList();
for(var i in cams) {
jQuery("#cams").append("<li>" + cams[i] + "</li>");
}
}
});
});
</script>
</head>
<body>
<div id="webcam"></div>
</body>
</html>

10881
public/faceLoginIE/jquery.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

99
public/faceLoginIE/jquery.webcam.js Normal file
View File

@ -0,0 +1,99 @@
/**
* @license jQuery webcam plugin v1.0.0 09/12/2010
* http://www.xarg.org/project/jquery-webcam-plugin/
*
* Copyright (c) 2010, Robert Eisele (robert@xarg.org)
* Dual licensed under the MIT or GPL Version 2 licenses.
**/
(function ($) {
var webcam = {
"extern": null, // external select token to support jQuery dialogs
"append": true, // append object instead of overwriting
"width": 320,
"height": 240,
"mode": "callback", // callback | save | stream
"swffile": "jscam.swf",
"quality": 85,
"debug": function () {},
"onCapture": function () {},
"onTick": function () {},
"onSave": function () {},
"onLoad": function () {}
};
window["webcam"] = webcam;
$["fn"]["webcam"] = function(options) {
if (typeof options === "object") {
for (var ndx in webcam) {
if (options[ndx] !== undefined) {
webcam[ndx] = options[ndx];
}
}
}
var source = '<object id="XwebcamXobjectX" type="application/x-shockwave-flash" data="'+webcam["swffile"]+'" width="'+webcam["width"]+'" height="'+webcam["height"]+'"><param name="movie" value="'+webcam["swffile"]+'" /><param name="FlashVars" value="mode='+webcam["mode"]+'&amp;quality='+webcam["quality"]+'" /><param name="allowScriptAccess" value="always" /></object>';
if (null !== webcam["extern"]) {
$(webcam["extern"])[webcam["append"] ? "append" : "html"](source);
} else {
this[webcam["append"] ? "append" : "html"](source);
}
var run = 3;
(_register = function() {
var cam = document.getElementById('XwebcamXobjectX');
if (cam && cam["capture"] !== undefined) {
/* Simple callback methods are not allowed :-/ */
webcam["capture"] = function(x) {
try {
return cam["capture"](x);
} catch(e) {}
}
webcam["save"] = function(x) {
try {
return cam["save"](x);
} catch(e) {}
}
webcam["setCamera"] = function(x) {
try {
return cam["setCamera"](x);
} catch(e) {}
}
webcam["getCameraList"] = function() {
try {
return cam["getCameraList"]();
} catch(e) {}
}
webcam["pauseCamera"] = function() {
try {
return cam["pauseCamera"]();
} catch(e) {}
}
webcam["resumeCamera"] = function() {
try {
return cam["resumeCamera"]();
} catch(e) {}
}
webcam["onLoad"]();
} else if (0 == run) {
webcam["debug"]("error", "Flash movie not yet registered!");
} else {
/* Flash interface not ready yet */
run--;
window.setTimeout(_register, 1000 * (4 - run));
}
})();
}
})(jQuery);

10
public/faceLoginIE/jquery.webcam.min.js vendored Normal file
View File

@ -0,0 +1,10 @@
/*
jQuery webcam plugin v1.0.0 09/12/2010
http://www.xarg.org/project/jquery-webcam-plugin/
Copyright (c) 2010, Robert Eisele (robert@xarg.org)
Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function(f){var a={extern:null,append:!0,width:320,height:240,mode:"callback",swffile:"jscam.swf",quality:85,debug:function(){},onCapture:function(){},onTick:function(){},onSave:function(){},onLoad:function(){}};window.webcam=a;f.fn.webcam=function(b){if("object"===typeof b)for(var d in a)void 0!==b[d]&&(a[d]=b[d]);b='<object id="XwebcamXobjectX" type="application/x-shockwave-flash" data="'+a.swffile+'" width="'+a.width+'" height="'+a.height+'"><param name="movie" value="'+a.swffile+'" /><param name="FlashVars" value="mode='+
a.mode+"&amp;quality="+a.quality+'" /><param name="allowScriptAccess" value="always" /></object>';if(null!==a.extern)f(a.extern)[a.append?"append":"html"](b);else this[a.append?"append":"html"](b);var e=3;(_register=function(){var c=document.getElementById("XwebcamXobjectX");c&&void 0!==c.capture?(a.capture=function(a){try{return c.capture(a)}catch(b){}},a.save=function(a){try{return c.save(a)}catch(b){}},a.setCamera=function(a){try{return c.setCamera(a)}catch(b){}},a.getCameraList=function(){try{return c.getCameraList()}catch(a){}},
a.pauseCamera=function(){try{return c.pauseCamera()}catch(a){}},a.resumeCamera=function(){try{return c.resumeCamera()}catch(a){}},a.onLoad()):0==e?a.debug("error","Flash movie not yet registered!"):(e--,window.setTimeout(_register,1E3*(4-e)))})()}})(jQuery);

BIN
public/faceLoginIE/jscam.swf Normal file
View File

Binary file not shown.

BIN
public/faceLoginIE/jscam_canvas_only.swf Normal file
View File

Binary file not shown.

44
src/pages/userformal/faceLogin/FrameFaceLogin.tsx Normal file
View 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
View 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
View 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;