В последнее время в разнообразных СМИ все чаще мелькает информация о трендах Ecommerce на 2019-й и 2020-й годы и практически во всех упоминается AR. Сегодня хотел рассказать о нашем опыте внедрения технологии дополненной реальности для интернет-магазина.
Технология интересна и полезна для пользователя, поскольку помогает примерять товары в режиме реального времени.
Предыстория
Не так давно мы взяли в работу проект, интернет-магазин оптики. На предпроектном анализе на сайтах конкурентов выявилась интересная особенность, 3Д-примерка. Она показалась значимой, так как увеличивала время пребывания пользователя на сайте и вероятность совершения покупки.
После поверхностного изучения и размышления заказчику было сказано, что мы разберемся и сможем реализовать эту опцию не хуже других. К слову, данный модуль у всех был реализован на Flash.
Столкновение с реальностью
Когда разработка проекта близилась к завершению, и он уже был размещен на боевом сервере, пришло время вспомнить о данном модуле. В сам процесс разработки мы углубляться не будем, там все как у всех. Те, кого заинтересовал проект, могут почитать о нем, перейдя по ссылке https://wbest.ru/portfolio/magazin-s-dopolnennoy-real-nost-yu/.
Мы начали зондировать почву на предмет официального разработчика модуля 3Д-примерки. Это оказалось несложно, у Flash-приложений есть лицензионное соглашение, которое ведет прямиком на сайт разработчика.
Оставили заявку на их сайте и стали ждать. Прошла неделя, вторая, ответа нет. Отправили снова, на этот раз на двух языках, русском и английском и – о чудо! – в ответ приходит письмо, суть которого заключалась в предложении созвониться и пообщаться в скайпе.
Отмечу, что письмо было на английском. Добавили аккаунт в Skype, время было назначено, среда или четверг, история умалчивает. В назначенное время набираем, и каково было моё удивление, когда на том конце я слышу французский язык. Сделали быстрый перевод через Гугл-переводчик и перешли на английский, но это тоже не помогло: несовершенное знание разговорного английского с двух сторон не позволило нормально разговаривать. Гугл-переводчик нас опять спас, и после пяти минут переписки где-то в недрах их офиса нашлась девушка из отдела поддержки, которая знала русский.
На 60 минут разговора она стала нашим переводчиком. После короткого знакомства перешли к сути, где нам озвучили цены. Годовая лицензия на данный модуль приближалась к 1 млн 500 тыс. рублей по зимнему курсу евро (цена называлась именно в них). Плюс к этому, чтобы создавать 3Д-рендеры очков и оправ, нам потребуется еще установка за 20 тыс. евро (но это разово). Мы сказали, что подумаем, и ушли думать.
Заказчику были озвучены данные условия, что, конечно, оказалось значительно дороже, чем ожидалось. Данный блок было решено отложить на неопределённое время.
Поиск решения
Прошел примерно месяц, меня не покидала мысль, что решение существует, но я его просто не вижу. Конечно, над этим я не размышлял 24/7, но примерно несколько раз в неделю вспоминал.
Был, конечно, вариант реализации по следующему принципу:
Человек делает селфи, загружает фото на сайте, выбирает модель оправы, масштабирует ее и располагает ползунками поверх своего фото, но данный способ был отброшен из-за его непрактичности, бесполезности и бесперспективности.
Не помню, каким именно образом, но мне в голову наконец-то пришла здравая мысль: на дворе 2018-й, должны быть какие-то разработки, задействующие веб-камеру и браузер!
Серфинг забугорного Google подтвердил мои мысли. Все оказалось даже проще, чем я думал. Чтобы получить видеопоток с веб-камеры, достаточно было подключить JS и написать пару строк в HTML. После этого мы смогли видеть себя на экране.
Дело оказалось в шляпе, осталось только сверху изображения разместить фото товара, конечно PNG и с прозрачным фоном.
Реализация
Получение видеопотока с камеры оказалось лишь первым этапом. После однодневных тестов с наложением фото были сделаны выводы, что человек будет крутить головой, и вероятность, что оправа хоть как-то ему подойдет, стремилась к нулю.
Следующая задача состояла в том, чтобы заставить изображение оправы «надеваться», или более просто определять, следить и позиционировать фото в зависимости от положения зрачков на видео. Задача казалась очень сложной, но мое образование инженера по комплексной защите объектов информации говорило, что это не так. Я знал, что данная технология уже работает примерно с 90-х годов.
Осталось только найти вариант реализации на HTML5. Опять прибегли к помощи Google, и быстрый серф нашел несколько китов, функционал которых практически полностью повторял приложение MSQRD. Все киты (их нашлось два) оказались платными, а убеждение, что если кто-то сделал, то и мы сможем, заставило продолжать искать решение.
Примерно через два дня меня осенило зайти посерфить на Github, и – о чудо! – там оказался нужный мне проект. Было несколько вариантов реализации для приложения, а также JS+HTML, который мы и взяли на тесты.
Было много функций маски, замена лиц и прочее, среди них были две особенно интересных, это работа с PNG и 3D-рендерами.
Как вы поняли, было два варианта развития: использование фотографий или 3D-рендеров. Рендеры показались более интересными, и мы начали пробовать их создавать: взяли один предмет, сфотографировали со всех ракурсов по кругу, и начали пробовать делать рендер.
Нашли видео на ютубе о том, как молодой человек без труда примерно за 20 минут достигал нужного нам результата. Попытка повторить его действия не увенчалась успехом, поскольку программа, которую он использовал в видео, уже не работала и не поддерживалась. Как мы поняли, разработчик данного ПО был поглощен другой компанией и переделан в онлайн-сервис, который не поддерживал функции создания 3Д-рендера на основе фото.
В общем, данную задачу мы так и не решили. Если среди читателей найдется специалист, который подскажет, с помощью чего можно из фото сделать вот такой рендер, будем ждать его на нашей почте [email protected]. В ответ получит респект и уважуху.
Перешли к использованию фотографий. Наши дизайнеры быстренько вырезали десяток тестовых оправ, и мы начали переносить функционал проекта Githab на сайт.
Примерно за пару-тройку дней тестовая страница была собрана, убран весь лишний функционал, чтобы ускорить работу.
.jpg)
Согласовали все моменты с заказчиком и перенесли функционал на боевой каталог. Поскольку для интернет-магазина мы использовали Битрикс и для примерки нам нужна была только фотография, было добавлено еще одно свойство – файл, в который менеджер магазина мог загружать обработанные фото.
Сейчас в нашем каталоге примерно 100 позицией с данной функцией и на подходе еще больше моделей солнцезащитных очков.
Примерка очков на сайте from Webest on Vimeo.
Аспекты и интересные нюансы
Данный вариант реализации неплохо работает в последних версиях браузеров и на мобильных телефонах на Android с последней версией браузера.
Для функционирования нужен SSL-сертификат, Chrome не дает получить видеопоток по HTTP.
Данный вариант реализации более перспективный, если сравнивать его с Flash, которая вскоре вовсе перестанет поддерживаться.
Серфинг видеопотока довольно затратный с точки зрения канала. Достаточно быстро работает практически на любом Wi-Fi или проводном Интернете вообще на десктопе. Достаточно неплохо показывает себя на 4G; 3G уже подлагивает.
Мобильное приложение для 3Д-примерки, конечно, более выгодно, поскольку так можно получить видеопоток непосредственно с камеры, минуя прокладку браузера и передачи данных.
В нашей реализации всплывающее окно довольно долго инициализируется, примерно 15–25 секунд в зависимости от Интернета (ловит поток и загружает JS), но после первой загрузки работает довольно быстро.
Еще одна особенность работы в браузере: нужно получить разрешение от пользователя, позволяющее инициализировать камеру. Это увеличивает безопасность.
Что получили на выходе
В качестве итога данной статьи – самый важный вопрос: увеличились ли продажи интернет-магазина после внедрения данной фичи?
На этот вопрос, к сожалению, однозначного ответа сейчас у нас нет, поскольку выборка по товарам слишком мелкая, а данных для анализа еще не так много.
Судя по данным Яндекс.Метрики, мы можем сравнить ключевые метрики интернет-магазина, где была реализована онлайн-примерка с общей совокупностью всех визитов, на одном временном интервале:
Ключевые метрики в целом по интернет - магазину
Ключевые метрики на странице с онлайн - примеркой
Мы видим, что процент отказов снизился в несколько раз, а время сессии и глубина просмотренных страниц увеличилась.
За то время, как была внедрена онлайн-примерка общая конверсия интернет-магазина увеличилась на 0,11
Это значит, люди данной фичей пользуются.
Как развиваемся сейчас
В ближайшей перспективе будем учить систему работать на iOs и ускорять ее работу, чтобы загрузка не была мучительно долгой. Не исключено, хотя маловероятно, что данный вопрос решим, создав мобильное приложение.
Вы скажете, что оправы и очки достаточно узкоспециализированная сфера применения данного модуля, и нам повезло, что мы нашли решение на Githab. Возможно.
Но если пофантазировать, можно легко найти более широкое применение, например, в сфере продажи одежды или мебели.
Модуль без труда дает возможность переключаться с фронтальной камеры на основную, и уже с помощью зеркала позволяет примерять, например, платье или свитер. Нужно только решить вопрос позиционирования, следить за плечами можно довольно просто.
В мебельной сфере на экране телефона можно примерно прикинуть, как будет смотреться диван в комнате или кресло в кабинете.
Заключение
Спасибо, что добрались до конца. Надеюсь, данная информация оказалось вам полезной.