【快速上手系列】使用idea调百度AI接口实现人脸识别功能

一、人脸检测

步骤

1、百度AI开放平台

登录后点击控制台

请添加图片描述

点击公有云服务——应用列表——点击创建应用

请添加图片描述

填写一下信息然后创建

请添加图片描述

然后回到概览——领取免费资源（如果账号没领取过的话）

请添加图片描述

可以自选，不过嫌麻烦直接全选了也一样

请添加图片描述

然后回到概览——点击调用服务下的API文档

请添加图片描述

获取api

到API文档下滑，可以看到获取Access Token的工具类

请添加图片描述

再往下滑可以看到demo的示例代码（懒的搞下面有代码）

请添加图片描述

获取sdk

点击概览下HTTP SDK

请添加图片描述

调转后可以看到所有的接口需要的各平台sdk，是离线的jar包
请添加图片描述

2、idea创建demo

idea新建一个maven项目

maven依赖

pom.xml

<dependency>
    <groupId>com.baidu.aip</groupId>
    <artifactId>java-sdk</artifactId>
    <version>4.6.0</version>
</dependency>
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20160810</version>
</dependency>
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.9.0</version>
</dependency>

项目结构

请添加图片描述

Base64Util：Base64 工具类

FileUtil：文件读取工具类

GetAccessToken：获取token类

GsonUtils：Json工具类.

HttpUtil：http 工具类

tips：不是哪个项目都会用到，看情况，懒的话全扔里就行

五个工具类代码

Base64Util.java

package utils;

/**
 * Base64 工具类
 */
public class Base64Util {
    private static final char last2byte = (char) Integer.parseInt("00000011", 2);
    private static final char last4byte = (char) Integer.parseInt("00001111", 2);
    private static final char last6byte = (char) Integer.parseInt("00111111", 2);
    private static final char lead6byte = (char) Integer.parseInt("11111100", 2);
    private static final char lead4byte = (char) Integer.parseInt("11110000", 2);
    private static final char lead2byte = (char) Integer.parseInt("11000000", 2);
    private static final char[] encodeTable = new char[]{'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '/'};

    public Base64Util() {
    }

    public static String encode(byte[] from) {
        StringBuilder to = new StringBuilder((int) ((double) from.length * 1.34D) + 3);
        int num = 0;
        char currentByte = 0;

        int i;
        for (i = 0; i < from.length; ++i) {
            for (num %= 8; num < 8; num += 6) {
                switch (num) {
                    case 0:
                        currentByte = (char) (from[i] & lead6byte);
                        currentByte = (char) (currentByte >>> 2);
                    case 1:
                    case 3:
                    case 5:
                    default:
                        break;
                    case 2:
                        currentByte = (char) (from[i] & last6byte);
                        break;
                    case 4:
                        currentByte = (char) (from[i] & last4byte);
                        currentByte = (char) (currentByte << 2);
                        if (i + 1 < from.length) {
                            currentByte = (char) (currentByte | (from[i + 1] & lead2byte) >>> 6);
                        }
                        break;
                    case 6:
                        currentByte = (char) (from[i] & last2byte);
                        currentByte = (char) (currentByte << 4);
                        if (i + 1 < from.length) {
                            currentByte = (char) (currentByte | (from[i + 1] & lead4byte) >>> 4);
                        }
                }

                to.append(encodeTable[currentByte]);
            }
        }

        if (to.length() % 4 != 0) {
            for (i = 4 - to.length() % 4; i > 0; --i) {
                to.append("=");
            }
        }

        return to.toString();
    }
}

FileUtil.java

package utils;

import java.io.*;

/**
 * 文件读取工具类
 */
public class FileUtil {

    /**
     * 读取文件内容，作为字符串返回
     */
    public static String readFileAsString(String filePath) throws IOException {
        File file = new File(filePath);
        if (!file.exists()) {
            throw new FileNotFoundException(filePath);
        } 

        if (file.length() > 1024 * 1024 * 1024) {
            throw new IOException("File is too large");
        } 

        StringBuilder sb = new StringBuilder((int) (file.length()));
        // 创建字节输入流  
        FileInputStream fis = new FileInputStream(filePath);  
        // 创建一个长度为10240的Buffer
        byte[] bbuf = new byte[10240];  
        // 用于保存实际读取的字节数  
        int hasRead = 0;  
        while ( (hasRead = fis.read(bbuf)) > 0 ) {  
            sb.append(new String(bbuf, 0, hasRead));  
        }  
        fis.close();  
        return sb.toString();
    }

    /**
     * 根据文件路径读取byte[] 数组
     */
    public static byte[] readFileByBytes(String filePath) throws IOException {
        File file = new File(filePath);
        if (!file.exists()) {
            throw new FileNotFoundException(filePath);
        } else {
            ByteArrayOutputStream bos = new ByteArrayOutputStream((int) file.length());
            BufferedInputStream in = null;

            try {
                in = new BufferedInputStream(new FileInputStream(file));
                short bufSize = 1024;
                byte[] buffer = new byte[bufSize];
                int len1;
                while (-1 != (len1 = in.read(buffer, 0, bufSize))) {
                    bos.write(buffer, 0, len1);
                }

                byte[] var7 = bos.toByteArray();
                return var7;
            } finally {
                try {
                    if (in != null) {
                        in.close();
                    }
                } catch (IOException var14) {
                    var14.printStackTrace();
                }

                bos.close();
            }
        }
    }
}

GetAccessToken.java（需要输入自己应用的API Key和Secret Key哦）

package utils;

import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.List;
import java.util.Map;

/**
 * 获取token类
 */
public class GetAccessToken {

    /**
     * 获取权限token
     * @return 返回示例：
     * {
     * "access_token": "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567",
     * "expires_in": 2592000
     * }
     */
    public static String getAuth() {
        // 官网获取的 API Key 更新为你注册的
        String clientId = "XXXXXXXXXXXXXXXXXXXXXXX";
        // 官网获取的 Secret Key 更新为你注册的
        String clientSecret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
        return getAuth(clientId, clientSecret);
    }

    /**
     * 获取API访问token
     * 该token有一定的有效期，需要自行管理，当失效时需重新获取.
     * @param ak - 百度云官网获取的 API Key
     * @param sk - 百度云官网获取的 Secret Key
     * @return assess_token 示例：
     * "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567"
     */
    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<String, List<String>> 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;
    }

}

GsonUtils.java

/*
 * Copyright (C) 2017 Baidu, Inc. All Rights Reserved.
 */
package utils;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.JsonParseException;

import java.lang.reflect.Type;

/**
 * Json工具类.
 */
public class GsonUtils {
    private static Gson gson = new GsonBuilder().create();

    public static String toJson(Object value) {
        return gson.toJson(value);
    }

    public static <T> T fromJson(String json, Class<T> classOfT) throws JsonParseException {
        return gson.fromJson(json, classOfT);
    }

    public static <T> T fromJson(String json, Type typeOfT) throws JsonParseException {
        return (T) gson.fromJson(json, typeOfT);
    }
}

HttpUtil.java

package utils;

import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.List;
import java.util.Map;

/**
 * http 工具类
 */
public class HttpUtil {

    public static String post(String requestUrl, String accessToken, String params)
            throws Exception {
        String contentType = "application/x-www-form-urlencoded";
        return HttpUtil.post(requestUrl, accessToken, contentType, params);
    }

    public static String post(String requestUrl, String accessToken, String contentType, String params)
            throws Exception {
        String encoding = "UTF-8";
        if (requestUrl.contains("nlp")) {
            encoding = "GBK";
        }
        return HttpUtil.post(requestUrl, accessToken, contentType, params, encoding);
    }

    public static String post(String requestUrl, String accessToken, String contentType, String params, String encoding)
            throws Exception {
        String url = requestUrl + "?access_token=" + accessToken;
        return HttpUtil.postGeneralUrl(url, contentType, params, encoding);
    }

    public static String postGeneralUrl(String generalUrl, String contentType, String params, String encoding)
            throws Exception {
        URL url = new URL(generalUrl);
        // 打开和URL之间的连接
        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
        connection.setRequestMethod("POST");
        // 设置通用的请求属性
        connection.setRequestProperty("Content-Type", contentType);
        connection.setRequestProperty("Connection", "Keep-Alive");
        connection.setUseCaches(false);
        connection.setDoOutput(true);
        connection.setDoInput(true);

        // 得到请求的输出流对象
        DataOutputStream out = new DataOutputStream(connection.getOutputStream());
        out.write(params.getBytes(encoding));
        out.flush();
        out.close();

        // 建立实际的连接
        connection.connect();
        // 获取所有响应头字段
        Map<String, List<String>> headers = connection.getHeaderFields();
        // 遍历所有的响应头字段
        for (String key : headers.keySet()) {
            System.err.println(key + "--->" + headers.get(key));
        }
        // 定义 BufferedReader输入流来读取URL的响应
        BufferedReader in = null;
        in = new BufferedReader(
                new InputStreamReader(connection.getInputStream(), encoding));
        String result = "";
        String getLine;
        while ((getLine = in.readLine()) != null) {
            result += getLine;
        }
        in.close();
        System.err.println("result:" + result);
        return result;
    }
}

测试类

FaceDetect.java（写入路径然后运行就行）

import com.baidu.aip.util.Base64Util;
import utils.FileUtil;
import utils.GetAccessToken;
import utils.HttpUtil;
import utils.GsonUtils;
import java.util.*;

/**
 * 人脸检测与属性分析
 */
public class FaceDetect {

    /**
     * 重要提示代码中所需工具类
     * FileUtil,Base64Util,HttpUtil,GsonUtils请从
     * https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
     * https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
     * https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
     * https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
     * 下载
     */
    public static String faceDetect() {
        // 请求url
        String url = "https://aip.baidubce.com/rest/2.0/face/v3/detect";
        try {
            Map<String, Object> map = new HashMap<>();
            //这里需要将本地图片进行Base64编码
            byte[] bytes = FileUtil.readFileByBytes("e:\\11.jpg");
            String img = Base64Util.encode(bytes);
            map.put("image", img);
            map.put("face_field", "faceshape,facetype");
            //这里也要改成BASE64
            map.put("image_type", "BASE64");

            String param = GsonUtils.toJson(map);

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

            String result = HttpUtil.post(url, accessToken, "application/json", param);
            System.out.println(result);
            return result;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    public static void main(String[] args) {
        FaceDetect.faceDetect();
    }
}

测试结果：

请添加图片描述

Test.java（这个要输入AppID、 API Key 、Secret Key 和图片路径）

import com.baidu.aip.face.AipFace;
import org.apache.commons.codec.binary.Base64;
import org.json.JSONArray;
import org.json.JSONObject;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.HashMap;

public class Test {

    //设置AppID、API Key和Secret Key
    public static final String APP_ID = "XXXXXXXXXXXXXX";
    public static final String API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXX";
    public static final String SECRET_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

    public static void main(String[] args) {
        String image = base64();
        String imageType = "BASE64";

        // 初始化一个AipFace
        AipFace client = new AipFace(APP_ID, API_KEY, SECRET_KEY);

        // 可选：设置网络连接参数
        client.setConnectionTimeoutInMillis(2000);
        client.setSocketTimeoutInMillis(60000);

        // 可选：设置代理服务器地址, http和socket二选一，或者均不设置
//        client.setHttpProxy("proxy_host", proxy_port);  // 设置http代理
//        client.setSocketProxy("proxy_host", proxy_port);  // 设置socket代理

        // 传入可选参数调用接口，根据需求自行设置
        HashMap<String, String> options = new HashMap<String, String>();
        options.put("face_field", "age,beauty,expression,face_shape,gender,glasses,race,eye_status,emotion,face_type");
//        options.put("max_face_num", "2");
//        options.put("face_type", "LIVE");
//        options.put("liveness_control", "LOW");

        JSONObject res = client.detect(image, imageType, options);
        if (res.getString("error_msg") != null && res.getString("error_msg").equals("SUCCESS")) {
            JSONArray faceList = res.getJSONObject("result").getJSONArray("face_list");
            JSONObject jsonObject = faceList.getJSONObject(0);

            System.out.println("年龄：" + jsonObject.getInt("age"));
            // 美丑打分，范围0-100，越大表示越美。
            System.out.println("美丑打分：" + jsonObject.getDouble("beauty"));
            // none:不笑；smile:微笑；laugh:大笑
            System.out.println("表情：" + jsonObject.getJSONObject("expression").getString("type"));
            // square: 正方形 triangle:三角形 oval: 椭圆 heart: 心形 round: 圆形
            System.out.println("脸型：" + jsonObject.getJSONObject("face_shape").getString("type"));
            // male:男性 female:女性
            System.out.println("性别：" + jsonObject.getJSONObject("gender").getString("type"));

            // yellow: 黄种人 white: 白种人 black:黑种人 arabs: 阿拉伯人
            System.out.println("人种：" + jsonObject.getJSONObject("race").getString("type"));

            // [0,1]取值，越接近0闭合的可能性越大
            System.out.println("右眼状态（睁开/闭合）：" + jsonObject.getJSONObject("eye_status").getInt("right_eye"));
            System.out.println("左眼状态（睁开/闭合）：" + jsonObject.getJSONObject("eye_status").getInt("left_eye"));
            System.out.println("人脸置信度，范围【0~1】：" + jsonObject.getInt("face_probability"));
            // none:无眼镜，common:普通眼镜，sun:墨镜
            System.out.println("是否带眼镜：" + jsonObject.getJSONObject("glasses").getString("type"));
            // angry:愤怒 disgust:厌恶 fear:恐惧 happy:高兴 sad:伤心 surprise:惊讶 neutral:无情绪
            System.out.println("情绪：" + jsonObject.getJSONObject("emotion").getString("type"));
            // human: 真实人脸 cartoon: 卡通人脸
            System.out.println("真实人脸/卡通人脸：" + jsonObject.getJSONObject("face_type").getString("type"));
            System.out.println("face_token：" + jsonObject.getString("face_token"));

        } else {
            System.out.println(res.toString());
        }
    }

    public static String base64() {
        //将图片文件转化为字节数组字符串，并对其进行Base64编码处理
        InputStream in = null;
        byte[] data = null;
        //读取图片字节数组
        try {
            in = new FileInputStream("e:\\11.jpg");
            data = new byte[in.available()];
            in.read(data);
            in.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return new String(Base64.encodeBase64(data));
    }
}

测试结果：

请添加图片描述

二、人脸对比

步骤

1、百度开放平台

获取Java-SDK文档

在百度开放平台中选择技术文档

请添加图片描述

然后在技术文档选择SDK文档—Java-SDK—然后如图

请添加图片描述

下载Java-SDK的demo源码：

JAVA SDK下载地址：https://github.com/Baidu-AIP/java-sdk

demo的目录结构

请添加图片描述

需要添加的maven依赖

请添加图片描述

pom.xml（本例子好像并没有用到）

<dependency>
    <groupId>com.baidu.aip</groupId>
    <artifactId>java-sdk</artifactId>
    <version>${version}</version>
</dependency>

2、idea创建demo

首先创建一个springboot项目（maven啥的应该也可以，但是结构要自己搞😬）

然后文件我是粘过来的

项目结构如图

请添加图片描述

其中face包中的AipFace类是百度提供给我们的人脸识别相关接口的工具类，这是主要要用到的

请添加图片描述

然后可以准备两张图片来先测试一下

测试

新建一个测试类Test.java

分别将自己应用的 AppID 、 API Key 、 Secret Key和准备的两张图片路径放进去改一下运行即可

package com.r.demo3;

import com.r.demo3.face.AipFace;
import com.r.demo3.face.MatchRequest;
import org.json.JSONObject;
import sun.misc.BASE64Encoder;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

/**
 * @Author Tuerlechat,
 * @Date 2022/11/9
 */
public class Test {
    public static final String APP_ID = "---你的APPID---";
    public static final String API_KEY = "---你的APIKEY---";
    public static final String SECRET_KEY = "---你的SECRETKEY---";

    public static void main(String[] args) {
        AipFace aipFace = new AipFace(APP_ID, API_KEY, SECRET_KEY);
        //准备的两张图片
        String img1="e:\\测试\\1.jpg";
        String img2="e:\\测试\\2.jpg";
        //两张不一样的图片
        String getImageStr1 = GetImageStr(img1);
        String getImageStr2 = GetImageStr(img2);

//        String getImageStr3 = GetImageStr(img1);

        List<MatchRequest> input = new ArrayList<>();
        MatchRequest mr1 = new MatchRequest(getImageStr1, "BASE64");
        MatchRequest mr2 = new MatchRequest(getImageStr2, "BASE64");
//        MatchRequest mr2 = new MatchRequest(getImageStr3, "BASE64");
        input.add(mr1);
        input.add(mr2);
        JSONObject match = aipFace.match(input);
        System.out.println(match);
    }

    public static String GetImageStr(String imgFile) {//将图片文件转化为字节数组字符串，并对其进行Base64编码处理
        InputStream in = null;
        byte[] data = null;
        //读取图片字节数组
        try {
            in = new FileInputStream(imgFile);
            data = new byte[in.available()];
            in.read(data);
            in.close();

        } catch (IOException e) {
            e.printStackTrace();
        }
        //对字节数组Base64编码
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encode(data);//返回Base64编码过的字节数组字符串
    }

}

我用了两张自己的照片，运行可以看到结果显示

请添加图片描述

请求成功然后相似度99点多😂

然后可以建一个controller来访问前端页面验证登录测试

人脸登录测试

controller层

这里还是需要你的自己应用的 AppID 、 API Key 、 Secret Key，这里还有一张图片路径是一会用于验证登录

FaceController.java

package com.r.demo3.controller;

import com.r.demo3.face.AipFace;
import com.r.demo3.face.MatchRequest;
import org.json.JSONObject;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import sun.misc.BASE64Encoder;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

/**
 * @Author Tuerlechat,
 * @Date 2022/11/9
 */
@RestController
@RequestMapping("/Face")
public class FaceController {
    public static final String APP_ID = "---你的APPID---";
    public static final String API_KEY = "---你的APIKEY---";
    public static final String SECRET_KEY = "---你的SECRETKEY---";

    @PostMapping( "/test")
    public String Test(@RequestParam("image") String image) {
        String substring = image.substring("data:image/jpeg;base64,".length());
        AipFace aipFace = new AipFace(APP_ID, API_KEY, SECRET_KEY);
        String img1="e:\\Shardddnshot.jpg";
        //两张不一样的图片
        String getImageStr1 = GetImageStr(img1);
        List<MatchRequest> input = new ArrayList<>();
        MatchRequest mr1 = new MatchRequest(getImageStr1, "BASE64");
        MatchRequest mr2 = new MatchRequest(substring, "BASE64");

        input.add(mr1);
        input.add(mr2);
        JSONObject match = aipFace.match(input);
        System.out.println(match);
        return match.toString();
    }

    public static String GetImageStr(String imgFile) {//将图片文件转化为字节数组字符串，并对其进行Base64编码处理
        InputStream in = null;
        byte[] data = null;
        //读取图片字节数组
        try {
            in = new FileInputStream(imgFile);
            data = new byte[in.available()];
            in.read(data);
            in.close();

        } catch (IOException e) {
            e.printStackTrace();
        }
        //对字节数组Base64编码
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encode(data);//返回Base64编码过的字节数组字符串
    }
}

前端页面

photo.html（记得改一下页面中的jquery路径）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>人脸验证登录</title>
    <!-- 样式部分可以忽略 -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn {
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background: #ff9900;
            line-height: 50px;
            text-align: center;
            color: #fff;
            box-shadow: 0 0 10px #999;
        }

        #video {
            width: 300px;
            height: 300px;
            border: 5px solid #000;
            border-radius: 10px;
            margin-left: 5px;
        }

        #canvas {
            width: 300px;
            height: 300px;
            border: 5px solid #000;
            border-radius: 10px;
            margin-left: 5px;
        }
    </style>
</head>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>

<body>
<div>
    <div id="play" class="btn">开始摄像</div>
    <div id="take" class="btn">拍照</div>
    <div id="sub_btn" class="btn">登录</div>
    <video id="video"></video>
    <!-- 尽量在canvas标签上设置宽高 -->
    <canvas id="canvas" width="300px" height="300px"></canvas>

</div>
<script>
    $(function () {
        // 开启摄像
        document.getElementById('play').onclick = () => {
            let constraints = {
                // video属性设置
                video: {
                    width: 300,
                    height: 300
                },
                // audio属性设置
                audio: false
            }
            navigator.mediaDevices.getUserMedia(constraints)
                .then(mediaStream => {
                    // 成功返回promise对象，接收一个mediaStream参数与video标签进行对接
                    document.getElementById('video').srcObject = mediaStream
                    document.getElementById('video').play()
                })
            // 失败就失败了
        }
        // 拍照、canvas绘制
        document.getElementById('take').onclick = () => {
            let ctx = document.getElementById("canvas").getContext('2d')
            ctx.drawImage(document.getElementById("video"), 0, 0, 300, 300)
        }

        $("body").on("click", "#sub_btn", function () {
            var imgdata = document.getElementById("canvas").toDataURL("image/jpeg");
            console.log(imgdata)
            $.ajax({
                url:"/Face/test",
                type:"post",
                async: true,
                dataType:"json",
                contentType : "application/x-www-form-urlencoded; charset=utf-8",
                data:{
                    image:imgdata
                },
                success:function (res) {
                    if (res.result.score>70)
                        alert("登录成功")
                    else  alert("登录失败")
                }
            })

        });


    })
</script>
</body>

</html>