java 百度活体验证测试以及前端页面

最新推荐文章于 2024-06-12 18:08:15 发布
最新推荐文章于 2024-06-12 18:08:15 发布
阅读量1k 收藏 3
点赞数
分类专栏： java 文章标签： java 百度 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39069718/article/details/121271661
版权 
import cn.hutool.json.JSONUtil;
import com.alibaba.fastjson.JSONObject;
import com.bfdb.entity.H5faceliving.H5FacelivingRoot;
import com.bfdb.untils.HttpClientUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import sun.misc.BASE64Encoder;

import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

/**
 * @author l
 * @version 1.0
 * @date 2021/11/10 14:16 周三
测试
 */
@RestController
public class H5FaceLivingController  extends AbstractController{

    /**
     * 视频活体识别接⼝
     * @param callback
     * @return
     */
    @RequestMapping(value = "/H5faceLiving", method = RequestMethod.GET)
    public  String H5faceLiving(@RequestParam("callback") String callback) {
        Map<String, Object> map = new HashMap<>(5);
        String url="http://ip:8300/face-api/face/session?type=1&min_code_length=1&max_code_length=3";
        JSONObject jsonObject = HttpClientUtils.httpGet(url);
        H5FacelivingRoot h5FacelivingRoot = JSONUtil.toBean(jsonObject.toJSONString(), H5FacelivingRoot.class);
        map.put( "err_no", h5FacelivingRoot.getErr_no() );
        map.put( "err_msg", h5FacelivingRoot.getErr_msg());
        map.put( "data", h5FacelivingRoot.getResult());
        return callback+"("+JSONObject.toJSONString(map)+")";
    }
    /**
     * 视频活体检测
     * @return
     */
    @RequestMapping(value = "/videoDetection", method = RequestMethod.POST)
    public  Map<String, String>  videoDetection(HttpServletRequest request) {
        Map<String, String> map = new HashMap<>(5);
        String url="http://ip:8300/face-api/face/liveness";
        Map<String, String> paramMap=new HashMap<>(3);
        MultipartFile file =null;
        BASE64Encoder base64Encoder =null;
        try {
            //接收会话id
            String session_id = request.getParameter("session_id");
            //获取视频文件
            MultipartHttpServletRequest mureq = (MultipartHttpServletRequest) request;
            Map<String, MultipartFile> files = mureq.getFileMap();
            if (files != null &&files.size()> 0) {
                Map.Entry<String, MultipartFile> f = files.entrySet().iterator().next();
                file = f.getValue();
            }
            //将MultipartFile转成base64视频流
            base64Encoder =new BASE64Encoder();
            String base64EncoderImg = base64Encoder.encode(file.getBytes());
            //请求视频活体检测参数
            paramMap.put("session_id", session_id);
            paramMap.put("type_identify","action");
            paramMap.put("video_base64", base64EncoderImg);
            System.out.println("session_id=="+session_id);
            //请求
            JSONObject jsonObject = HttpClientUtils.httpPostFrom(url,paramMap,null);
            String err_no = jsonObject.getString("err_no");
            String err_msg = jsonObject.getString("err_msg");
            System.out.println("err_no=="+err_no);
            System.out.println("err_msg=="+err_msg);
            map.put("err_no", err_no);
            map.put("err_msg", err_msg);
        }catch (IOException e){
            logger.error("视频活体检测失败："+e.getMessage());
        }
        return map;
    }



}

<!DOCTYPE html>
<html>

<head>
    <title>video recoder</title>
    <script src="/fileSaver.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.css">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<style>
    body {
        background-color: #EFEDEF;
    }

    video {
        aspect-ratio: auto !important;
        object-fit: fill !important;
        border-radius: 50%;
    }

    header.bui-bar,
    header .bui-bar {
        background-color: white;

    }

    header.bui-bar .bui-bar-main,
    header .bui-bar .bui-bar-main {
        color: black;
    }

    .peopleimg {
        margin-top: 10%;
        display: flex;
        justify-content: center;

    }

    .info {
        background-color: #4DC3D3;
        border: #4DC3D3;
        margin-top: 6%;
        width: 90% !important;
    }

    .experiment {
        display: flex;
        justify-content: space-around;
    }

    #close {

        font-family: PingFang SC;
        font-weight: 500;
        line-height: 45px;
        color: #FFFFFF;
        opacity: 1;
        display: inline-block;
        line-height: 3rem;

    }

    #faceInfoH5 {

        font-family: PingFang SC;
        font-weight: 500;
        line-height: 45px;
        color: #ff0202;
        opacity: 1;
        display: flex;
        justify-content: center;
        /* display: inline-block; */
        line-height: 3rem;

    }

    #save-recording {
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 45px;
        color: #FFFFFF;
        opacity: 1;
        display: inline-block;
        line-height: 3rem;
    }

    #Recording {
        display: inline-block;
        width: 3rem;
        height: 3rem;
        border: 0.2rem solid #ffffff;
        border-radius: 50%;
    }

    #Recordingbox {
        width: 2rem;
        height: 2rem;
        background: #4DC3D3;
        border-radius: 50%;
        opacity: 1;
        margin: auto;
        margin-top: 10%;
    }
</style>

<body>
    <header class="bui-bar">
        <div class="bui-bar-left bui-bar-text">
            <a class="bui-btn"><i class="icon-back" style="color: black;"></i>返回</a>
        </div>
        <div class="bui-bar-main">人脸录制</div>
        <div class="bui-bar-right bui-bar-text">

        </div>
    </header>
    <div class="peopleimg">
        <img src="/people.png" style="width: 8rem;height: 8rem;">
    </div>
    <div class="bui-btn info" id="openCamera">打开摄像头</div>
    <article class="articlebox"
        style="width:400px;height:100%; background-color: black; margin:0 auto; display: none; ">
        <span id="faceInfoH5"></span>
        <section class="experiment"
            style="width:240px; height:240px;border-radius:50%;background-color: white; margin:50px auto; margin-top: 20px;">
            <div id="videos-container" style="width:240px; height:240px;">
            </div>
        </section>
        <section class="experiment" style="text-align:center;border:none; margin-top:20px;">
            <!-- <span id="close">取消</span> -->
            <!-- <span id="faceInfoH5"></span> -->
            <div id="Recording">
                <div id="Recordingbox">
                    <div id="start-recording" style="position: relative;top: 36%;"><span id="startcordtext">开始录制</span>
                    </div>
                </div>
            </div>
            <!-- <span id="save-recording">保存</span> -->
            <!-- <button id="start-recording" disabled>开始录制</button> -->
            <!-- <button id="save-recording" disabled>保存</button> -->
            <!--<a href="javascript:void(0)" onclick="send()">发送</a>-->
        </section>
    </article>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script>
        // bui.ready(function () {
        layui.use(['layer', 'form'], function () {
            
            var layer = layui.layer;
            var $ = layui.jquery;
         
            var mediaStream;
            var recorderFile;
            var stopRecordCallback;
            var session_id;
            // var baseUrldd = 'http://10.108.234.253:8300';
            // $(".info").click(function (e) {
            //     e.preventDefault();
            // });
            var openBtn = document.getElementById("openCamera");
            var startBtn = document.getElementById("start-recording");
            // var saveBtn = document.getElementById("save-recording");
            openBtn.onclick = function () {
                $(this).hide()
                // .style.display = 'none';
                // .style.display = 'block';
                $(".peopleimg").hide();
                $(".articlebox").show();
                this.disabled = true;
                startBtn.disabled = false;
                openCamera();
            };
            startBtn.onclick = function () {
                this.disabled = true;
                $("#startcordtext").text("录制中")
                $("#startcordtext").css("color", "#ff7300")
                startRecord();
            };
            // saveBtn.onclick = function () {
            //     saver();
            //     this.disabled = true;
            //     // alert('Drop WebM file on Chrome or Firefox. Both can play entire file. VLC player or other players may not work.');
            // };
            var mediaRecorder;
            var videosContainer = document.getElementById('videos-container');
            function openCamera() {
                //请求视频活体识别接⼝   
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:12667/H5faceLiving",
                    dataType: "jsonp",//数据类型为jsonp  
                    jsonp: "tt",//服务端用于接收callback调用的function名的参数
                    success: function (data) {
                        var code, loveArr, msg0;
                        console.log(data);
                        if (data.err_no === 0) {
                            //返回值的代表所需动作和动作顺序。0:眨眼 2:右转 3:左 转 4:抬头 5:低头
                            code = data.data.code;
                            //会话ID
                            session_id = data.data.session_id;
                            //切割
                            loveArr = code.split('');
                            // console.log(loveArr);
                            //【0:眨眼 2:右转 3:左转 4:抬头 5:低头】
                            for (let i = 0; i < loveArr.length; i++) {
                                if (loveArr[i] === '0') {
                                    msg0 = '眨眼';
                                    console.log(msg0);
                                    $("#faceInfoH5").append(msg0 + " ");
                                } else if (loveArr[i] === '2') {
                                    msg0 = '右转';
                                    console.log(msg0);
                                    $("#faceInfoH5").append(msg0 + " ");
                                } else if (loveArr[i] === '3') {
                                    msg0 = '左转';
                                    console.log(msg0);
                                    $("#faceInfoH5").append(msg0 + " ");
                                } else if (loveArr[i] === '4') {
                                    msg0 = '抬头';
                                    console.log(msg0);
                                    $("#faceInfoH5").append(msg0 + " ");
                                } else if (loveArr[i] === '5') {
                                    msg0 = '低头';
                                    console.log(msg0);
                                    $("#faceInfoH5").append(msg0 + " ");
                                }
                            };
                        } else {
                            alert('调用活体接口失败');
                        }

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);

                    }
                });
                var len = videosContainer.childNodes.length;
                for (var i = 0; i < len; i++) {
                    videosContainer.removeChild(videosContainer.childNodes[i]);
                }
                var video = document.createElement('video');
                var videoWidth = 240;
                var videoHeight = 240;
                video.controls = false;
                video.muted = true;
                video.width = videoWidth;
                video.height = videoHeight;
                MediaUtils.getUserMedia(true, false, function (err, stream) {
                    if (err) {
                        throw err;
                    } else {
                        // 通过 MediaRecorder 记录获取到的媒体流
                        console.log();
                        mediaRecorder = new MediaRecorder(stream);
                        mediaStream = stream;
                        var chunks = [], startTime = 0;
                        video.srcObject = stream;
                        video.play();
                        videosContainer.appendChild(video);
                        mediaRecorder.ondataavailable = function (e) {
                            mediaRecorder.blobs.push(e.data);
                            chunks.push(e.data);
                        };
                        mediaRecorder.blobs = [];
                        mediaRecorder.onstop = function (e) {
                            recorderFile = new Blob(chunks, { 'type': mediaRecorder.mimeType });
                            chunks = [];
                            if (null != stopRecordCallback) {
                                stopRecordCallback();
                            }
                        };
                    }
                });
            }
            function tt(data) {
                 console.log(data);
            }
            // 停止录制
            function stopRecord(callback) {
                stopRecordCallback = callback;
                // 终止录制器
                mediaRecorder.stop();
                // 关闭媒体流
                MediaUtils.closeStream(mediaStream);
            }
            var MediaUtils = {
                /**
                * 获取用户媒体设备(处理兼容的问题)
                * @param videoEnable {boolean} - 是否启用摄像头
                * @param audioEnable {boolean} - 是否启用麦克风
                * @param callback {Function} - 处理回调
                */
                getUserMedia: function (videoEnable, audioEnable, callback) {
                    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
                        || navigator.msGetUserMedia || window.getUserMedia;
                    var constraints = { video: videoEnable, audio: audioEnable };
                    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                        navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                            callback(false, stream);
                        })['catch'](function (err) {
                            callback(err);
                        });
                    } else if (navigator.getUserMedia) {
                        navigator.getUserMedia(constraints, function (stream) {
                            callback(false, stream);
                        }, function (err) {
                            callback(err);
                        });
                    } else {
                        callback(new Error('Not support userMedia'));
                    }
                },
                /**
                * 关闭媒体流
                * @param stream {MediaStream} - 需要关闭的流
                */
                closeStream: function (stream) {
                    if (typeof stream.stop === 'function') {
                        stream.stop();
                    }
                    else {
                        let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];
                        for (let i = 0; i < trackList.length; i++) {
                            let tracks = trackList[i];
                            if (tracks && tracks.length > 0) {
                                for (let j = 0; j < tracks.length; j++) {
                                    let track = tracks[j];
                                    if (typeof track.stop === 'function') {
                                        track.stop();
                                    }
                                }
                            }
                        }
                    }
                }
            };
            function startRecord() {
                // debugger
                mediaRecorder.start();
                setTimeout(function () {
                    // 结束
                    stopRecord(function () {
                        // alert("录制成功!");
                        openBtn.disabled = false;
                        // saveBtn.disabled = false;
                        // send();
                        saver();
                    });
                }, 5000);
            }
            function saver() {
                var file = new File([recorderFile], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
                    type: 'video/mp4'
                });
                // console.log(file);
                //定义一个formData，便于传输file参数 
                //视频活体检测
                var formData = new FormData();
                formData.append('file', file);
                formData.append('session_id', session_id);
                $("#startcordtext").text("正在检测中")
                $("#startcordtext").css("color", "red")
                $("#startcordtext").css("font-weight", "600")

                $.ajax({
                    url: "http://127.0.0.1:12667/videoDetection",
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.err_no === '0') {
                            //    alert("活体认证成功");
                               layer.msg("活体认证成功")
                         
                        } else {
                            layer.msg("活体认证失败" + "," + data.err_msg)
                     
                            // alert("活体认证失败"+","+data.err_msg);
                        }
                    },
                    error: function (res) {
                        console.log(res);

                    }
                });
                // saveAs(file);
            }
            function send() {
                var file = new File([recorderFile], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
                    type: 'video/mp4'
                });
                var data = new FormData();
                data.append("username", "test");
                data.append("userfile", file);
                var req = new XMLHttpRequest();
                req.open("POST", "com.spinsoft.bip.frame.utils.image.saveMp4.biz.ext");
                req.send(data);
            }
        });
    </script>
</body>

</html>

南大白
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
pc端调用电脑摄像头及麦克风完成录像或录音并实现回放和上传服务器
Femi的博客欢迎大家
05-08 1617
首先定义获取媒体设备的方法 var MediaUtils = { /** * 获取用户媒体设备(处理兼容的问题) * @param videoEnable {boolean} - 是否启用摄像头 * @param audioEnable {boolean} - 是否启用麦克风 * @param callback {Function} - 处理回调 */ getUserMedia: function (videoEnable, audioEnable, callbac
springboot毕设项目社区“希望之星”计划服务平台bzju1（java+VUE+Mybatis+Maven+Mysql）
计算机程序设计
08-17 2238
Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。springboot毕设项目社区“希望之星”计划服务平台bzju1（java+VUE+Mybatis+Maven+Mysql）若包含，则为maven项目，否则为非maven项目。Springboot + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。...
HTML5调用摄像头录制视频
細水、長流√的专栏
06-19 1652
HTML5调用摄像头录制视频 不支持ie，ie下不支持webrtc，无法使用navigator.getUserMedia调用摄像头 <!DOCTYPE html> <html> <head> <title>video recoder</title> <script src="fileSaver.js"></script> <meta http-equiv="Content-Type" co
活体检验API在Java、Python、PHP中的使用教程
最新发布
Mtxxd的博客
06-12 1379
活体检验API是一种应用程序接口，通过使用生物特征识别技术，验证用户的身份是否为真实、活体而非静态或欺诈性的信息。这一技术基于生物特征，如指纹、面部识别、虹膜扫描等，为身份验证提供更高水平的安全性和准确性。​活体检验API基于生物特征进行身份验证，为各行业提供了安全、高效的解决方案。通过实时观察、测试或分析用户的生物信息，确保身份验证的真实性。多模态支持、便捷的API集成和实时活体检测增强了其适用性。在金融、医疗、社交媒体等领域广泛应用，提高了安全性和用户体验。对错误的灵活处理机制使其更具可靠性。
JAVA实现人脸识别，活体检测之百度API
热门推荐
我惠依旧的博客
06-08 1万+
---------------------------------------------------------------- GitHub：https://github.com/reamZMX/led- -----------------------8/16更新--------------------------- 有人问源码: 链接：https://pan.baidu.com/s/1...
java 图片活体检测_人脸识别活体检测之张张嘴和眨眨眼——FaceServlet
weixin_31905417的博客
02-27 755
package org.web;import java.io.IOException;import java.io.PrintWriter;import java.util.HashMap;import java.util.Map;import java.util.concurrent.ConcurrentHashMap;import javax.servlet.ServletException;...
移动端活体检测ocr识别技术
ZsHua_18519103264的博客
02-28 2037
移动端人脸活体识别技术,活体检测技术产品简介移动端人脸活体识别技术技术主要分为两部分：   第一部为前端人脸活体检测技术，主要支持android、ios平台，在前端通过眨眼、张嘴、摇头、点头等组合动作，确保操作的为真实活体人脸。   第二部为后台移动端人脸活体识别技术，该环节通过在活体检测技术环节取得整张人脸图像后，再通过扫描识别身份证，取到身份证头像后，将现场人脸与身份证上的人脸进行比对识别，判...
java 人脸活体检测_人脸识别活体检测测试案例
weixin_35125164的博客
02-28 1236
最近好多人找我要关于人脸识别活体检测的案例，今天正好有空我就更新一下，先解释一下活体，顾名思义就是看看是否是活人在测检(大白话解说)，用技术上的话也就是看看当前操作者是否是在用照片或者其他方法来操作，比如我们的人脸识别，人脸登陆(想要了解的可以点击这里)，存在一个最大的问题就是，当张三来登陆的时候如果张三本人登陆成功没有问题，要是张三拿着李四的照片来进行登陆，这也能登陆成功的话就是个最大的bug了...
H5活体验证页面，测试demo
12-22
提供的H5活体验证页面测试Demo是开发过程中的一个重要环节，它帮助开发者检查功能的正确性，优化性能，以及发现并修复可能存在的问题。测试应覆盖正常情况和异常情况，如网络波动、摄像头访问失败等。 总的来说，...
活体检测,人脸验证张嘴,摇头
01-11
在IT行业中，活体检测和人脸验证是计算机视觉领域的重要技术，主要应用于安全认证、支付验证、线上身份验证等场景。这些技术的核心是确保用户是真实的人而不是照片或模拟物，以此提高系统的安全性。本项目提供了Java...
基于百度API实现的人脸识别demo-Java前后端分离实现
03-21
在本项目中，Java用于构建服务器端，处理与前端的交互，调用百度人脸识别API，并将结果返回给前端。 3. **前后端分离**：这是一种现代Web开发架构，其中前端和后端通过API（如RESTful API）进行通信。在这个项目中...
活体检测H5文档及示例代码--人脸识别
03-07
活体检测H5简介 人脸识别 微信官方Demo 微信公众平台（视频接口）开发编程文档
JAVA百度云语音检测+活体检测+OCR卡识别
11-23
JAVA-百度云语音检测+活体检测+OCR卡识别,包含sdk包,根据注释替换参数,导入即用!
java利用opencv实现人脸检测
10-19
java利用opencv实现人脸检测，需要调用OPENCV库。主要代码在FaceDetector类中。实现很简单，在此基础上可以实现头像裁剪。
java+虹软人脸识别检测
06-06
这个项目涉及前端上传照片，然后由后端Java服务进行分析，确认照片中是否存在人脸。 首先，我们要理解人脸检测的基本概念。人脸检测是计算机视觉领域的一个重要任务，它的目标是从图像或视频流中定位并识别人脸。...
H5活体检测前端页面
wuxinfuchen的博客
05-08 6244
前端H5人脸活体检测功能
[小记] 微信小程序 - 人脸识别前端（一）初体验
zhaoweihao的博客
07-29 1630
微信小程序 - 人脸识别前端（一）初体验 记录尝试使用拍照模式进行人脸比对的过程—此方式有一定缺陷：调用系统摄像头，会保留照片于系统相册等 功能：人脸识别 + 打卡签到 说明：前端仅做拍照和转码操作等，后台接口调用腾讯人脸 api 进行***静态活体检测*** 以及***人脸比对*** 操作。 视图层-wxml <view class="btn-box-signOn"> <view class="btn-area btn-area-active" id="butto
uniapp + vue3微信小程序开发（2）活体人脸识别
qq_39404437的博客
04-25 9406
这相信有很多小程序都会用，为啥呢？因为小程序压根不得给你用户身份证信息，所以替换做法就是你让用户上传身份证照片，然后你在人脸识别，判断是同一个人后，再将你信息录入数据库 1、在小程序端的活体识别方法 1、uniapp camera组件拍照 takePhoto 2、uniapp camera组件录像 startRecord 3、uniapp live-pusher组件 视频推流方式 2、拍照方式实现人脸识别 因为项目要得紧，所以我这里使用最简单的拍照，拍八张，定时器每秒一张（后端用的是百度
java 虹软 活体检测总是失败
09-22
Java虹软活体检测失败可能有多种原因。首先，确保你的代码中没有语法错误或逻辑问题。检查你的代码并确认是否正确调用了虹软活体检测的相关函数和参数。确保你的代码在调用虹软活体检测前已经完成了必要的初始化和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南大白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值