fe_service_ebtp_frontend/public/faceLoginIE/index.html

<!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 src="jsrsasign-latest-all-min.js"></script>
        <script src="living.min.js"></script>
        <!-- <script src="excanvas.js"></script> -->
    </head>
    <body>
        <div id="webcam" style="float: left; clear: both;"></div>
        <!-- <input id="snapBtn" type="button" value="人脸识别" style="float: left; clear: both;"/>
        <img id="base64image" src=''  width="450" height="320" style="float: left; clear: both;"/> -->
        <script type="text/javascript">
            var pos = 0, ctx = null, saveCB,w = 380,h= 200, image = new Array();
            var lv = null;
            var action = 1,timer = 1000;
            var liveDetectPhoto = null;
            var canvas = document.createElement("canvas");//创建画布指定宽度和高度
            canvas.setAttribute('width', 320);
            canvas.setAttribute('height', 240);
            document.body.appendChild(canvas);
            // canvas = window.G_vmlCanvasManager.initElement(canvas);
            ctx = canvas.getContext("2d");//设置画布为2d，未来可能支持3d
	        image = ctx.getImageData(0, 0, 320, 240);//截图320*240，即整个画布作为有效区(cutx?)
            $(document).ready(function() {
                $("#webcam").webcam({
                    width: w,
                    height: h,
                    mode: "callback",
                    swffile: "jscam_canvas_only.swf", // 这里引入swf文件，注意路径
                    onTick: function(remain) {},
                    onSave: function(data) {
                        var col = data.split(";");//把data切割为数组
                        var img = image;
                        //绘制图像
                        //参数data  只是每行的数据  ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb
                        for(var i = 0; i < 320; i++) {
                            //转换为十进制
                            var tmp = parseInt(col[i]);
                            img.data[pos + 0] = (tmp >> 16) & 0xff;
                            img.data[pos + 1] = (tmp >> 8) & 0xff;
                            img.data[pos + 2] = tmp & 0xff;
                            img.data[pos + 3] = 0xff;
                            pos+= 4;
                        }
                        //当绘制320*240像素的图片时发给后端php
                        if (pos == 4 * 320 * 240) {
                            //把图像放到画布上,输出为png格式
	                        ctx.putImageData(img, 0, 0);
                            liveDetectPhoto = base64ToBlob(canvas.toDataURL("image/png"));
                            //window.parent.postMessage({"image": canvas.toDataURL("image/png")}, '*');
                            image = new Array();
                            pos = 0;
                        }
                        // image.push(data);
                        // pos += 4 * 320;
                        //post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
                        // if (pos >= 4 * 320 * 240) {
                        //     window.parent.postMessage({"image":image.join('|')}, '*');
                        //     image = new Array();
                        //     pos = 0;
                        // }
                    },
                    onCapture: function(data) {
                        webcam.save();
                        // Show a flash for example
                    },

                    debug: function(type, string) {
                        console.log('type:' + type + ',string:' + string);
                        // Write debug information to console.log() or a div
                    },

                    onLoad: function() {
                        // Page load
                    }

                });

                // $('#snapBtn').on('click', function() {
                //     webcam.capture();
                // });
                window.addEventListener('message', receiveMessageFromParent, false);

                function receiveMessageFromParent ( event ) {
                    if(event.data == 'releaseCamera'){
                        location.reload();
                    }else if(event.data = 'capture'){
                        // liveDetectStart();
                        webcam.capture();
                        console.log(1,liveDetectPhoto);
                    }
                    //$('#base64image').attr('src', 'data:image/jpg;base64,' + event.data.data);
                };

                function setLiveDetectToken() {
                    let appKey= 'nkYy3g1yT0alE8pF6a1UTC4I';
                    let appSecrect = 'L30zHpTyAtTlY7tTCpbzdxxKCQgwWIQL';
                    // Header
                    var header = {
                        typ: "JWT", // 声明类型
                        alg: "HS256" // 声明加密的算法 通常直接使用 HMAC SHA256
                    };

                    var payload = {
                        iss: appKey,
                        iat: moment().unix(),
                        exp: moment()
                            .add(29, "minutes")
                            .unix()
                    };
                    var sHeader = JSON.stringify(header);
                    var sPayload = JSON.stringify(payload);
                    var sJWT = KJUR.jws.JWS.sign("HS256", sHeader, sPayload, {
                        utf8: appSecrect,
                    });
                    return sJWT;
                }

                function liveDetectStart () {
                    liveDetectStop();
                    let _lv = new Living(null, {
                        timer: 10000,
                        action : [1,3,2],
                        token: setLiveDetectToken(),
                        proxy:'/living/api',
                        getFacePicture:function(){
                            webcam.capture();
                            return liveDetectPhoto;
                        },
                        //开始活体检测，此时token已鉴权成功
                        onDetectStart:function(){
                            //setSubmitLoading(true);
                        },
                        //每轮检测开始
                        onDetectActionStart:function(action){
                            action = action
                        },
                        //每轮检测计时
                        onDetectActionProgress:function(action,timer){
                            timer = timer;
                            window.parent.postMessage({"actionAndTimer": {action:action,timer:timer}}, 'detectStatus');
                        },
                        //每轮检测结束
                        onDetectActionFinish:function(action,data){
                            // this.clearCanvas()
                            timer = 10000;
                            console.log(data)
                        },
                        //活体检测完成
                        onDetectFinish:function(data){
                            window.parent.postMessage({"detectResult": data}, 'detectFinish');
                        }
                    });
                    //开始检测
                    _lv.start();
                    lv = _lv;
                }
                /**
                 * 停止活体检测
                 */
                function liveDetectStop (){
                    lv && lv.stop();
                }
                /**
                 * base64Url转blob
                 */
                function base64ToBlob(base64) {
                    var parts = base64.split(";base64,");
                    var contentType = parts[0].split(":")[1];
                    var raw = window.atob(parts[1]);
                    var rawLength = raw.length;
                    var uInt8Array = new Uint8Array(rawLength);
                    for (let i = 0; i < rawLength; i += 1) {
                        uInt8Array[i] = raw.charCodeAt(i);
                    }
                    return new Blob([uInt8Array], { type: contentType });
                };
            });
        </script>
    </body>
</html>
-												暂时提交专家人脸登录前端demo代码

											
										
										
											2022-08-08 10:55:27 +08:00
+								<!doctype html>
 								<html>
 								    <head>
 								        <meta charset="utf-8">
 								        <title>jQuery-webcam-master</title>
-												专家人脸整合已有登录页面

											
										
										
											2022-08-17 17:21:01 +08:00
+								        <!-- <link href="cs.css" rel="stylesheet" type="text/css"> -->
-												暂时提交专家人脸登录前端demo代码

											
										
										
											2022-08-08 10:55:27 +08:00
+								        <script src="jquery.js"></script>
 								        <script src="jquery.webcam.min.js"></script>
-												活体检测代码提交

											
										
										
											2022-10-24 17:06:53 +08:00
+								        <script src="jsrsasign-latest-all-min.js"></script>
 								        <script src="living.min.js"></script>
-												IE11下进行拍照代码，不走后台，前端将拍照后的数据通过canvas画布进行获取，目的是为了后续再准备活体检测时，每100ms进行拍照对后台服务器造成压力

											
										
										
											2022-10-18 15:00:33 +08:00
+								        <!-- <script src="excanvas.js"></script> -->
-												在IE11下通过webcam+flash+java实现摄像头拍照

											
										
										
											2022-08-11 17:29:34 +08:00
+								    </head>
 								    <body>
-												专家人脸比对demo开发完成（兼容IE11、chrome以及firefox）

											
										
										
											2022-08-16 16:03:30 +08:00
+								        <div id="webcam" style="float: left; clear: both;"></div>
-												专家人脸整合已有登录页面

											
										
										
											2022-08-17 17:21:01 +08:00
+								        <!-- <input id="snapBtn" type="button" value="人脸识别" style="float: left; clear: both;"/>
 								        <img id="base64image" src=''  width="450" height="320" style="float: left; clear: both;"/> -->
-												暂时提交专家人脸登录前端demo代码

											
										
										
											2022-08-08 10:55:27 +08:00
+								        <script type="text/javascript">
-												IE11下进行拍照代码，不走后台，前端将拍照后的数据通过canvas画布进行获取，目的是为了后续再准备活体检测时，每100ms进行拍照对后台服务器造成压力

											
										
										
											2022-10-18 15:00:33 +08:00
+								            var pos = 0, ctx = null, saveCB,w = 380,h= 200, image = new Array();
-												活体检测代码提交

											
										
										
											2022-10-24 17:06:53 +08:00
+								            var lv = null;
 								            var action = 1,timer = 1000;
 								            var liveDetectPhoto = null;
-												IE11下进行拍照代码，不走后台，前端将拍照后的数据通过canvas画布进行获取，目的是为了后续再准备活体检测时，每100ms进行拍照对后台服务器造成压力

											
										
										
											2022-10-18 15:00:33 +08:00
+								            var canvas = document.createElement("canvas");//创建画布指定宽度和高度
 								            canvas.setAttribute('width', 320);
 								            canvas.setAttribute('height', 240);
 								            document.body.appendChild(canvas);
 								            // canvas = window.G_vmlCanvasManager.initElement(canvas);
 								            ctx = canvas.getContext("2d");//设置画布为2d，未来可能支持3d
 									        image = ctx.getImageData(0, 0, 320, 240);//截图320*240，即整个画布作为有效区(cutx?)
-												在IE11下通过webcam+flash+java实现摄像头拍照

											
										
										
											2022-08-11 17:29:34 +08:00
+								            $(document).ready(function() {
 								                $("#webcam").webcam({
 								                    width: w,
 								                    height: h,
 								                    mode: "callback",
 								                    swffile: "jscam_canvas_only.swf", // 这里引入swf文件，注意路径
 								                    onTick: function(remain) {},
 								                    onSave: function(data) {
-												IE11下进行拍照代码，不走后台，前端将拍照后的数据通过canvas画布进行获取，目的是为了后续再准备活体检测时，每100ms进行拍照对后台服务器造成压力

											
										
										
											2022-10-18 15:00:33 +08:00
+								                        var col = data.split(";");//把data切割为数组
 								                        var img = image;
 								                        //绘制图像
 								                        //参数data  只是每行的数据  ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb
 								                        for(var i = 0; i < 320; i++) {
 								                            //转换为十进制
 								                            var tmp = parseInt(col[i]);
 								                            img.data[pos + 0] = (tmp >> 16) & 0xff;
 								                            img.data[pos + 1] = (tmp >> 8) & 0xff;
 								                            img.data[pos + 2] = tmp & 0xff;
 								                            img.data[pos + 3] = 0xff;
 								                            pos+= 4;
 								                        }
 								                        //当绘制320*240像素的图片时发给后端php
 								                        if (pos == 4 * 320 * 240) {
 								                            //把图像放到画布上,输出为png格式
 									                        ctx.putImageData(img, 0, 0);
-												活体检测代码提交

											
										
										
											2022-10-24 17:06:53 +08:00
+								                            liveDetectPhoto = base64ToBlob(canvas.toDataURL("image/png"));
 								                            //window.parent.postMessage({"image": canvas.toDataURL("image/png")}, '*');
-												在IE11下通过webcam+flash+java实现摄像头拍照

											
										
										
											2022-08-11 17:29:34 +08:00
+								                            image = new Array();
 								                            pos = 0;
 								                        }
-												IE11下进行拍照代码，不走后台，前端将拍照后的数据通过canvas画布进行获取，目的是为了后续再准备活体检测时，每100ms进行拍照对后台服务器造成压力

											
										
										
											2022-10-18 15:00:33 +08:00
+								                        // image.push(data);
 								                        // pos += 4 * 320;
 								                        //post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
 								                        // if (pos >= 4 * 320 * 240) {
 								                        //     window.parent.postMessage({"image":image.join('|')}, '*');
 								                        //     image = new Array();
 								                        //     pos = 0;
 								                        // }
-												在IE11下通过webcam+flash+java实现摄像头拍照

											
										
										
											2022-08-11 17:29:34 +08:00
+								                    },
-												IE11下进行拍照代码，不走后台，前端将拍照后的数据通过canvas画布进行获取，目的是为了后续再准备活体检测时，每100ms进行拍照对后台服务器造成压力

											
										
										
											2022-10-18 15:00:33 +08:00
+								                    onCapture: function(data) {
-												在IE11下通过webcam+flash+java实现摄像头拍照

											
										
										
											2022-08-11 17:29:34 +08:00
+								                        webcam.save();
 								                        // Show a flash for example
 								                    },
 								                    debug: function(type, string) {
 								                        console.log('type:' + type + ',string:' + string);
 								                        // Write debug information to console.log() or a div
 								                    },
 								                    onLoad: function() {
 								                        // Page load
-												暂时提交专家人脸登录前端demo代码

											
										
										
											2022-08-08 10:55:27 +08:00
+								                    }
-												在IE11下通过webcam+flash+java实现摄像头拍照

											
										
										
											2022-08-11 17:29:34 +08:00
+								                });
-												专家人脸整合已有登录页面

											
										
										
											2022-08-17 17:21:01 +08:00
+								                // $('#snapBtn').on('click', function() {
 								                //     webcam.capture();
 								                // });
-												活体检测代码提交

											
										
										
											2022-10-24 17:06:53 +08:00
+								                window.addEventListener('message', receiveMessageFromParent, false);
-												将IE拍照代码迁移到tsx

											
										
										
											2022-08-12 10:24:41 +08:00
 								                function receiveMessageFromParent ( event ) {
-												专家人脸登录开发完成

											
										
										
											2022-09-07 16:20:59 +08:00
+								                    if(event.data == 'releaseCamera'){
 								                        location.reload();
 								                    }else if(event.data = 'capture'){
-												活体检测代码提交

											
										
										
											2022-10-24 17:06:53 +08:00
+								                        // liveDetectStart();
-												专家人脸登录开发完成

											
										
										
											2022-09-07 16:20:59 +08:00
+								                        webcam.capture();
-												活体检测代码提交

											
										
										
											2022-10-24 17:06:53 +08:00
+								                        console.log(1,liveDetectPhoto);
-												专家人脸登录开发完成

											
										
										
											2022-09-07 16:20:59 +08:00
+								                    }
-												专家人脸整合已有登录页面

											
										
										
											2022-08-17 17:21:01 +08:00
+								                    //$('#base64image').attr('src', 'data:image/jpg;base64,' + event.data.data);
-												将IE拍照代码迁移到tsx

											
										
										
											2022-08-12 10:24:41 +08:00
+								                };
-												活体检测代码提交

											
										
										
											2022-10-24 17:06:53 +08:00
+								                function setLiveDetectToken() {
 								                    let appKey= 'nkYy3g1yT0alE8pF6a1UTC4I';
 								                    let appSecrect = 'L30zHpTyAtTlY7tTCpbzdxxKCQgwWIQL';
 								                    // Header
 								                    var header = {
 								                        typ: "JWT", // 声明类型
 								                        alg: "HS256" // 声明加密的算法 通常直接使用 HMAC SHA256
 								                    };
 								                    var payload = {
 								                        iss: appKey,
 								                        iat: moment().unix(),
 								                        exp: moment()
 								                            .add(29, "minutes")
 								                            .unix()
 								                    };
 								                    var sHeader = JSON.stringify(header);
 								                    var sPayload = JSON.stringify(payload);
 								                    var sJWT = KJUR.jws.JWS.sign("HS256", sHeader, sPayload, {
 								                        utf8: appSecrect,
 								                    });
 								                    return sJWT;
 								                }
 								                function liveDetectStart () {
 								                    liveDetectStop();
 								                    let _lv = new Living(null, {
 								                        timer: 10000,
 								                        action : [1,3,2],
 								                        token: setLiveDetectToken(),
 								                        proxy:'/living/api',
 								                        getFacePicture:function(){
 								                            webcam.capture();
 								                            return liveDetectPhoto;
 								                        },
 								                        //开始活体检测，此时token已鉴权成功
 								                        onDetectStart:function(){
 								                            //setSubmitLoading(true);
 								                        },
 								                        //每轮检测开始
 								                        onDetectActionStart:function(action){
 								                            action = action
 								                        },
 								                        //每轮检测计时
 								                        onDetectActionProgress:function(action,timer){
 								                            timer = timer;
 								                            window.parent.postMessage({"actionAndTimer": {action:action,timer:timer}}, 'detectStatus');
 								                        },
 								                        //每轮检测结束
 								                        onDetectActionFinish:function(action,data){
 								                            // this.clearCanvas()
 								                            timer = 10000;
 								                            console.log(data)
 								                        },
 								                        //活体检测完成
 								                        onDetectFinish:function(data){
 								                            window.parent.postMessage({"detectResult": data}, 'detectFinish');
 								                        }
 								                    });
 								                    //开始检测
 								                    _lv.start();
 								                    lv = _lv;
 								                }
 								                /**
 								                 * 停止活体检测
 								                 */
 								                function liveDetectStop (){
 								                    lv && lv.stop();
 								                }
 								                /**
 								                 * base64Url转blob
 								                 */
 								                function base64ToBlob(base64) {
 								                    var parts = base64.split(";base64,");
 								                    var contentType = parts[0].split(":")[1];
 								                    var raw = window.atob(parts[1]);
 								                    var rawLength = raw.length;
 								                    var uInt8Array = new Uint8Array(rawLength);
 								                    for (let i = 0; i < rawLength; i += 1) {
 								                        uInt8Array[i] = raw.charCodeAt(i);
 								                    }
 								                    return new Blob([uInt8Array], { type: contentType });
 								                };
-												在IE11下通过webcam+flash+java实现摄像头拍照

											
										
										
											2022-08-11 17:29:34 +08:00
+								            });
-												暂时提交专家人脸登录前端demo代码

											
										
										
											2022-08-08 10:55:27 +08:00
+								        </script>
 								    </body>
 								</html>