Теперь мы фактически покажем пользователю вход с веб-камеры. Для этого API Media Stream предлагает метод getUserMedia . Он получает объект конфигурации в качестве аргумента, который определяет, к чему именно мы хотим получить доступ и как. Нам не нужен звук, но нам нужен видеопоток с selectedDevice . Мы также можем сообщить API наш предпочтительный размер видео. Наконец, мы назначаем вывод этого метода , а именно его srcObject :

 const startVideo = async () => {
  // Еще кое-что по обнаружению лиц позже
  videoEl.srcObject = ожидание navigator.mediaDevices.getUserMedia({
    видео: {
      ширина: {идеально: 1280},
      высота: {идеально: 720},
      идентификатор устройства: выбранное устройство,
    },
    аудио: ложь,
  })
  // Подробнее об обнаружении лиц позже
}
 

Это должно помочь. Поскольку имеет автовоспроизведение , он должен сразу показывать то, что видит камера. Если, конечно, мы не разрешили браузеру доступ к камере. Но почему бы и нет, верно? Ведь мы хотим носить шляпы.

Если ношение шляпы становится слишком жутким, мы также хотели бы остановить видео. Мы можем сделать это, сначала остановив дорожку каждого исходного объекта по отдельности, а затем очистив сам srcObject .

 const stopVideo = () => {
  // Немного информации об обнаружении лиц позже
  если (videoEl.srcObject) {
    videoEl.srcObject.getTracks().forEach(t =>
 
  {
      т.стоп()
    })
    видеоЭл.srcObject = ноль
  }
}
 

Теперь мы можем запускать и останавливать видео. Далее:

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

Давайте приступим к машинному обучению. Во время установки котла мы установили face-api.js , которая является довольно фантастической библиотекой для выполнения всех видов задач машинного обучения, связанных с распознаванием, обнаружением и интерпретацией лиц. Он также может определять настроение, сообщать нам, где находятся разные части лица, такие как линия подбородка или глаза, и может использовать модели с разным весом. И самое приятное: ему не нужен удаленный сервис; нам нужно только указать правильный вес модели! Учитывая, что они могут быть довольно большими, но нам нужно загрузить их только один раз, и мы можем выполнять распознавание лиц до конца сеанса.

Но сначала нам нужны модели. В репозитории face-api.js есть все необходимые предварительно обученные модели:

• face_landmark_68_model-shard1
• face_landmark_68_model-weights_manifest.json
• ssd_mobilenetv1_model-shard1
• ssd_mobilenetv1_model-shard2
• ssd_mobilenetv1_model-weights_manifest.json
• tiny_face_detector_model-shard1
• tiny_face_detector_model-weights_manifest.json

Мы помещаем их в папку с именем model и заставляем face-api загружать их:

 let faceApiInitialized = false
const initFaceApi = асинхронный () => {
  если (!faceApiInitialized) {
    ожидание faceapi.  loadFaceLandmarkModel('/models')
    ожидание faceapi.nets.tinyFaceDetector.loadFromUri('/models')
    FaceApiInitialized = истина
  }
}
 

Нам нужны ориентиры лица: они представляют собой прямоугольник с координатами x и y, значением ширины и высоты. Мы могли бы использовать черты лица для большей точности, но для простоты вместо этого мы будем использовать ориентиры.

С помощью face-api.js мы можем создать асинхронную функцию для обнаружения лица в потоке видеоэлемента. face-api.js делает всю магию за нас, и нам нужно только сказать ему, в каком элементе мы хотим искать лица и какую модель использовать. Однако сначала нам нужно инициализировать API.

 константное обнаружение лица = асинхронное () => {
  ждать initFaceApi()
  return await faceapi.detectSingleFace(videoEl, new faceapi.TinyFaceDetectorOptions())
}
 

Итак, давайте добавим шляпы и как-нибудь настроим их расположение:

 /**
 * Все доступные шляпы
 */
постоянные шляпы = {
  топ: {
    шляпа: '🎩',
    позиционирование: поле => ({
      верх: box.top - (box.height * 1.1),
      слева: коробка.слева,
      размер шрифта: box.height,
    }),
  },
  ахаха: {
    шляпа: '👒',
    позиционирование: поле => ({
      top: box.top - высота окна,
      слева: box.left + box.width * 0,1,
      ширина: box.width,
      размер шрифта: box.height,
    }),
  },
  крышка: {
    шляпа: '🧢',
    позиционирование: поле =>  ({
      верх: box. top - box.height * 0,8,
      слева: box.left - box.width * 0,10,
      размер шрифта: box.height * 0,9,
    }),
  },
  выпускнойшапка: {
    шляпа: '🎓',
    позиционирование: поле => ({
      top: box.top - высота окна,
      слева: коробка.слева,
      размер шрифта: box.height,
    }),
  },
  спасательный шлем: {
    шляпа: '⛑️',
    позиционирование: поле => ({
      верх: box.top - box.height * 0,75,
      слева: коробка.слева,
      размер шрифта: box.height * 0,9,
    }),
  },
}
 

Основная причина для

Так как мы еще не использовали для шляп, давайте добавим следующее:

 let selectedHat = 'tophat'
const listHats = () => {
  hatSelectorEl.innerHTML = Object.keys(шляпы).map(hatKey => {
    константная шапка = шляпы[шляпаКей]
    вернуть `${hat.hat}`
  }).присоединиться('')
}
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Как носить шляпы

Теперь мы можем начать склеивать детали. Теперь с помощью переменной selectedHat и поля мы можем поместить выбранную шляпу на обнаруженное лицо:

 /**
 * Позиционирует шляпу в заданном поле
 */
const positionHat = (box) => {
  const hatConfig = шляпы[выбранная шляпа]
  const positioning = hatConfig.positioning(box)
  hatEl.classList.add('видимый')
  шляпаEl.innerHTML = шляпаConfig.hat
  hatEl.setAttribute('стиль', `
    сверху: ${positioning.top}px;
    слева: ${positioning.left}px;
    ширина: ${box.width} пикселей;
    высота: ${box.height} пикселей;
    размер шрифта: ${positioning.fontSize}px;
  `)
}
 

Войти в полноэкранный режимВыйти из полноэкранного режима

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

Теперь нам нужно интегрировать распознавание лиц в функции startVideo и stopVideo . Я покажу здесь весь код этих функций для полноты картины.

 /**
 * Запускать и останавливать видео
 */
пусть faceDetectionInterval = null
константное startVideo = асинхронное () => {
  списокШляпы()
  ждите список устройств ()
  остановитьвидео()
  пытаться {
    videoEl.srcObject = ожидание navigator.mediaDevices.getUserMedia({
      видео: {
        ширина: {идеально: 1280},
        высота: {идеально: 720},
        идентификатор устройства: выбранное устройство,
      },
      аудио: ложь
    })
    faceDetectionInterval = setInterval (асинхронный () => {
      константное позиционирование = ожидание обнаруженияFace()
      если (позиционирование) {
        positionHat(positioning._box)
      }
    }, 60)
  } поймать(е) {
    консоль.ошибка(е)
  }
}
const stopVideo = () => {
  clearInterval (faceDetectionInterval)
  hatEl.classList.remove('видимый')
  если (videoEl.srcObject) {
    videoEl.srcObject.getTracks().forEach(t => {
      т.стоп()
    })
    видеоЭл.srcObject = ноль
  }
}
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Как видите, здесь мы используем интервал для позиционирования всего. Из-за особенностей распознавания лиц было бы слишком сложно, если бы мы делали это чаще. Это уже довольно тряско, но около 60 мс делает это, по крайней мере, терпимым.

Наконец, мы добавляем прослушиватели событий, и все готово:

 /**
 * Слушатели событий
 */
startButtonEl.addEventListener('щелчок', startVideo)
stopButtonEl.addEventListener('щелчок', stopVideo)
deviceDropdownEl.addEventListener('change', e => {
  selectedDevice = e.target.value
  начатьвидео()
})
hatSelectorEl.addEventListener('change', e => {
  selectedHat = e.target.value
})
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Результат

И вот результат:

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

Как насчет того, чтобы поделиться в комментариях скриншотом, на котором вы носите свой любимый смайлик в шляпе?

---

Надеюсь, вам понравилось читать эту статью так же, как мне понравилось ее писать! Если да, то оставьте ❤️ или 🦄 ! Я пишу технические статьи в свободное время и время от времени люблю выпить кофе.

Если вы хотите поддержать мои усилия, вы можете предложить мне кофе ☕ или подпишитесь на меня в Твиттере 🐦 ! Вы также можете поддержать меня напрямую через Paypal!

‎YouCam Fun — живые фильтры лица в App Store

Описание

YouCam Fun — это идеальный инструмент для превращения вашей скучной камеры iOS в творческую фотобудку с живыми фильтрами для ваших фотографий, видеоэффектами в реальном времени и забавными фонами! Кем ты будешь сегодня? Добавляйте забавные, забавные и спонтанные живые эффекты и фильтры к своим фотографиям и видео. Сохраняйте, делитесь и обменивайтесь с друзьями через социальные сети!

Функции YouCam Fun:

[FunCam с живыми наклейками]
* Используйте камеру, чтобы снимать фото и видео с живыми наклейками!
* Множество фильтров для наклеек, включая прически, фильтры для животных и костюмы.

[PhotoFun — Наклейки в фотопленке]
* Возьмите уже существующие фотографии и украсьте их забавными наклейками.

[Photo Fun — эффекты, темы, фоны и текст для фотографий]
*Используйте эффекты, темы, макеты, рамки и фоны, чтобы ваши селфи засияли.
* Придайте своим фотографиям световые эффекты: Light Leak, Scratch, Grunge и другие.
*Раскройте свою дикую сторону с помощью фильтров для животных! Превратитесь в кошку, оленя, снежного барса, тигра и других.

[Фильтры]
* Придайте своим фотографиям изюминку, чтобы они сияли.

Загрузите YouCam Fun сегодня и дайте волю своему творчеству.

** Примечание. Запись видео доступна для iOS 8. 0 и выше.

******************************************************* **
Идеи?
Поделитесь ими с нами по электронной почте или Facebook
Ошибки?
Пожалуйста, сообщите о них, и они будут исправлены в ближайшее время!
Любите нас?
Поставьте лайк и подпишитесь на нас, чтобы получать обновления от Perfect Corp.
Подписывайтесь на нас: www.twitter.com/youcamapps
YouCam Fun полностью соответствует рекламной политике Facebook: https://m.facebook.com/ads/ad_choices
************** ***************************************

9 мая 2022 г.

Версия 1.15.15

Последнее обновление
— Оптимизация взаимодействия с пользователем
— Исправление ошибок и повышение производительности

Рейтинги и обзоры

34,3 тыс. оценок

Лучшее приложение когда-либо!

О боже! Мне очень нравится это приложение, и я никогда не пишу обзоры, но я хотел написать один, потому что мне нравится это приложение, и я хотел бы сделать предложение! Так что мне нравится приложение, и в нем так много БЕСПЛАТНЫХ фильтров! ❤️❤️ Есть две вещи, которые я мог бы изменить, и одна из них — водяной знак, который немного раздражает, когда я пытаюсь сделать фотографии, и я не хочу, чтобы все, что я отредактировал/снял с помощью приложения, Я отправил своим друзьям водяной знак. Кроме того, есть больше сезонных фильтров, чем повседневных, которые мне нравятся сезонные фильтры, я просто хочу больше повседневных, обновленных фильтров. Если бы не было водяных знаков и побольше повседневных фильтров, то это было бы ЛУЧШЕЕ ПРИЛОЖЕНИЕ!!!

Редактировать: Я зашел впервые за несколько месяцев и есть более «повседневные» фильтры, которыми я доволен. Однако теперь мои брови неправильно смыкаются. Раньше такой проблемы не было, или я не видел. Мои брови такие же, как в феврале. Мне очень нравится это приложение, и я был так разочарован тем, что оно не работает должным образом. Я надеюсь, что разработчики увидят это, и это приложение снова станет лучшим приложением!

Пять звезд

У вас было много забавных вещей и животных, которых вы могли надеть себе на голову, и они были о животных. Мне очень понравилось, потому что там было много забавных вещей, которые вы могли надеть себе на лицо, и это было очень весело но одна вещь, которая мне не понравилась в ней, просто шучу, одна вещь, которая мне нравится в ней больше всего, это то, что вы не можете перестать получать удовольствие. Это была действительно забавная игра, и мне она очень понравилась, и вам тоже должно понравиться дети, больше всего мне в ней нравится больше всего, это то, что есть забавные вещи, которые вы можете делать, вы можете выглядеть так, как будто вы в журнале, это настоящая забавная программа, и вы можете поделиться ею в сообщениях, электронных письмах и много из других вещей, вам тоже должно понравиться, потому что это действительно очень весело, ему это понравится, и этот обзор был действительно веселым, потому что все в нем буквально все весело

Могло быть лучше

Хорошо, позвольте мне начать с того, что вау. В этом приложении есть около 70 фильтров на выбор, и большинство из них очень милые и забавные. Мне нравится, как вы можете взять фотографию, которая у вас уже есть, и сделать ее другой. Всегда было очень легко загружать сделанные мной фотографии, и нет никаких добавлений. Но есть вещи, которые нужно исправить. Во-первых, довольно сложно найти, где вы редактируете свои изображения, или узнать, где вы можете найти другие фильтры. И некоторые фильтры не самые подходящие. Многие из них являются любовными родственниками и имеют фильтры поцелуев. Я лично не возражаю, я просто не использую эти фильтры, но маленькие дети могут пойти на это и подумать, что это нормально, даже когда это не так. И иногда, когда я пытаюсь добавить фильтры с животными, мое лицо прямо здесь, и все такое: «О, мы не видим твоего лица на этой картинке. Пожалуйста, выберите другую картинку», которая иногда действует мне на нервы. Но кроме этого, это отличное приложение для детей (таких как я), чьи родители пока не хотят, чтобы у них был моментальный чат

Разработчик, PERFECT MOBILE CORP. , указал, что политика конфиденциальности приложения может включать обработку данных, как описано ниже. Для получения дополнительной информации см. политику конфиденциальности разработчика.

Данные, используемые для отслеживания вас

Следующие данные могут использоваться для отслеживания вас в приложениях и на веб-сайтах, принадлежащих другим компаниям:

• Расположение
• Идентификаторы
• Данные об использовании

Данные, связанные с вами

Следующие данные могут быть собраны и связаны с вашей личностью:

• Контактная информация
• Пользовательский контент
• Идентификаторы

Данные, не связанные с вами

Могут быть собраны следующие данные, но они не связаны с вашей личностью:

• Расположение
• Идентификаторы
• Данные об использовании
• Диагностика

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

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт