Это устроено! Вход в систему с помощью распознавания лиц на ПК, неожиданно простой

Java Vue.js
Это устроено! Вход в систему с помощью распознавания лиц на ПК, неожиданно простой
"

Эта статья размещена в личном блоге:www.chengxy-nds.top, совместное использование технических ресурсов.

Разве я раньше не делал проект с открытым исходным кодом?GitHubПосле входа в систему я подумал, что это будет немного более убедительно, и сказал, что добавлю распознавание лиц для входа в систему. Что касается прогресса в разработке моей буддийской системы, я, наконец, нашел время, чтобы организовать ее через неделю.

Исходный код находится в конце текста

На самом деле, в последнее время есть небольшое сопротивление написанию статей. Никто не читает то, что я пишу, и я всегда чувствую себя немного потерянным. К счастью, просвещение моих сверстников помогло мне восстановить мою уверенность. Я скорректировал свой менталитет, пока вещи, которыми я делюсь, полезны для всех, а сколько людей смотрят это, зависит от судьбы!

Не много ерунды, давайте сначала посмотрим на эффект динамического распознавания лиц, мозаика тяжеловата, и нет возможности посмотреть.

Принцип реализации

Давайте рассмотрим общий процесс реализации входа в систему с распознаванием лиц, три основных шага:

  1. Страница входа в систему включает камеру и выполняет распознавание лиц.Уведомление: только определить, есть ли лицо на экране

  2. После распознавания лица сделайте снимок и загрузите текущее изображение экрана

  3. Серверная часть принимает изображение и вызывает SDK библиотеки лиц для сравнения портретов. Если он проходит успешно, вход в систему выполнен успешно, а информация о портрете регистрируется в библиотеке лиц и локальномmysql.

Интерфейсная реализация

Выше я сказал, что лицо нужно распознавать на переднем конце, поэтому здесь мне приходится использовать инструменты.tracking.js, облегченная платформа распознавания лиц переднего плана.

внешний интерфейсVueЛогика реализации кода относительно проста,tracking.jsПосле включения камеры для распознавания информации о лице сделайте снимок видеоизображения, загрузите информацию об изображении на фон и дождитесь результата сравнения изображений.

data() {
        return {
            showContainer: true,   // 显示
            tracker: null,
            tipFlag: false,         // 提示用户已经检测到
            flag: false,            // 判断是否已经拍照
            context: null,          // canvas上下文
            removePhotoID: null,    // 停止转换图片
            scanTip: '人脸识别中...',// 提示文字
            imgUrl: '',              // base64格式图片
            canvas: null
        }
    },
    mounted() {
        this.playVideo()
    },
    methods: {

        playVideo() {
            var video = document.getElementById('video');
            this.canvas = document.getElementById('canvas');
            this.context = this.canvas.getContext('2d');
            this.tracker = new tracking.ObjectTracker('face');
            this.tracker.setInitialScale(4);
            this.tracker.setStepSize(2);
            this.tracker.setEdgesDensity(0.1);

            tracking.track('#video', this.tracker, {camera: true});

            this.tracker.on('track', this.handleTracked);
        },

        handleTracked(event) {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                if (event.data.length === 0) {
                    this.scanTip = '未识别到人脸'
                } else {
                    if (!this.tipFlag) {
                        this.scanTip = '识别成功,正在拍照,请勿乱动~'
                    }
                    // 1秒后拍照,仅拍一次
                    if (!this.flag) {
                        this.scanTip = '拍照中...'
                        this.flag = true
                        this.removePhotoID = setTimeout(() => {
                                this.tackPhoto()
                                this.tipFlag = true
                            },
                            2000
                        )
                    }
                    event.data.forEach(this.plot);
                }
        },

        plot(rect){
            this.context.strokeStyle = '#eb652e';
            this.context.strokeRect(rect.x, rect.y, rect.width, rect.height);
            this.context.font = '11px Helvetica';
            this.context.fillStyle = "#fff";
            this.context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
            this.context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
        },

        // 拍照
        tackPhoto() {

            this.context.drawImage(this.$refs.refVideo, 0, 0, 500, 500)
            // 保存为base64格式
            this.imgUrl = this.saveAsPNG(this.$refs.refCanvas)
            var formData = new FormData();
            formData.append("file", this.imgUrl);
            this.scanTip = '登录中,请稍等~'

            axios({
                method: 'post',
                url: '/faceDiscern',
                data: formData,
            }).then(function (response) {
                alert(response.data.data);
                window.location.href="http://127.0.0.1:8081/home";
            }).catch(function (error) {
                console.log(error);
            });

            this.close()
        },

        // 保存为png,base64格式图片
        saveAsPNG(c) {
            return c.toDataURL('image/png', 0.3)
        },

        // 关闭并清理资源
        close() {
            this.flag = false
            this.tipFlag = false
            this.showContainer = false
            this.tracker && this.tracker.removeListener('track', this.handleTracked) && tracking.track('#video', this.tracker, {camera: false});
            this.tracker = null
            this.context = null
            this.scanTip = ''
            clearTimeout(this.removePhotoID)
        }
    }

распознавание лица

Я уже делал дело по распознаванию лиц."Функция распознавания лиц на основе Java (с исходным кодом)", но способ вызова SDK слишком громоздкий и объем кода огромен. Так что на этот раз, чтобы упростить реализацию, вместо этого был использован API распознавания лиц Baidu, который оказался неожиданно простым.

"

Не спрашивайте меня, почему я сам не пишу инструмент распознавания лиц, не спрашивайте, просто не спрашивайте

Зарегистрируйте приложение в Baidu Cloudhttps://console.bce.baidu.com/ai/?_=1595996996657&fromai=1#/ai/face/app/list,получитьAPI KeyиSecret KeyДля получения сопровожденияtokenиспользовать.

在这里插入图片描述
вставьте сюда описание изображения

API Baidu Cloud Face Recognition очень удобный, написаны демки различных операций, их можно просто менять.

Сделайте первый шагtoken, который называется распознаванием лица BaiduAPIОсновы.

https://aip.baidubce.com/oauth/2.0/token?
grant_type=client_credentials&
client_id=【百度云应用的AK】&
client_secret=【百度云应用的SK】

Далее мы начинаем сравнивать фотографии. Облако Baidu предоставляет онлайн-базу лиц. Когда пользователи входят в систему, мы сначала проверяем, существует ли портрет в базе данных лиц. Если он существует, это означает, что вход выполнен успешно. Если нет существует, он будет зарегистрирован в базе данных лиц. Каждое изображение имеет уникальный идентификаторface_token.

Распознавание лица BaiduAPIРеализация относительно проста, требует особого внимания к параметрамimage_type, который имеет три типа

  • BASE64: значение base64 изображения, данные изображения после кодирования base64, размер закодированного изображения не превышает 2M;
  • URL: рисунокURLадрес (загрузка картинок может занять слишком много времени из-за сетевых и других причин);
  • FACE_TOKEN: Уникальный идентификатор изображения лица.При вызове интерфейса обнаружения лиц каждому изображению лица будет присвоен уникальный идентификатор.FACE_TOKEN, одно и то же изображение обнаруживается несколько разFACE_TOKENто же самое.

А здесь мы используем картинкиBASE64файл, такimage_typeбыть настроенным наBASE64.

    @Override
    public BaiDuFaceSearchResult faceSearch(String file) {

        try {
            byte[] decode = Base64.decode(Base64Util.base64Process(file));
            String faceFile = Base64Util.encode(decode);

            Map<String, Object> map = new HashMap<>();
            map.put("image", faceFile);
            map.put("liveness_control", "NORMAL");
            map.put("group_id_list", "user");
            map.put("image_type", "BASE64");
            map.put("quality_control", "LOW");
            String param = GsonUtils.toJson(map);

            String result = HttpUtil.post(faceSearchUrl, this.getAccessToken(), "application/json", param);
            BaiDuFaceSearchResult searchResult = JSONObject.parseObject(result, BaiDuFaceSearchResult.class);
            log.info(" faceSearch: {}", JSON.toJSONString(searchResult));
            return searchResult;
        } catch (Exception e) {
            log.error("get faceSearch error {}", e.getStackTrace());
            e.getStackTrace();
        }
        return null;
    }

    @Override
    public BaiDuFaceDetectResult faceDetect(String file) {

        try {
            byte[] decode = Base64.decode(Base64Util.base64Process(file));
            String faceFile = Base64Util.encode(decode);

            Map<String, Object> map = new HashMap<>();
            map.put("image", faceFile);
            map.put("face_field", "faceshape,facetype");
            map.put("image_type", "BASE64");
            String param = GsonUtils.toJson(map);

            String result = HttpUtil.post(faceDetectUrl, this.getAccessToken(), "application/json", param);
            BaiDuFaceDetectResult detectResult = JSONObject.parseObject(result, BaiDuFaceDetectResult.class);
            log.info(" detectResult: {}", JSON.toJSONString(detectResult));
            return detectResult;
        } catch (Exception e) {
            log.error("get faceDetect error {}", e.getStackTrace());
            e.getStackTrace();
        }
        return null;
    }

    @Override
    public BaiDuFaceAddResult addFace(String file, UserFaceInfo userFaceInfo) {

        try {
            byte[] decode = Base64.decode(Base64Util.base64Process(file));
            String faceFile = Base64Util.encode(decode);

            Map<String, Object> map = new HashMap<>();
            map.put("image", faceFile);
            map.put("group_id", "user");
            map.put("user_id", userFaceInfo.getUserId());
            map.put("user_info", JSON.toJSONString(userFaceInfo));
            map.put("liveness_control", "NORMAL");
            map.put("image_type", "BASE64");
            map.put("quality_control", "LOW");
            String param = GsonUtils.toJson(map);

            String result = HttpUtil.post(addfaceUrl, this.getAccessToken(), "application/json", param);
            BaiDuFaceAddResult addResult = JSONObject.parseObject(result, BaiDuFaceAddResult.class);
            log.info("addResult: {}", JSON.toJSONString(addResult));
            return addResult;
        } catch (Exception e) {
            log.error("get addFace error {}", e.getStackTrace());
            e.getStackTrace();
        }
        return null;
    }

До и после окончания проекта отдельно, но чтобы облегчить всем обучение, я интегрирую страницу распознавания лиц в серверную часть проекта.

Наконец, запустите FireControllerApplication, чтобы получить доступ к адресу: http://localhost:8082/face.

исходный кодGitHubадрес:https://github.com/chengxy-nds/fire.git, приветствую всех играть~


Оригинальность не так проста, сжигание волос на выходе, если есть потеря, пожалуйста, дайте лайк, чтобы поощрить это!

Разобраны и розданы друзьям сотни различных технических электронных книг. Подпишитесь на официальный аккаунт, чтобы ответить [666], чтобы получить его самостоятельно. Мы создали группу технического обмена с друзьями, чтобы обсуждать технологии и делиться технической информацией, стремясь вместе учиться и развиваться. Если вам интересно, присоединяйтесь к нам!