【百度大脑新品体验】人脸情绪实时识别H5最强攻略
荒墨丶迷失 发布于2019-04-03 17:40 浏览:1922 回复:22
3
收藏
最后编辑于2019-09-16

嗨咯~ every one
马上就三天假期到来,先祝大家假期快乐哈~

最近看的各位大佬都在体验百度大脑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秒钟的使用时间,防止你们把我服务搞崩溃啦咋办。

体验地址:https://47.98.216.73:8083/web/faceRecognition/test.do

收藏
点赞
3
个赞
共22条回复 最后由荒墨丶迷失回复于2019-09-16 16:35
#23荒墨丶迷失回复于2019-09-16 16:35:50
#22 风搅火回复
能够辅助识别,但完全识别一般无法做到

AI的读心术 最近看的无主之城国产网络剧 就是AI搞事情

1
#22风搅火回复于2019-09-16 12:17:24
#21 rose20135188回复
要是能识别出内心的想法的话就更不得了了哈。

能够辅助识别,但完全识别一般无法做到

0
#21rose20135188回复于2019-09-11 09:52:59

要是能识别出内心的想法的话就更不得了了哈。

0
#20果断叫小黑回复于2019-08-02 17:22:22

大佬牛逼

0
#19rose20135188回复于2019-07-11 09:52:12

情绪识别不错哈

0
#18知道认证团回复于2019-07-11 08:50:36

分享很棒,给力

0
#17188******00回复于2019-07-10 16:59:54

0
#16rose20135188回复于2019-07-10 09:56:45

很不错的帖子,收藏了。

0
#15荒墨丶迷失回复于2019-07-09 20:54:25

来了 来了 我真的来了 ~

0
#14177******01回复于2019-06-03 10:09:30

小哥哥帖子很棒哇

0
#13荒墨丶迷失回复于2019-04-22 21:58:11
#12 远天的星光回复
大佬,我从你那个  【人脸识别】H5人脸识别实例系列一  这个中找到的,你可一定要回复我一下,我用jsp 也是传base64位数据时,总是失败,接收不到,可是大佬代码我看起来有点麻烦,能不能告诉我大佬的 dataURItoBlob(base64Data) 这个函数是不是可以直接用来修改base64代码,可是这儿样怎么用form表单接收啊,同样把值传给value嘛?我的问题在http://ai.baidu.com/forum/topic/show/943282这个页面。大佬有时间看看好吧。 [代码]
展开

哈哈 不好意思今天忙着晚上才看到消息,你加我QQ:563356602吧,免费为你解答 

0
#12远天的星光回复于2019-04-22 19:16:57

大佬,我从你那个  【人脸识别】H5人脸识别实例系列一  这个中找到的,你可一定要回复我一下,我用jsp 也是传base64位数据时,总是失败,接收不到,可是大佬代码我看起来有点麻烦,能不能告诉我大佬的 dataURItoBlob(base64Data) 这个函数是不是可以直接用来修改base64代码,可是这儿样怎么用form表单接收啊,同样把值传给value嘛?我的问题在http://ai.baidu.com/forum/topic/show/943282这个页面。大佬有时间看看好吧。

这是打开摄像头并获取base64代码,去掉了图片头。
  
0
#11风搅火回复于2019-04-14 09:00:12
#8 荒墨丶迷失回复
服务器被各位大佬搞挂了 哈哈哈 赶紧重启一波

看来参与的人特别多啊

0
#10daipeng_hi回复于2019-04-11 14:47:03
#8 荒墨丶迷失回复
服务器被各位大佬搞挂了 哈哈哈 赶紧重启一波

试了一下,感觉不错,挺牛逼的;就是年龄貌似不是很准确;

0
#9daipeng_hi回复于2019-04-11 14:44:41
#8 荒墨丶迷失回复
服务器被各位大佬搞挂了 哈哈哈 赶紧重启一波

万能的重启,哈哈

0
#8荒墨丶迷失回复于2019-04-11 11:31:47
#7 daipeng_hi回复
体验地址貌似打不开。

服务器被各位大佬搞挂了 哈哈哈 赶紧重启一波

0
#7daipeng_hi回复于2019-04-10 20:41:45

体验地址貌似打不开。

0
#6风搅火回复于2019-04-10 10:32:31
#5 177******01回复
看标题以为是根据人脸识别,做情绪分析呢

是社区的活动,给百度做测试

0
#5177******01回复于2019-04-08 09:25:12

看标题以为是根据人脸识别,做情绪分析呢

0
#4荒墨丶迷失回复于2019-04-04 09:45:00
#2 busyboxs回复
请问大佬这个网址要怎样调取摄像头哇

你是用python web实现,还是直接做客户端的那种呢?

1
TOP
切换版块