Введение
В связи с потребностями служебного бизнеса необходимо открыть дверь после проверки подлинности лица H5 на мобильном терминале, и она должна быть встроена в браузер WeChat, то есть встроена в официальный аккаунт.
Если это делается в приложении, это на самом деле не сложно. Суть в том, что то, что он мяукает, — это веб-страница! ! !
Сфокусируйся на:Страница в Интернете! !
Общеизвестно, что H5 вызывает камеру, чтобы делать фотографии или изображения, обычно использует одинinput:
<input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
Таким образом, когда вы нажимаете на вход, он разбудит камеру, которая идет в комплекте с телефоном, чтобы делать снимки или делать снимки.
2. Анализ
- Сложность 1 Настраивать такую маску в камере совершенно прихотливо.
- Сложность 2 Распознавание лиц в реальном времени, потому что включение камеры для записи полностью записывает, и вы не можете управлять видеопотоком.
- Сложность 3 Проблемы совместимости браузеров разных производителей. (выделено на IOS и Android).
3. Мышление
Что я должен делать?
- Способ 1. Скажите клиенту, что если вы не можете создать веб-страницу или можете создать приложение?
- Способ 2 Удалить библиотеку и убежать? ?
На самом деле это не так уж и экстремально, продукт видел наработки других компаний, и он тоже не может добиться такого идеального эффекта, все они используют вход для настройки встроенной камеры.
Ну, честно и практически это способ сделать это. Но я хотел продолжать копаться в этой области, поэтому эта статья.
4. Приходите на онлайн-демонстрациюРаспознавание лиц онлайн
Уровень сложности 1 и 2 достигнут, но не идеален для совместимости с различными мобильными телефонами и браузерами.
| модель | Браузер Сяоми | Браузер WeChat | QQ-браузер | UC | Chrome | Гепард | Safari |
|---|---|---|---|---|---|---|---|
| Сяоми Ми 8 | fail | pass | pass | pass | pass | pass | -- |
| iphone7P | -- | fail | -- | -- | -- | -- | fail |
| Huawei приятель20 | -- | pass | -- | -- | -- | -- | -- |
| Huawei приятель30 | -- | pass | -- | -- | -- | -- | -- |
-- значит не проверено
Только Xiaomi Mi 8 был протестирован, потому что это был мой собственный мобильный телефон, а остальные были напрямую отправлены коллегам через WeChat для тестирования.
Поместите адрес ниже, вы можете помочь протестировать его!
Пять, принцип реализации
API H5:getUserMedia+ Проверка лица:trackingjs
Добиться этого несложно, ключевым является вопрос совместимости.
5.1 getUserMedia
официальная документация getUserMedia
5.2 trackingjs
5.3 Можно использовать их комбинацию
Все ссылки опубликованы, и заинтересованная детская обувь может узнать больше и сделать соответствующие продукты в соответствии со своими потребностями.
6. Последствия
- Хотя есть этот getUserMedia API для вызова камеры, проблема совместимости не была решена должным образом. Посмотрите вперед к производителям может поддержать.
- trackingjs может обнаруживать лица, глаза, рты и цвета, а в онлайн-демонстрации используется только функция распознавания лиц.
- Все желающие могут задавать вопросы и играть идеи.
- адрес гитхаба