最近看的各位大佬都在体验百度大脑2019年全新上线的24项AI能力!

(我也按耐不住了,赶紧走一波～ 哈哈)

接下来要介绍的就是H5端的人脸检测攻略。

附带详细的介绍,代码,以及演示体验等

欢迎提出各种建议～

什么是人脸检测呢?
人脸检测就是检测图中的人脸,并为人脸标记出边框。检测出人脸后,可对人脸进行分析,获得眼、口、鼻轮廓等150个关键点定位,

准确识别多种人脸属性,如性别,年龄,表情等信息。该技术可适应大角度侧脸,遮挡,模糊,表情变化等各种实际环境。

人脸检测接口V3版本接口能力:

• 人脸检测:检测图片中的人脸并标记出位置信息;
• 人脸关键点:展示人脸的核心关键点信息,及150个关键点信息。
• 人脸属性值:展示人脸属性信息,如年龄、性别等。
• 人脸质量信息:返回人脸各部分的遮挡、光照、模糊、完整度、置信度等信息。

本次用到了人脸属性值,包含有情绪识别、人种、双眼状态等等

利用人脸检测接口实现在线实时数据检测(区别于一般的上传图片检测的体验,本帖最后提供体验的访问地址)

【Java + H5的框架技术实现】

我希望能够尽量的给大家描述的简单一点,毕竟我之前也看到有些小伙伴们都在问H5如何实现人脸识别。

获取 access_token
要调用百度 AI API 的接口,需要创建对应的应用并获取 access_token.

第一步是创建应用,登录百度账号,进入人脸识别控制台,创建好具体的应用。

第二步是拿到clientId,clientSecret放到如下代码中,生成access_token。

 public static String getAuth(String ak, String sk) {        // 获取token地址        String authHost = "https://aip.baidubce.com/oauth/2.0/token?";        String getAccessTokenUrl = authHost                // 1. grant_type为固定参数                + "grant_type=client_credentials"                // 2. 官网获取的 API Key                + "&client_&client_secret=" + sk;        try {            URL realUrl = new URL(getAccessTokenUrl);            // 打开和URL之间的连接            HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();            connection.setRequestMethod("GET");            connection.connect();            // 获取所有响应头字段            Map> map = connection.getHeaderFields();            // 遍历所有的响应头字段            for (String key : map.keySet()) {                System.err.println(key + "--->" + map.get(key));            }            // 定义 BufferedReader输入流来读取URL的响应            BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));            String result = "";            String line;            while ((line = in.readLine()) != null) {                result += line;            }            /**             * 返回结果示例             */            System.err.println("result:" + result);            JSONObject jsonObject = new JSONObject(result);            String access_token = jsonObject.getString("access_token");            return access_token;        } catch (Exception e) {            System.err.printf("获取token失败!");            e.printStackTrace(System.err);        }        return null;    }

前端H5的视频采集

//判断浏览器是否支持HTML5 Canvaswindow.onload = function () {try {//动态创建一个canvas元 ,并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas").getContext("2d");// document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS";}catch (e) {// document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";}};//这段代 主要是获取摄像头的视频流并显示在Video 签中window.addEventListener("DOMContentLoaded", function () {var canvas = document.getElementById("canvas"),context = canvas.getContext("2d"),video = document.getElementById("video"),videoObj = { "video": true },errBack = function (error) {console.log("Video capture error: ", error.code);};var i =0;//拍照每秒一次setInterval(function(){i++;if(i<10){context.drawImage(video, 0, 0, 330, 250)CatchCode();}else{$("#tishi").html("温馨提示:体验次数已经用完啦,请刷新页面重新使用～");}},1000);//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow//更新兼容火狐浏览器if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {    navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;    navigator.getUserMedia(videoObj, function (stream) {video.srcObject  = stream;video.play();}, errBack);}}, false);

得到图片数据,调用百度接口

@RequestMapping(value = "/save.do")@ResponseBodypublic Map queryService(@RequestParam("the_file") MultipartFile file) {Map modelMap = new HashMap();try {//将数据转为流InputStream content = file.getInputStream();ByteArrayOutputStream swapStream = new ByteArrayOutputStream();          byte[] buff = new byte[100];          int rc = 0;          while ((rc = content.read(buff, 0, 100)) > 0) {              swapStream.write(buff, 0, rc);          }          //获得二进制数组        byte[] in2b = swapStream.toByteArray();         //调用人脸检测的方法        FaceDetectBean  faceDetectBean = FaceDetect.detect(in2b);        Result result = faceDetectBean.getResult();// 获取人脸的数据result集合        List facelists = result.getFace_list();            for (Face_list face_list : facelists) {            modelMap.put("age", face_list.getAge());//年龄            modelMap.put("beauty", face_list.getBeauty());;//颜值分数            modelMap.put("expression", face_list.getExpression().getType());//表情识别            modelMap.put("faceShape", face_list.getFace_shape().getType());;//脸型            modelMap.put("gender", face_list.getGender().getType());//性别            modelMap.put("glasses", face_list.getGlasses().getType());//是否带眼镜            modelMap.put("leftEye", face_list.getEye_status().getLeft_eye());//左眼            modelMap.put("rightEye", face_list.getEye_status().getRight_eye());//左眼            modelMap.put("emotion", face_list.getEmotion().getType());//情绪识别            modelMap.put("race", face_list.getRace().getType());//人种            }modelMap.put("success", true);} catch (Exception e) {modelMap.put("success", false);modelMap.put("data", e.getMessage());}return modelMap;}

  public static FaceDetectBean detect(byte[] imagebinary) {        // 请求url        String url = "https://aip.baidubce.com/rest/2.0/face/v3/detect";        try {            Map map = new HashMap<>();            String base64ImageData = Base64Util.encode(imagebinary);            map.put("image", base64ImageData);            map.put("face_field", "age,beauty,expression,face_shape,gender,glasses,landmark,race,eye_status,emotion");//            map.put("image_type", "BASE64");            String param = GsonUtils.toJson(map);            // 注意这里仅为了简化编码每一次请求都去获取access_token,线上环境access_token有过期时间, 客户端可自行缓存,过期后重新获取。            String accessToken = "----你获取的accessToken--";            String result = HttpUtil.post(url, accessToken, "application/json", param);            System.out.println(result);                        JSON json = JSON.parseObject(result);            FaceDetectBean faceDetectBean = JSONObject.toJavaObject(json, FaceDetectBean.class);// json转java对象                   return faceDetectBean;        } catch (Exception e) {            e.printStackTrace();        }        return null;    }

拿到百度的数据后转化Java实体类,这是一个非常方便的操作。

String result = HttpUtil.post(url, accessToken, "application/json", param);JSON json = JSON.parseObject(result);FaceDetectBean faceDetectBean = JSONObject.toJavaObject(json, FaceDetectBean.class);// json转java对象

基本上整个就完成了,快来看看实际的效果把。

整体的测试效果

然后大概的测试效果就是酱紫的啦,我设置啦10秒钟的使用时间,防止你们把我服务搞崩溃啦咋办。

作者:黎英明