【H5最強攻略】百度人臉情緒實時識別

最近看的各位大佬都在體驗百度大腦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秒鍾的使用時間，防止你們把我服務搞崩潰啦咋辦。

作者：黎英明