最近看的各位大佬都在体验百度大脑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_id=" + ak
// 3. 官网获取的 Secret Key
+ "&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 Canvas
window.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")
@ResponseBody
public 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秒钟的使用时间，防止你们把我服务搞崩溃啦咋办。
作者：黎英明
