Номинируйте на конкурс Workspace Digital Awards телеграм и видео каналы, бренд-медиа и статьи. Скидка по промокоду media — 20%!
КЦ СПЕЦзаказ
Платформа для вендинговых машин с 3D-визуализацией товаров
КЦ СПЕЦзаказ
#Разработка сайтов под ключ

Платформа для вендинговых машин с 3D-визуализацией товаров

15 
КЦ СПЕЦзаказ Россия, Томск
Поделиться: 0 0 0
Платформа для вендинговых машин с 3D-визуализацией товаров
Клиент

ООО "Цифровые решения"

Сфера

Информационные технологии и интернет

Регион

Россия, Москва

Тип сайта

Интернет-магазин, Порталы и сервисы, Промо-сайт

Сдано

Сентябрь 2025

Задача

Задачи:

1. Демонстрация видеоконтента на вертикальных экранах формата 4K (киоски, digital signage)

2. Интерактивное взаимодействия с пользователями через тач-интерфейс

3. Перенаправление пользователей к связанным интерактивным приложениям (каталоги товаров, информационные страницы)

4. Анализ эмоций пользователя при помощи веб-камеры для сбора маркетинговой аналитики

5. Сбор детальной статистики о просмотрах, переходах и действиях пользователей

Решение

1. Видеоплеер и интерактивность:

- Реализован бесконечный вертикальный свайп-плеер для видео

- Автоматическое воспроизведение и зацикливание видео

- Плавные переходы между видеороликами

- Привязка каждого видео к своему интерактивному приложению

- Визуальные подсказки для пользователя (анимация "коснитесь для перехода")

- Восстановление позиции при возврате из приложения

2. Система администрирования:

- Защищенная админ-панель с PIN-кодом (bcrypt шифрование)

- Загрузка и управление видеофайлами (поддержка mp4, webm, mov, avi, mkv)

- Загрузка HTML-страниц и ZIP-архивов приложений

- Изменение порядка видео через drag-and-drop

- Привязка видео к конкретным приложениям

- Изменение PIN-кода администратора

- Скрытый вход в админ-режим

3. Аналитика и метрики:

- Отслеживание просмотров видео - каждое воспроизведение ролика

- Отслеживание переходов - клики от видео к приложениям

- Отслеживание действий пользователей в приложениях с детализацией (цвет, размер, товар и т.д.)

- Расчет конверсии - процент переходов от просмотров

- Экспорт статистики в Excel с 7 листами детальных данных

- Автоматическое сохранение истории - ежедневные дампы метрик в полночь (cron job)

- Сброс метрик с сохранением истории

4. Распознавание эмоций:

- Интеграция с DeepFace AI для анализа лиц

- Определение пола (мужчина/женщина)

- Определение возраста

- Распознавание 7 эмоций (happy, sad, angry, surprise, fear, disgust, neutral)

- Автоматический захват фото с веб-камеры при действиях пользователя

- SQLite база данных для хранения результатов анализа

- API для получения статистики эмоций

- Настройка включения/выключения камеры через админ-панель

- Throttling (ограничение частоты) захвата - минимум 2 секунды между снимками

5. Готовые демо-приложения:

Проект включает 3 полностью реализованных интерактивных приложения:

5.1. Electronics - каталог электронных продуктов:

- 3D модели товаров (Смартфон, Планшет, Наушники) с интерактивным взаимодействием

- Переключение цветов товара

- Информация о характеристиках

- QR-код для покупки

5.2. Candy - каталог витаминов/БАДов:

- Карточки товаров с детальной информацией

- Многостраничные слайдеры с описанием

- Информация о составе и применении

- Бейджи (NEW, TOP, SALE)

5.3. Clothing - каталог одежды:

- Интерактивные 3D модели футболок и худи

- Смена цветов и видов (front/back)

- Zoom и pan управление

- Размерная сетка

- Корзина покупок

1Проектирование и согласование требований

- Анализ требований заказчика

- Определение целевой аудитории (киоски, торговые центры)

- Выбор формата экрана (3840x2160, вертикальная ориентация)

- Определение типов контента (видео + интерактивные приложения)

- Проектирование архитектуры

- Выбор технологического стека (Node.js + Python)

- Проектирование микросервисной архитектуры

- Определение API endpoints и структуры данных

- Разработка схемы базы данных для аналитики

- Проектирование UX/UI

- Разработка концепции бесконечного вертикального свайпа

- Проектирование интерфейса админ-панели

- Проектирование системы визуальных подсказок

- Функциональные требования к видеоплееру

- Требования к системе аналитики и метрик

- Требования к интеграции AI распознавания эмоций

- Требования безопасности (аутентификация, шифрование)

Результаты этапа:

- Утвержденное техническое задание

- Архитектурная схема системы

- Макеты интерфейсов

- Техническая спецификация API

- План разработки

2Разработка основного функционала

1) Backend разработка:

- Node.js сервер (Express):

- Реализация REST API (18 endpoints)

- Система аутентификации с bcrypt шифрованием

- Модуль загрузки и управления видеофайлами (Multer, до 500MB)

- Модуль загрузки HTML/ZIP приложений (до 150MB)

- Система метрик и аналитики (3 типа событий)

- Интеграция с ExcelJS для экспорта отчетов

- Реализация cron jobs для автоматических дампов

- Защищенное хранилище данных (Base64 + JSON)

- Python сервер (FastAPI):

- API для анализа эмоций (DeepFace интеграция)

- SQLAlchemy ORM с моделью FaceAnalysis

- Endpoints для статистики эмоций

- Система обработки изображений (Pillow)

- Валидация и обработка ошибок

- CORS middleware для кросс-доменных запросов

2) Frontend разработка:

2.1. Видеоплеер:

- Бесконечный вертикальный свайп

- Автоматическое воспроизведение и зацикливание

- Система восстановления позиции после возврата

- Анимированные визуальные подсказки

- Оптимизация памяти и производительности под требования железа

2.2 Админ-панель:

- Интерфейс авторизации с PIN-кодом

- Управление видео (загрузка, удаление, reorder)

- Drag-and-drop сортировка

- Загрузка и управление приложениями

- Dashboard с метриками

- Система смены пароля

- Скрытый вход

2.3. Система аналитики:

- Модуль отслеживания просмотров видео

- Модуль отслеживания переходов (клики)

- Детальное отслеживание действий в приложениях

- Интеграция захвата эмоций через веб-камеру

- Throttling системы (минимум 2 сек между снимками)

3) Демо-приложения:

3.1. Electronics - каталог электронных продуктов:

- 3D визуализация (11 GLB моделей)

- Переключение цветов товара

- Детальная информация о характеристиках

- QR-код интеграция

3.2 Candy - каталог витаминов/БАДов:

- Карточная система навигации

- Многостраничные слайдеры описаний

- Бейдж система (NEW, TOP, SALE)

- Детальная информация о составе

- QR-код интеграция

3.3. Clothing - каталог одежды:

- Интерактивные 3D модели одежды

- Переключение видов (front/back)

- Zoom и pan управление

- Корзина покупок

- QR-код интеграция

Результаты этапа:

- Полностью функционирующий Node.js сервер

- Работающий Python API для анализа эмоций

- Видеоплеер с полным функционалом

- Админ-панель с управлением контентом

- Система сбора и хранения метрик

- 3 готовых демо-приложения

- Интеграция AI распознавания эмоций

- Экспорт статистики в Excel

3Тестирование и оптимизация

1. Функциональное тестирование:

- Тестирование видео-плеера

- Тестирование админ-панели

- Проверка аутентификации и безопасности

- Тестирование аналитики

- Тестирование AI модуля

- Тестирование работы с веб-камерой

2. Оптимизация производительности:

2.1. Backend оптимизация:

- Оптимизация загрузки больших файлов

- Индексация базы данных SQLite

- Оптимизация экспорта Excel (обработка больших датасетов)

- Cleanup старых метрик

2.2 Frontend оптимизация:

- Оптимизация использования памяти видеоплеером

- Ленивая загрузка приложений

- Минификация CSS/JS

- Оптимизация захвата с камеры (разрешение 1280x720)

- Добавление cleanup при уходе со страницы

Результаты этапа:

- Протоколы функционального тестирования

- Отчет о производительности

- Исправление багов и недочетов

- Оптимизированный код

- Документация по выявленным ограничениям

4Финализация и сдача проекта

1. Доработки по результатам тестирования:

- Исправление критических багов

- Исправление утечек памяти в видеоплеере

- Улучшение анимаций и переходов

- Добавление индикаторов загрузки

- Улучшение обработки ошибок

2. Документация:

- Техническая документация

- Пользовательская документация

- Руководство администратора

- Инструкция по загрузке видео

- Инструкция по подключению приложений

- Руководство по работе с аналитикой

3. Передача проекта:

- Обучение работе с админ-панелью и аналитикой

- Демонстрация загрузки контента

- Демонстрация подключения новых приложений

Результаты этапа:

- Полностью протестированная система

- Исправленные баги и доработки

- Полный комплект документации

- Обученный персонал

- Production-ready проект

- Акт приема-передачи работ

Результат

Цель 1. Демонстрация видеоконтента на вертикальных экранах.

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

Результат: цель полностью выполнена. Реализован вертикальный видеоплеер в формате бесконечной ленты (по принципу TikTok), с поддержкой популярных видеоформатов, автозапуском, зацикливанием, плавными переходами между роликами, поддержкой 4K-видео большого размера и визуальными подсказками для пользователей. Система корректно работает с любым количеством видео, оптимизирует использование памяти и запоминает позицию просмотра при возврате из приложения.

Цель 2. Интерактивное взаимодействие с пользователями.

Задача состояла в том, чтобы превратить просмотр видео из пассивного в интерактивный опыт.

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

Цель 3. Анализ поведения и эмоций пользователей.

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

Результат: цель выполнена и дополнительно расширена.

Реализована поведенческая аналитика на трех уровнях:

на уровне видео — просмотры, переходы в приложения, конверсия;

на уровне приложений — количество сессий, среднее время взаимодействия;

на уровне действий — фиксация конкретных действий пользователей внутри приложений (например, выбор цвета, размера, добавление товара).

Дополнительно реализована AI-аналитика эмоций и демографии: определение пола, примерного возраста и эмоций пользователя (радость, грусть, злость, удивление, страх, отвращение, нейтральное состояние). Фото с камеры фиксируются во время взаимодействий с защитой от перегрузки системы. Все данные сохраняются и могут использоваться для последующего анализа и отчетов.

Цель 4. Сбор детальной статистики и отчетность.

Задача — предоставить инструменты для анализа эффективности контента и принятия бизнес-решений.

Результат: цель полностью выполнена. Система собирает данные в реальном времени без влияния на пользовательский опыт, автоматически агрегирует статистику и хранит историю до одного года. Реализован экспорт отчетов в Excel с разбивкой по разным типам данных: общая сводка, просмотры видео, переходы, отказы, детали кликов, сессии в приложениях и действия пользователей. Отдельно доступен API для работы с эмоциональной статистикой и статистическими данными.

Комментарий агентства

Евгений Шип
Евгений Шип

Генеральный директор (CEO)

В рамках дальнейшего развития проекта планируется реализация системы адаптивной 3D визуализации сцены с динамической перспективой, которая будет реагировать на положение головы пользователя в пространстве. Используя технологию отслеживания лица (на базе уже интегрированной системы камеры и возможностей библиотек компьютерного зрения, таких как MediaPipe), система сможет в реальном времени изменять угол обзора 3D объектов, создавая эффект параллакса и объемного изображения без использования специальных очков. Дополнительно планируется внедрение системы управления жестами, которая позволит пользователям взаимодействовать с контентом бесконтактно: поворачивать 3D модели движениями рук, переключать товары свайпами в воздухе, масштабировать объекты жестами "щипка" и активировать функции указательными движениями. Такой подход значительно повысит вовлеченность аудитории, создаст wow-эффект и выделит киоск среди традиционных digital signage решений.


Стек технологий

  • HTML HTML Язык программирования
  • JavaScript JavaScript Язык программирования
  • Python Python Язык программирования
  • FastAPI FastAPI Фреймворк/библиотека
  • Express Express Фреймворк/библиотека
  • SQLite SQLite База данных

Оцените кейс
Спасибо за оценку
Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

КЦ СПЕЦзаказ с удовольствием обсудит вашу задачу

Оставить заявку