【人脸识别】H5人脸识别实例系列一(人脸检测)
荒墨丶迷失 发布于2017-12 浏览:73007 回复:110
14
收藏

(。・∀・)ノ゙嗨咯,Everyone~ 

今天给大家带来的是 windows平台下,如何通过H5页面实现人脸识别的功能呢,一起探索!

首先能,还是介绍一下百度人脸识别的接口情况吧,详情可见官方文档:http://ai.baidu.com/docs#/Face-API/top

本次系列将会持续更新,人脸检测,人脸对比,人脸查三个方向的实例

好了,回归本贴主题,【H5的人脸检测】

人脸检测的官方描述:

检测请求图片中的人脸,返回人脸位置、72个关键点坐标、及人脸相关属性信息。

检测响应速度,与图片中人脸数量相关,人脸数量较多时响应时间会有些许延长。

典型应用场景:如人脸属性分析,基于人脸关键点的加工分析,人脸营销活动等。

五官位置会标记具体坐标;72个关键点坐标也包含具体坐标,但不包含对应位置的详细位置描述。

总结一句话就是:检测人脸图片,返回各种人脸属性数据。

接下来重点讲解如何实现吧~实现的样式如图(稍微把我给P了一下,哈哈)

注意:此实例并不是最优的一种方式,只是一个基础的实现过程,具体优化需要后续努力~

第一步:以下是一段判断浏览器是否支持HTML5的一个函数方法,便于大家测试。

//判断浏览器是否支持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);
		};
// 		$("#snap").click(function () {
// 			context.drawImage(video, 0, 0, 330, 250);
// 			})
		//拍照按钮
		setInterval(function(){
			context.drawImage(video, 0, 0, 330, 250)
			CatchCode();
		},1000);
		//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
		if (navigator.getUserMedia) {
			navigator.getUserMedia(videoObj, function (stream) {
				video.srcObject  = stream;
				video.play();
			}, errBack);
		} else if (navigator.webkitGetUserMedia) {
			navigator.webkitGetUserMedia(videoObj, function (stream) {
				video.src = window.webkitURL.createObjectURL(stream);
				video.play();
			}, errBack);
		}
	
	}, false);

然后就完了?NONO~~以下是重点:

接下来是如何将获取的图片数据传到后台呢?我在用ajax传base64的图片数据的时候,失败过三次

都是因为长度太长,导致后台无法获得正取的图片数据,从而调用API时返回的数据是空。

于是我的解决办法就是用的formData 作为对象传到后台进行解析

function dataURItoBlob(base64Data) {
		var byteString;
		if (base64Data.split(',')[0].indexOf('base64') >= 0)
		byteString = atob(base64Data.split(',')[1]);
		else
		byteString = unescape(base64Data.split(',')[1]);
		var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
		var ia = new Uint8Array(byteString.length);
		for (var i = 0; i < byteString.length; i++) {
		ia[i] = byteString.charCodeAt(i);
		}
		return new Blob([ia], {type:mimeString});
	}

以上这个方法是一个重点,你在用formData时,需要将base64数据转换为blob写入数据的

如果不清楚可以在本帖中提问。

前端的实现讲完了,ajax提交之后,后台需要如何处理呢?

 /**
   	 * 请求人脸检测
   	 * @return
   	 * @throws Exception  
   	 */
	@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(); 
	        //调用人脸检测的方法
	        Map  strmap = FaceDetect.detectby(in2b);
	        //将map数据封装json传到前台
			String strjson = JsonUtil.mapToJson(strmap);
			modelMap.put("strjson", strjson);
			modelMap.put("success", true);
		} catch (Exception e) {
			modelMap.put("success", false);
			modelMap.put("data", e.getMessage());
		}
		return modelMap;
	}

这是JAVA后台接受前台传来的图片数据,用的是SpringMVC框架,重点请看如何将接收的数据转为图片字节数组(因为人脸检测API是需要这个)

最后呢,就说一说人脸检测的API方法如何调用解析吧

 public static Map match2(byte[] arg0,byte[] arg1) {
    	Map map = new HashMap();
        // 请求url
        String url = "https://aip.baidubce.com/rest/2.0/face/v2/match";
        try {
            // 活体检测人脸
            String imgStr = Base64Util.encode(arg0);//
            String imgParam = URLEncoder.encode(imgStr, "UTF-8");

            //身份证人脸          
            String imgStr2 = Base64Util.encode(arg1);
            String imgParam2 = URLEncoder.encode(imgStr2, "UTF-8");

            String param = "images=" + imgParam + "," + imgParam2;

            // 注意这里仅为了简化编码每一次请求都去获取access_token,线上环境access_token有过期时间, 客户端可自行缓存,过期后重新获取。
            String accessToken = "";

            String str = HttpUtil.post(url, accessToken, param);
            System.out.println(str);
            
            JSONObject jsonobject = JSONObject.fromObject(str);
	     	String result = jsonobject.getString("result");
	     	
	     	JSONArray json = JSONArray.fromObject(result); // 首先把字符串转成 JSONArray  对象
	     	 for(int i=0;i

由以上代码可以看出,JSON解析过程中,百度返回的其实是一个json数组,我们需要做一定的处理才行,以及得到的数据类型

好啦,今天的分享就到这里了,其实这个只是最初步的搭建H5人脸检测,后续的优化会带来活体检测的质量,以及人脸坐标位置,多人检测等

还有就是人脸系列中的比对,注册,查找等功能

附上源码地址:https://gitee.com/liyingming/faceRecognition

谢谢大家~~

收藏
点赞
14
个赞
共110条回复 最后由w15301020270回复于2020-03
#63荒墨丶迷失回复于2018-01
#62 笔墨哥回复
嗯,还暴露了年龄。年龄是小度推理的么

年龄 有点虚高 哈哈

1
#62笔墨哥回复于2018-01
#47 荒墨丶迷失回复
纠正一下 是53 哈哈哈

嗯,还暴露了年龄。年龄是小度推理的么

0
#59荒墨丶迷失回复于2017-12
#58 回忆no唯美回复
已解决,详情http://ai.baidu.com/forum/topic/show/497276 我用的方法和百度API给的不一样,但是殊路同归,最终解决。但是还是不明白我用百度给就是不对呢
展开

嗯 解决了 就好呢 哈哈

0
#58回忆no唯美回复于2017-12
#57 荒墨丶迷失回复
你好 你这个问题是获取accesstoken错误吗 appid那些对不 我qq:563356602 可以一起探讨
展开

已解决,详情http://ai.baidu.com/forum/topic/show/497276
我用的方法和百度API给的不一样,但是殊路同归,最终解决。但是还是不明白我用百度给就是不对呢

0
#57荒墨丶迷失回复于2017-12
#56 回忆no唯美回复
你好,我有个问题: JSONObject jsonObject = new JSONObject(result); String access_token = jsonObject.optString("access_token"); //result是得到的token,token是可以正常得到的。 //但是得到的access_token 总是null。 楼主有没有好的方法,或者给个联系方式和你交流或者我的邮箱:arcryge@163.com
展开

你好 你这个问题是获取accesstoken错误吗 appid那些对不 我qq:563356602 可以一起探讨

1
#56回忆no唯美回复于2017-12

你好,我有个问题:
JSONObject jsonObject = new JSONObject(result);
String access_token = jsonObject.optString("access_token");

//result是得到的token,token是可以正常得到的。

//但是得到的access_token 总是null。
楼主有没有好的方法,或者给个联系方式和你交流或者我的邮箱:arcryge@163.com

0
#55回忆no唯美回复于2017-12

求个联系方式,有问题请教,拜托。

0
#54zr0519回复于2017-12

厉害了,跪拜

0
#53荒墨丶迷失回复于2017-12
#51 卡农LLLL回复
66666.期待成果.我也在搞JS.哈哈

怎么样怎么样  卡农 有没有搞到那个js 离线检测人脸

1
#52meihysmile回复于2017-12

厉害了,我的脸

0
#51卡农LLLL回复于2017-12
#50 荒墨丶迷失回复
这个你可以调人脸检测接口,进行判断,但是这个比较耗资源需要一直调用接口,如果是H5端的话有一些JS是可以做人脸检验的,而且还有些H5可以做活体检测,最近我在弄JS检测人脸的,如果成果就分享~
展开

66666.期待成果.我也在搞JS.哈哈

0
#50荒墨丶迷失回复于2017-12
#49 舜慧漂流回复
咨询楼主,程序上是如何知道摄像头前有人在的呢? 

这个你可以调人脸检测接口,进行判断,但是这个比较耗资源需要一直调用接口,如果是H5端的话有一些JS是可以做人脸检验的,而且还有些H5可以做活体检测,最近我在弄JS检测人脸的,如果成果就分享~

1
#49舜慧漂流回复于2017-12

咨询楼主,程序上是如何知道摄像头前有人在的呢? 

0
#48卡农LLLL回复于2017-12
#45 笔墨哥回复
下次漏那半张。。好不好。。

这话听起来又要偏车.

0
#47荒墨丶迷失回复于2017-12
#46 卡农LLLL回复
你这个半张脸都43..爆表啊.

纠正一下 是53 哈哈哈

1
#46卡农LLLL回复于2017-12
#42 荒墨丶迷失回复
我已经露脸半张了 哈哈 你可以考虑入境一个眼神就OK了

你这个半张脸都43..爆表啊.

0
#45笔墨哥回复于2017-12
#42 荒墨丶迷失回复
我已经露脸半张了 哈哈 你可以考虑入境一个眼神就OK了

下次漏那半张。。好不好。。

0
#44笔墨哥回复于2017-12
#41 卡农LLLL回复
不不不.不是我露脸.是你们. 我这个脸比go神还胖.不入镜了.

原来都是胖胖的IT小哥哥

0
#43笔墨哥回复于2017-12
#39 荒墨丶迷失回复
没问题的  100分绝对是笔墨哥的 

嗯,我懂我懂。。情人眼里出西施嘛。。。

0
#42荒墨丶迷失回复于2017-12
#41 卡农LLLL回复
不不不.不是我露脸.是你们. 我这个脸比go神还胖.不入镜了.

我已经露脸半张了 哈哈 你可以考虑入境一个眼神就OK了

1
TOP
切换版块