--- title: "CNP — Для Координационного центра Правительства РФ · alekhin.dev" description: "Система управления медиаконтентом: подготовка совещаний и управление видеостеной с планшета." canonical_url: "https://alekhin.dev/projects/cnp/" meta: "og:description": "Система управления медиаконтентом: подготовка совещаний и управление видеостеной с планшета." "og:image": "https://alekhin.dev/_og/s/o_79fabb7c3e3716c8.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "CNP — Для Координационного центра Правительства РФ" "twitter:image": "https://alekhin.dev/_og/s/o_79fabb7c3e3716c8.png" --- > Index of every page on this site: [llms.txt](https://alekhin.dev/llms.txt) [К проектам](https://alekhin.dev/#projects)2021—2024 Для Координационного центра Правительства РФ # CNP Система управления медиаконтентом: подготовка совещаний и управление видеостеной с планшета. Система управления медиаконтентом разработана для АНО «Аналитический центр при Правительстве Российской Федерации» и применяется в Координационном центре Правительства РФ. Она объединяет подготовку материалов к совещанию и управление их показом: документы, видео, камеры, веб-системы и аналитические панели выводятся на большую видеостену. Операторы, докладчики и специалисты, которые готовят совещания, презентации и аналитические материалы для Координационного центра.
Задача
Дать оператору удобное управление разными материалами на видеостене во время совещаний и докладов.
Что сделано
Спроектировал архитектуру системы и разработал серверную часть, планшетный пульт оператора и приложение на Electron для показа материалов на видеостене.
Результат
Подготовка и проведение показа связаны в одном рабочем процессе: оператор выбирает материалы и управляет экраном с планшета.
## Моя роль Проектирование архитектуры всей системы, разработка бэкенда, операторского веб-пульта и приложения на Electron для показа материалов на видеостене.
Состав работ
Архитектура системы / Backend / Frontend / Electron
Период
2021—2024
Статус
завершён
## Стек - Vue - NestJS - Electron - TypeScript - Nuxt - Vuex - Socket.IO - PostgreSQL - Redis *Видеостена в Координационном центре* Панорамный экран объединяет несколько аналитических панелей, а рабочие места расположены перед ним. Фото из материалов проекта. ## Как связаны части системы Оператор работает с планшетом. Сервер связывает его действия с материалами и экранным контуром, а проигрыватель выводит выбранное содержимое на видеостену. Текущее состояние показа возвращается в пульт. Выберите элемент схемы, чтобы узнать подробнее Оператор работает с планшетом. Сервер связывает его действия с материалами и экранным контуром, а проигрыватель выводит выбранное содержимое на видеостену. Текущее состояние показа возвращается в пульт. - **Пульт оператора** Подготовка и управление с планшета - **Материалы и данные** Документы, видео, камеры и виджеты - **Сервер системы** Материалы, права, команды и состояние - **Проигрыватель** Подготовка содержимого к показу - **Видеостена** Общий экран для участников совещания Состояние показа возвращается в пульт *Несколько источников на одной видеостене* Камера, документы и веб-приложение занимают отдельные области большого экрана. Фото из материалов проекта. *Компоновка виджетов и аналитические панели* В пульте видна структура рабочего стола, а на экранах — графики, показатели и статистика. Фото из материалов проекта. ## От планшета оператора до видеостены правительственного зала Рабочая среда проекта — Координационный центр Правительства РФ. В одном зале нужно показывать доклады, документы, видеосвязь и показатели, сохраняя возможность менять содержимое и компоновку по ходу совещания. *Одна презентация в пульте и на экране* На планшете видны эпизоды сценария, а на экране за ним — выбранный материал. Фото из материалов проекта. *Пульт рядом с экранами зала* Сенсорный пульт используется рядом с рабочими мониторами и оборудованием зала. Фото из материалов проекта. *Рабочее место оператора в зале* Планшетный пульт расположен рядом с мониторами и оборудованием рабочего места. За ними видны ряды мест участников совещания. Фото из материалов проекта. ## Зал в работе: участники, доклады и общие экраны На публичных фотографиях — переговоры глав правительств России и Казахстана в Координационном центре 2 ноября 2021 года. Участники сидят за рабочими местами с мониторами и микрофонами. На снимках видны разные варианты показа: документ на общем экране, а также видеодокладчик рядом с транспортной картой. *Участники совещания в Координационном центре* Делегации за рабочими местами в зале во время переговоров 2 ноября 2021 года. [Правительство России · 2 ноября 2021](https://t.me/government_rus/1083) *Зал во время межправительственных переговоров* Рабочие места участников обращены к общему экрану с материалами доклада. Фотография опубликована 2 ноября 2021 года. [Правительство России · 2 ноября 2021](https://t.me/government_rus/1083) *Видеодокладчик и карта на одном экране* Во время обсуждения транспортной инфраструктуры на видеостене одновременно показаны докладчик и карта маршрутов. Фотография опубликована 2 ноября 2021 года. [Пресс-служба Правительства Казахстана · 2 ноября 2021](https://primeminister.kz/en/news/a-mamin-rf-ukimetinin-toragasy-m-mishustinmen-kelissoz-zhurgizdi-2104212) ## От подготовки совещания до показа в зале Материалы и порядок выступления готовятся заранее. Во время совещания оператор переключает эпизоды, управляет отдельными областями экрана и видит состояние показа в пульте. Выберите элемент схемы, чтобы узнать подробнее Материалы и порядок выступления готовятся заранее. Во время совещания оператор переключает эпизоды, управляет отдельными областями экрана и видит состояние показа в пульте. - **Подготовить** Собрать материалы и сценарий - **Выбрать** Открыть нужный эпизод на планшете - **Показать** Передать команду на видеостену - **Увидеть состояние** Получить состояние экрана *Презентация на большом экране* Материалы доклада выводятся на видеостену перед рабочими местами участников. Фото из материалов проекта. ## На выставке «Россия» на ВДНХ Команда проекта также участвовала в выставке-форуме «Россия» на ВДНХ. В экспозиции Координационного центра посетители могли познакомиться с работой правительственной площадки: увидеть ситуационный зал, большие экраны и интерактивные зоны. *Ситуационный зал выставочного павильона* Панорамная видеостена и рабочие места с конференционными микрофонами знакомят посетителей с устройством Координационного центра. [Александр Точка / Tochka Zрения · 10 ноября 2023](https://tochka.press/2023/11/10/100380/) *Посетители у интерактивных экранов* Экскурсия по экспозиции: карта России, экранные материалы и сенсорные терминалы показывают посетителям работу правительственной площадки. [ВШССН МГУ · 7 декабря 2023](https://vshssn.msu.ru/posts/ekskursiya-na-vystavku-koordinacionnogo-centra-pri-pravitel-stve-rf-na-vdnh) ## Что нужно согласовать за одним действием оператора За выбором материала на планшете стоит работа нескольких приложений, разных источников и независимых областей большого экрана. - ### Разные источники в одном показе Документы, видео, камеры, веб-страницы и обновляемые виджеты требуют разных способов загрузки, просмотра и управления. - ### Пульт и экран знают об одном показе Команды передаются через сервер, а состояние экрана возвращается оператору: активный сценарий, страницы материалов, звук и таймеры. - ### У каждой области свой контент Большой экран делится на области и колонки. У материалов могут быть собственные страницы, очередность и длительность воспроизведения. - ### Понятно, кто управляет показом Роли и права определяют доступ к материалам и операциям. Между операторами предусмотрена передача управления. ## Интерфейс оператора крупным планом Пульт объединяет сценарии, библиотеку материалов, компоновку экранов и управление показом. Ниже — снимки интерфейса с демонстрационным контентом. *Главный экран пульта (демонстрационный контент)* С главного экрана оператор переходит к презентациям, статусам и рабочим столам. Данные и материалы на экране созданы для демонстрации интерфейса. *Управление презентацией (демонстрационный контент)* Активный эпизод, материалы и навигация по сценарию собраны на одном экране. Данные и материалы на экране созданы для демонстрации интерфейса. *Конструктор рабочего стола (демонстрационный контент)* Виджеты выбираются из библиотеки и размещаются в сетке будущего экрана. Данные и материалы на экране созданы для демонстрации интерфейса.
Технические детали Пульт оператора, административная панель и экранный проигрыватель связаны общим сервером. Через HTTP API загружаются материалы и изменяются сценарии, а Socket.IO передаёт команды управления и текущее состояние показа. Сервер проверяет права и связывает пользователей и экраны конкретной площадки. Сенсорное управление должно оставаться понятным, когда на видеостене одновременно открыто несколько материалов. Страницы документов, видео, звук и таймеры связаны с общим состоянием показа. При работе нескольких операторов роли, права и передача управления определяют, кто может менять содержимое экрана. Операторский пульт построен на Nuxt, Vue, Vuex и Vuetify, административная панель — на React. Сервер на NestJS, TypeORM и PostgreSQL хранит материалы, сценарии и настройки доступа. Redis и очереди Bull используются для фонового обновления данных и обработки материалов. Экранный проигрыватель на Electron, Nuxt и Vue получает команды и выводит содержимое в заданных областях экрана.
## Обсудим вашу задачу? Расскажите, что нужно сделать: сайт, магазин, сервис или автоматизацию работы. ## Связаться [alekhin.v99@gmail.com](mailto:alekhin.v99@gmail.com) [Telegram](https://t.me/alekhin_vv) [GitHub](https://github.com/ValentinAlekhin) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://alekhin.dev/#website","@type":"WebSite","description":"Сайты и магазины, личные кабинеты и автоматизация работы. Помогу разобраться с задачей, сделать и запустить.","inLanguage":"ru-RU","name":"alekhin.dev","url":"https://alekhin.dev/","publisher":{"@id":"https://alekhin.dev/#identity"},"workTranslation":{"@id":"https://alekhin.dev/en/#website"}},{"@id":"https://alekhin.dev/projects/cnp/#webpage","@type":"WebPage","description":"Система управления медиаконтентом: подготовка совещаний и управление видеостеной с планшета.","name":"CNP — Для Координационного центра Правительства РФ","url":"https://alekhin.dev/projects/cnp/","breadcrumb":{"@id":"https://alekhin.dev/projects/cnp/#breadcrumb"},"image":{"@id":"https://alekhin.dev/#/schema/image/1"},"isPartOf":{"@id":"https://alekhin.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://alekhin.dev/projects/cnp/"]}]},{"@id":"https://alekhin.dev/#identity","@type":"Person","email":"mailto:alekhin.v99@gmail.com","jobTitle":"Разработчик сайтов и сервисов","name":"Валентин Алёхин","url":"https://alekhin.dev/","knowsAbout":["TypeScript","Vue","Nuxt","Node.js","Go","SaaS"],"sameAs":["https://github.com/ValentinAlekhin","https://t.me/alekhin_vv"]},{"@id":"https://alekhin.dev/projects/cnp/#/schema/software-application/1","@type":"SoftwareApplication","applicationCategory":"BusinessApplication","description":"Система управления медиаконтентом: подготовка совещаний и управление видеостеной с планшета.","inLanguage":"ru-RU","name":"CNP","operatingSystem":"Web","url":"/projects/cnp/","creator":{"@id":"https://alekhin.dev/#identity"},"image":{"@id":"https://alekhin.dev/#/schema/image/2"},"mainEntityOfPage":{"@id":"https://alekhin.dev/projects/cnp/#webpage"}},{"@id":"https://alekhin.dev/projects/cnp/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"alekhin.dev","item":"https://alekhin.dev","position":1},{"@type":"ListItem","name":"CNP","item":"https://alekhin.dev/projects/cnp/","position":2}]},{"@id":"https://alekhin.dev/#/schema/image/1","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/cnp/room-overview.webp","inLanguage":"ru-RU","url":"https://alekhin.dev/projects/cnp/room-overview.webp"},{"@id":"https://alekhin.dev/#/schema/image/2","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/cnp/room-overview.webp","inLanguage":"ru-RU","url":"https://alekhin.dev/projects/cnp/room-overview.webp"}]} ``` ## Sitemap See the full [sitemap](https://alekhin.dev/sitemap.md) for all pages.