Для Координационного центра Правительства РФ
CNP
Система управления медиаконтентом: подготовка совещаний и управление видеостеной с планшета.
Система управления медиаконтентом разработана для АНО «Аналитический центр при Правительстве Российской Федерации» и применяется в Координационном центре Правительства РФ. Она объединяет подготовку материалов к совещанию и управление их показом: документы, видео, камеры, веб-системы и аналитические панели выводятся на большую видеостену.
Операторы, докладчики и специалисты, которые готовят совещания, презентации и аналитические материалы для Координационного центра.
- Задача
- Дать оператору удобное управление разными материалами на видеостене во время совещаний и докладов.
- Что сделано
- Спроектировал архитектуру системы и разработал серверную часть, планшетный пульт оператора и приложение на Electron для показа материалов на видеостене.
- Результат
- Подготовка и проведение показа связаны в одном рабочем процессе: оператор выбирает материалы и управляет экраном с планшета.
Моя роль
Проектирование архитектуры всей системы, разработка бэкенда, операторского веб-пульта и приложения на Electron для показа материалов на видеостене.
- Состав работ
- Архитектура системы / Backend / Frontend / Electron
- Период
- 2021—2024
- Статус
- завершён
Стек
- Vue
- NestJS
- Electron
- TypeScript
- Nuxt
- Vuex
- Socket.IO
- PostgreSQL
- Redis
Панорамный экран объединяет несколько аналитических панелей, а рабочие места расположены перед ним. Фото из материалов проекта.
Как связаны части системы
Оператор работает с планшетом. Сервер связывает его действия с материалами и экранным контуром, а проигрыватель выводит выбранное содержимое на видеостену. Текущее состояние показа возвращается в пульт.
Выберите элемент схемы, чтобы узнать подробнее
Оператор работает с планшетом. Сервер связывает его действия с материалами и экранным контуром, а проигрыватель выводит выбранное содержимое на видеостену. Текущее состояние показа возвращается в пульт.
- Пульт оператора
Подготовка и управление с планшета
- Материалы и данные
Документы, видео, камеры и виджеты
- Сервер системы
Материалы, права, команды и состояние
- Проигрыватель
Подготовка содержимого к показу
- Видеостена
Общий экран для участников совещания
Состояние показа возвращается в пульт
Камера, документы и веб-приложение занимают отдельные области большого экрана. Фото из материалов проекта.
В пульте видна структура рабочего стола, а на экранах — графики, показатели и статистика. Фото из материалов проекта.
От планшета оператора до видеостены правительственного зала
Рабочая среда проекта — Координационный центр Правительства РФ. В одном зале нужно показывать доклады, документы, видеосвязь и показатели, сохраняя возможность менять содержимое и компоновку по ходу совещания.
На планшете видны эпизоды сценария, а на экране за ним — выбранный материал. Фото из материалов проекта.
Сенсорный пульт используется рядом с рабочими мониторами и оборудованием зала. Фото из материалов проекта.
Планшетный пульт расположен рядом с мониторами и оборудованием рабочего места. За ними видны ряды мест участников совещания. Фото из материалов проекта.
Зал в работе: участники, доклады и общие экраны
На публичных фотографиях — переговоры глав правительств России и Казахстана в Координационном центре 2 ноября 2021 года. Участники сидят за рабочими местами с мониторами и микрофонами. На снимках видны разные варианты показа: документ на общем экране, а также видеодокладчик рядом с транспортной картой.
Делегации за рабочими местами в зале во время переговоров 2 ноября 2021 года.
Рабочие места участников обращены к общему экрану с материалами доклада. Фотография опубликована 2 ноября 2021 года.
Во время обсуждения транспортной инфраструктуры на видеостене одновременно показаны докладчик и карта маршрутов. Фотография опубликована 2 ноября 2021 года.
От подготовки совещания до показа в зале
Материалы и порядок выступления готовятся заранее. Во время совещания оператор переключает эпизоды, управляет отдельными областями экрана и видит состояние показа в пульте.
Выберите элемент схемы, чтобы узнать подробнее
Материалы и порядок выступления готовятся заранее. Во время совещания оператор переключает эпизоды, управляет отдельными областями экрана и видит состояние показа в пульте.
- Подготовить
Собрать материалы и сценарий
- Выбрать
Открыть нужный эпизод на планшете
- Показать
Передать команду на видеостену
- Увидеть состояние
Получить состояние экрана
Материалы доклада выводятся на видеостену перед рабочими местами участников. Фото из материалов проекта.
На выставке «Россия» на ВДНХ
Команда проекта также участвовала в выставке-форуме «Россия» на ВДНХ. В экспозиции Координационного центра посетители могли познакомиться с работой правительственной площадки: увидеть ситуационный зал, большие экраны и интерактивные зоны.
Панорамная видеостена и рабочие места с конференционными микрофонами знакомят посетителей с устройством Координационного центра.
Экскурсия по экспозиции: карта России, экранные материалы и сенсорные терминалы показывают посетителям работу правительственной площадки.
Что нужно согласовать за одним действием оператора
За выбором материала на планшете стоит работа нескольких приложений, разных источников и независимых областей большого экрана.
Разные источники в одном показе
Документы, видео, камеры, веб-страницы и обновляемые виджеты требуют разных способов загрузки, просмотра и управления.
Пульт и экран знают об одном показе
Команды передаются через сервер, а состояние экрана возвращается оператору: активный сценарий, страницы материалов, звук и таймеры.
У каждой области свой контент
Большой экран делится на области и колонки. У материалов могут быть собственные страницы, очередность и длительность воспроизведения.
Понятно, кто управляет показом
Роли и права определяют доступ к материалам и операциям. Между операторами предусмотрена передача управления.
Интерфейс оператора крупным планом
Пульт объединяет сценарии, библиотеку материалов, компоновку экранов и управление показом. Ниже — снимки интерфейса с демонстрационным контентом.
С главного экрана оператор переходит к презентациям, статусам и рабочим столам. Данные и материалы на экране созданы для демонстрации интерфейса.
Активный эпизод, материалы и навигация по сценарию собраны на одном экране. Данные и материалы на экране созданы для демонстрации интерфейса.
Виджеты выбираются из библиотеки и размещаются в сетке будущего экрана. Данные и материалы на экране созданы для демонстрации интерфейса.
Технические детали
Пульт оператора, административная панель и экранный проигрыватель связаны общим сервером. Через HTTP API загружаются материалы и изменяются сценарии, а Socket.IO передаёт команды управления и текущее состояние показа. Сервер проверяет права и связывает пользователей и экраны конкретной площадки.
Сенсорное управление должно оставаться понятным, когда на видеостене одновременно открыто несколько материалов. Страницы документов, видео, звук и таймеры связаны с общим состоянием показа. При работе нескольких операторов роли, права и передача управления определяют, кто может менять содержимое экрана.
Операторский пульт построен на Nuxt, Vue, Vuex и Vuetify, административная панель — на React. Сервер на NestJS, TypeORM и PostgreSQL хранит материалы, сценарии и настройки доступа. Redis и очереди Bull используются для фонового обновления данных и обработки материалов. Экранный проигрыватель на Electron, Nuxt и Vue получает команды и выводит содержимое в заданных областях экрана.
Обсудим вашу задачу?
Расскажите, что нужно сделать: сайт, магазин, сервис или автоматизацию работы.