H5平台端结合虹软实现人脸识别登录功能

最新推荐文章于 2024-06-28 23:20:38 发布
最新推荐文章于 2024-06-28 23:20:38 发布
阅读量1k 收藏 1
点赞数 1
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuxinfuchen/article/details/130361444
版权

前端页面人脸识别页面

<div  id="face_login"  >
    <div  class="body-bg">
        <div class="WgciCg LCN0VA"></div>
        <h2 class="scanTip">{{scanTip}}</h2>
        <div v-show="showContainer" class="take-photo">
            <video ref="refVideo" id="video" width="500" height="400" preload autoplay loop muted></video>
            <canvas ref="refCanvas" id="canvas" width="500" height="400"></canvas>
        </div>
    </div>
</div>

引入前端识别js

<script src="../static/face/tracking-min.js" th:src="@{/face/tracking-min.js}"></script>
<script src="../static/face/face-min.js" th:src="@{/face/face-min.js}"></script>

js调取摄像头

playVideo() {
    this.getUserMedia({
        video: {
            width: 500, height: 400, facingMode: "user"
        }     /* 前置优先 */
    }, this.success, this.error)

    this.video = document.getElementById('video')
    this.canvas = document.getElementById('canvas')
    this.context = this.canvas.getContext('2d')
    // eslint-disable-next-line no-undef
    this.tracker = new tracking.ObjectTracker('face')
    this.tracker.setInitialScale(4)
    this.tracker.setStepSize(2)
    this.tracker.setEdgesDensity(0.1)

    // eslint-disable-next-line no-undef
    tracking.track('#video', this.tracker, {camera: true})

    this.tracker.on('track', this.handleTracked)
},

前端代码如下

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>登录XXXXXXXXXXXXXXXX系统</title>
    <meta name="description" content="若依后台管理框架">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.7.5}" rel="stylesheet"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>
</head>
<body class="signin">

    <div class="signinpanel">
        <h1>XXXXXXXXXXXXXXXX系统</h1>
        <div class="row">
            <div class="col-sm-7">
                <div  id="face_login"  >
                    <div  class="body-bg">
                        <div class="WgciCg LCN0VA"></div>
                        <h2 class="scanTip">{{scanTip}}</h2>
                        <div v-show="showContainer" class="take-photo">
                            <video ref="refVideo" id="video" width="500" height="400" preload autoplay loop muted></video>
                            <canvas ref="refCanvas" id="canvas" width="500" height="400"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <form id="signupForm" autocomplete="off">
                    <h4 class="no-margins">用户登录：</h4>
                    <div class="panel-body">
                        <input type="text"     name="username" class="form-control uname"     placeholder="用户名"     />
                        <input type="password" name="password" class="form-control pword"     placeholder="密码"   />
                        <div class="row m-t" th:if="${captchaEnabled==true}">
                            <div class="col-xs-6">
                                <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
                            </div>
                            <div class="col-xs-6">
                                <a href="javascript:void(0);" title="点击更换验证码">
                                    <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
                                </a>
                            </div>
                        </div>
                    </div>

                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍候...">登录</button>
                    <button class="btn btn-success btn-block" id="btnSubmit1" data-loading="正在验证登录，请稍候..." οnclick="loginWay('camera')" >扫脸登陆</button>
                </form>
            </div>
        </div>
    </div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>

<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.7.5}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>

<script src="../static/face/tracking-min.js" th:src="@{/face/tracking-min.js}"></script>
<script src="../static/face/face-min.js" th:src="@{/face/face-min.js}"></script>
<script src="../static/face/stats.min.js" th:src="@{/face/stats.min.js}" ></script>
<script src="../static/face/vue.min.js" th:src="@{/face/vue.min.js}" type="text/javascript"></script>
<script src="../static/face/axios.min.js" th:src="@{/face/axios.min.js}" type="text/javascript"></script>
<style>
    h1 {
        font-size: 40px;
        margin-top: 100px;
        text-align: center;
    }
    .col-sm-5 {
        width: 43.666667%;
        left: 28%;
    }
    .body-bg {
        position: fixed;
        top: 12%;
        left: 18%;
        width: 18%;
        height: 50%;
        z-index: -10;
        zoom: 1;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }

    .filmvideo {
        margin: 200px auto;
        width: 600px;
        height: 400px;
        display: block;
        clear: both;
    }

    .take-photo {
        position: relative;
        z-index: 99999;
    }

    .title {
        text-align: center;
        color: white;
        margin: -50px auto;
        font-size: 18px;
    }

    .close {
        width: 0.8rem;
        height: 0.8rem;
        text-align: center;
        margin: -50px auto;
    }

    .rect {
        border: 2px solid #0aeb08;
        position: fixed;
        z-index: 3;
    }

    .imgpre {
        width: 500px;
        height: 400px;
        display: block;
        clear: both;
        position: absolute;
        margin: 0px auto;
        left: 0;
        right: 0;
        z-index: 7;
        border-radius: 10px;
    }

    video, canvas {
        width: 500px;
        height: 400px;
        margin: 0px auto;
        position: absolute;
        left: 0;
        right: 0;
        border-radius: 10px;
    }

    .scanTip {
        padding-top: 100px;
        padding-bottom: 40px;
        position: relative;
        z-index: 99999;
        text-align: center;
        color: white;
        margin: 0px auto;
        font-size: 18px;
    }

    .WgciCg {
        backdrop-filter: blur(2px);
        background: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4), rgba(0, 0, 0, .8));
        min-height: 100%;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

</style>
    <script>

        const app = new Vue({
            el: "#face_login",
            data() {
                return {
                    showContainer: true,   // 显示
                    tracker: null,
                    tipFlag: false,         // 提示用户已经检测到
                    flag: false,            // 判断是否已经拍照
                    context: null,          // canvas上下文
                    removePhotoID: null,    // 停止转换图片
                    scanTip: '正在调取摄像头...', // 提示文字
                    imgUrl: '',              // base64格式图片
                    canvas: null,
                    video: null,
                    streamIns: null,      // 视频流
                    isLoading: false,
                    userData: ''
                }
            },
            mounted() {
                this.playVideo()
            },
            methods: {
                // 访问用户媒体设备
                getUserMedia(constrains, success, error) {
                    if (navigator.mediaDevices.getUserMedia) {
                        // 最新标准API
                        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
                    } else if (navigator.webkitGetUserMedia) {
                        // webkit内核浏览器
                        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
                    } else if (navigator.mozGetUserMedia) {
                        // Firefox浏览器
                        // eslint-disable-next-line no-undef
                        navagator.mozGetUserMedia(constrains).then(success).catch(error);
                    } else if (navigator.getUserMedia) {
                        // 旧版API
                        navigator.getUserMedia(constrains).then(success).catch(error);
                    } else {
                        this.scanTip = "你的浏览器不支持访问用户媒体设备"
                    }
                },
                success(stream) {
                    this.streamIns = stream
                    // webkit内核浏览器
                    this.URL = window.URL || window.webkitURL
                    if ("srcObject" in this.$refs.refVideo) {
                        this.$refs.refVideo.srcObject = stream
                    } else {
                        this.$refs.refVideo.src = this.URL.createObjectURL(stream)
                    }
                    this.$refs.refVideo.onloadedmetadata = e => {
                        this.$refs.refVideo.play()
                    }
                },
                error(e) {
                    this.scanTip = "访问用户媒体失败" + e.name + "," + e.message
                },

                playVideo() {
                    this.getUserMedia({
                        video: {
                            width: 500, height: 400, facingMode: "user"
                        }     /* 前置优先 */
                    }, this.success, this.error)

                    this.video = document.getElementById('video')
                    this.canvas = document.getElementById('canvas')
                    this.context = this.canvas.getContext('2d')
                    // eslint-disable-next-line no-undef
                    this.tracker = new tracking.ObjectTracker('face')
                    this.tracker.setInitialScale(4)
                    this.tracker.setStepSize(2)
                    this.tracker.setEdgesDensity(0.1)

                    // eslint-disable-next-line no-undef
                    tracking.track('#video', this.tracker, {camera: true})

                    this.tracker.on('track', this.handleTracked)
                },

                handleTracked(event) {
                    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
                    if (event.data.length === 0) {
                        this.scanTip = '未识别到人脸'
                    } else {
                        if (!this.tipFlag) {
                            this.scanTip = '识别到人脸，请保持当前姿势~'
                        }
                        // 1秒后拍照，仅拍一次
                        if (!this.flag) {
                            this.scanTip = '拍照中...'
                            this.flag = true
                            this.removePhotoID = setTimeout(() => {
                                    this.tackPhoto()
                                    this.tipFlag = true
                                },
                                2000
                            )
                        }
                        event.data.forEach(this.plot)
                    }
                },

                plot(rect) {
                    this.context.strokeStyle = '#eb652e'
                    this.context.strokeRect(rect.x, rect.y, rect.width, rect.height)
                    this.context.font = '11px Helvetica'
                    this.context.fillStyle = '#fff'
                    this.context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11)
                    this.context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22)
                },

                // 拍照
                tackPhoto() {
                    this.context.drawImage(this.$refs.refVideo, 0, 0, 500, 400)
                    // 保存为base64格式
                    this.imgUrl = this.saveAsPNG(this.$refs.refCanvas)
                    var formData = new FormData()
                    formData.append('file', this.imgUrl)
                    axios({
                        method: 'post',
                        url: '/detectFaces',
                        data: formData,
                    }).then(function (response) {
                        if (response.data.code==0) {
                            window.location.href = "/index"
                        } else {
                            window.location.href = "/loginFace"
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                    // detectFaces(formData).then(res => {
                    //     this.isLoading = true
                    //     if (res.code === 200) {
                    //         alert(111)
                    //         // 登录成功保存token
                    //         this.userData = res.data
                    //     }
                    // }).catch(err => {
                    //     console.log(err);
                    // })

                    this.close()
                    this.scanTip = '登录中，请稍等~'
                    this.isLoading = true
                },

                // 保存为png,base64格式图片
                saveAsPNG(c) {
                    return c.toDataURL('image/png', 0.3)
                },

                // 关闭并清理资源
                close() {
                    this.video.srcObject.getTracks()[0].stop()
                    this.flag = false
                    this.tipFlag = false
                    this.showContainer = false
                    this.tracker && this.tracker.removeListener('track', this.handleTracked) && tracking.track('#video', this.tracker, {camera: false})
                    this.tracker = null
                    this.context = null
                    this.scanTip = ''
                    clearTimeout(this.removePhotoID)
                    if (this.streamIns) {
                        this.streamIns.enabled = false
                        this.streamIns.getTracks()[0].stop()
                        this.streamIns.getVideoTracks()[0].stop()
                    }
                    this.streamIns = null
                },
            }
        })
    </script>
</body>
</html>

后台代码如有需要作者将在下篇文章进行更新

wuxinfuchen
关注
H5人脸识别+活体检测（眨眼&摇头）
05-28
1.眨眼和摇头 2.使用的是clmtrackr.js 3.眨眼或摇头成功校验后请重新刷新页面或自行修改初始化逻辑
Android开发人脸识别登录功能
08-25
Android开发人脸识别登录功能是指使用Android平台开发的应用程序中实现人脸识别登录功能，通过虹软的人脸识别算法来实现人脸识别登录。下面是相关知识点的总结： 1. 人脸识别登录的概念：人脸识别登录是指使用人脸...
H5端网页调用微信的人脸识别接口
最新发布
m0_68956554的博客
06-28 585
完成wx.config在wx.ready里面即可调用。就是人脸识别的接口API。
Javascript调用openCV.js网页中使用摄像头进行人脸设别
allway2的博客
01-21 3107
GitHub - rajeshpachaikani/face-detection-opencv-js: Simple demonstration of utilising OpenCV.js for face recognitionhttps://github.com/rajeshpachaikani/face-detection-opencv-js index.html <html lang="en"> <head> <meta charset="UTF-8"&
人脸识别H5页面（打开指定摄像头navigator，绘制人脸框tracking.js）
m0_56930676的博客
05-11 3066
【代码】人脸识别H5页面（打开指定摄像头navigator，绘制人脸框tracking.js）
H5 调用人脸识别
m0_69576888的博客
10-26 660
其实这个东西就是调用户的摄像头，之后把录制的每一帧都加到 canvas 里面，再利用 标签回显出来，以下是简单实例。之后 当按钮点击时 开始录制 我这里设置了 3秒后自动停止录制 ， 并监听录制结束之后的一系列操作，也就是 ： video:{width:200,height:200} 这句代码。注意一下这个分辨率 如果你想控制最后录制完视频的大小 这个很关键。第二步 获取用户的摄像头 （ 需要用户手动确认权限 ）JavaScript 首先，找下元素。保证你的 HTML 有以下结构。
VUE项目-H5端人脸识别功能实现
Jack, what else can you do besides holding your little darling?
05-30 7091
1.人脸捕捉技术使用的tracking.js，关键是要理解它的运作原理和一下参数配置。2.因为要调用手机媒体设备，兼容性问题是大问题，特别是苹果手机的问题，往往不知道如何下手，需要有丰富的开发经验和各种曲线救国的开发思想。
Html5调用手机摄像头并实现人脸识别
热门推荐
大前端程序员的自我修养
12-03 2万+
在混合App开发中，如何在Web中调用本地摄像头并实现人脸识别功能？本文给出了一个解决方案，并给出了该方案的核心代码，其中前端使用vue，该方案适配了Android手机。
java引用虹软sdk，实现完整人脸识别（demo）
09-11
* 注：libarcsoft_face.dll(so)、libarcsoft_face_engine.dll(so)、libarcsoft_face_engine_jni.dll(so)、app-id、sdk-key可以到虹软官网 http://ai.arcsoft.com.cn/ 免费申请下载 * 本地配置：
基于HTML5的人脸识别技术
03-21
HTML5 + JavaScript 技术实现的人脸识别，目前仅适用于 Chrome 浏览器，首先需要在地址栏输入 about:flags ，然后找到“启用 MediaStream” 这一项，点击“启用” 后重启 Chrome 浏览器
活体检测H5文档及示例代码--人脸识别
03-07
活体检测H5简介 人脸识别 微信官方Demo 微信公众平台（视频接口）开发编程文档
Html5调用手机摄像头并实现人脸识别的实现
12-12
需求 混合App开发，原生壳子+webApp，在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容，同时可以手动拍照并进行人脸识别，将识别结果显示在网页上。 技术栈 vue、Html5、video标签、Android、IOS、百度AI 分析 1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能 2、video标签显示摄像头内容 3、canvas标签获取图片 4、将图像上传服务器，通过百度AI识别图片 5、web显示识别结果 核心代码 1、调用系统原生摄像头功能并使用video标签显示html: <video
人脸识别示例demo,后台可调用摄像头录入人脸库
01-25
自己做的人脸识别程序,调用的百度人脸识别接口,后台可调用摄像头录入人脸库,前台进行人脸比对.
虹软人脸识别C#3.0版本
01-04
虹软人脸识别C#3.0版本是一款基于C#编程语言的人脸识别开发工具，它集成了虹软（ArcSoft）的先进人脸识别算法，为开发者提供高效、精准的面部特征检测和识别功能。这款软件适用于各种应用场景，如安全监控、门禁系统...
java+虹软人脸识别检测
06-06
在本文中，我们将深入探讨如何使用Java结合虹软的人脸识别技术进行图像处理和面部检测。这个项目涉及前端上传照片，然后由后端Java服务进行分析，确认照片中是否存在人脸。 首先，我们要理解人脸检测的基本概念。...
html5人脸登录,介绍 Web Face ID，如何使用 HTML5，Go 和 Facebox 进行人脸识别
weixin_35476730的博客
06-07 374
首发于：https://studygolang.com/articles/12299使用你的脸授权解锁你的手机正在成为一种趋势，但是在 Web 上，这种情况看到的并不多，也许是因为这种功能对 Web 来说不太重要，不足以被实现。那么，仅通过 HTML5，Javascript 和一些 Go 语句，能够实现人脸识别的功能么？答案是肯定的，我使用 Facebox 在一个小时完成了这个工作，并将 代码作为...
QT+虹软实现人脸识别
10-31
QT+虹软可以实现人脸识别，具体实现方法如下： 1.首先需要安装QT开发环境和虹软SDK。 2.在QT中创建一个新项目，添加虹软SDK的头文件和库文件。 3.编写代码实现人脸检测和识别功能，可以使用虹软提供的人脸检测SDK。 4.将检测到的人脸图像与已知的人脸图像进行比对，可以使用虹软提供的人脸识别SDK。 5.将识别结果显示在QT界面上。 需要注意的是，为了实现人脸识别功能，需要使用到MySQL和OpenCV等三方库，同时需要对图像进行处理和分析，因此需要具备一定的编程和图像处理基础。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值