projects
projects
projects
projects
IoT-система управления шлагбаумами — Мобильное приложение + Веб + Умные контроллеры
Разрбор кейса нашего клиента. Задачи > что сделали > кто сделал > результат
Дата публикации
Тип проекта
Технологиеский стэк
.jpg)
ЗАДАЧА
Создать систему, которая позволит:
- Управлять шлагбаумами дистанционно через приложение или веб.
- Добавлять пользователей и выдавать пропуска.
- Открывать шлагбаум по телефону, QR-коду, геолокации или BLE.
- Вести журнал проездов и событий.
- Подходить для дворов, парковок, офисных центров, ЖК.
МЫ СОЗДАЛИ СИСТЕМУ УМНОГО КОНТРОЛЛЕРА
1. Мобильное приложение
- Открытие шлагбаума одним нажатием.
- Автооткрытие при приближении (геофенсинг).
- QR-пропуска для гостей.
- История открытий.
- Роли: владелец, администратор, житель, гость.
2. Веб-панель администратора
- Добавление пользователей и выдача прав доступа.
- Настройка зон, нескольких шлагбаумов, пропусков.
- Отчёты по пользователям, датам, времени.
- Журналы инцидентов и попыток открытия.
- Управление устройствами: статус контроллера, связь, обновления.
3. IoT-модуль / Контроллер
- Подключение к существующим шлагбаумам.
- Wi-Fi / LTE / Ethernet.
- Защищённый протокол обмена.
- OTA-обновления прошивок.
- Диагностика в реальном времени.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Фоновое видео с YouTube</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
overflow-x: hidden;
}
.video-container {
position: relative;
width: 100%;
height: 100vh; /* Занимает всю высоту экрана */
overflow: hidden;
}
.video-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Затемнение видео (опционально) */
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
/* Контент поверх видео (опционально) */
.content {
position: relative;
z-index: 2;
color: white;
text-align: center;
padding-top: 20%;
font-size: 2em;
}
/* Адаптивность для iframe */
iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 56.25vw; /* 16:9 соотношение сторон */
min-height: 100vh;
min-width: 177.77vh; /* 16:9 соотношение сторон */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="video-container">
<div class="video-wrapper">
<!--
Замените VIDEO_ID на ID вашего видео с YouTube
Например: для https://www.youtube.com/watch?v=dQw4w9WgXcQ
VIDEO_ID будет dQw4w9WgXcQ
Параметры:
autoplay=1 - автоматическое воспроизведение
mute=1 - видео без звука (обязательно для автовоспроизведения в большинстве браузеров)
loop=1 - зацикливание
playlist=VIDEO_ID - необходимо для корректного зацикливания
controls=0 - скрыть элементы управления
showinfo=0 - скрыть информацию о видео
rel=0 - не показывать связанные видео в конце
modestbranding=1 - минимизировать логотип YouTube
-->
<iframe
src="https://youtu.be/Gu1YLoaEa_k"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
<div class="video-overlay"></div>
<!-- Опциональный контент поверх видео -->
<div class="content">
<h1>Ваш контент здесь</h1>
<p>Видео на весь экран с автовоспроизведением и зацикливанием</p>
</div>
</div>4. Интеграции
- Домофоны / системы доступа.
- Парковочные терминалы.
- API для внешних парковочных сервисов.
5. Команда
IoT-инженер, аналитик, UX/UI, backend, мобильные разработчики, QA, DevOps.
РЕЗУЛЬТАТ
- Полное управление шлагбаумами через приложение.
- Сокращение затрат на физические пульты и брелоки.
- Повышение безопасности — все действия фиксируются.
- Возможность гибкого масштабирования: от одного двора до сетей ЖК.
.jpg)
No items found.