For the Government Coordination Center
CNP
A media content management system for preparing meetings and controlling a video wall from a tablet.
The Media Content Management System was developed for the Analytical Center for the Government of the Russian Federation and is used at the Government Coordination Center. It connects meeting preparation with live display control: documents, video, cameras, web applications and dashboards can be shown on a large video wall.
Operators, speakers and specialists preparing meetings, presentations and analytical materials for the Coordination Center.
- Task
- Give operators convenient control over different materials on a video wall during meetings and presentations.
- What I built
- Designed the system architecture and developed the backend, tablet operator console and Electron application for displaying content on the video wall.
- Result
- Preparation and live display form one workflow: operators choose materials and control the screen from a tablet.
My role
Designed the architecture of the entire system and developed the backend, operator web console and Electron application for displaying content on the video wall.
- Scope
- System architecture / Backend / Frontend / Electron
- Period
- 2021—2024
- Status
- completed
Stack
- Vue
- NestJS
- Electron
- TypeScript
- Nuxt
- Vuex
- Socket.IO
- PostgreSQL
- Redis
The panoramic screen combines several analytical panels, with workstations arranged in front of it. Photo from the project materials.
How the system fits together
The operator uses a tablet. The server connects their actions with materials and the display system, while a player sends the selected content to the video wall. The current display state returns to the console.
Select a diagram element to learn more
The operator uses a tablet. The server connects their actions with materials and the display system, while a player sends the selected content to the video wall. The current display state returns to the console.
- Operator console
Preparation and control from a tablet
- Materials and data
Documents, video, cameras and widgets
- System server
Materials, permissions, commands and state
- Player
Preparing content for the display
- Video wall
A shared screen for the meeting
Display state returns to the console
A camera, documents and a web application occupy separate areas of the large screen. Photo from the project materials.
The console shows the desktop structure, while the screens display charts, indicators and statistics. Photo from the project materials.
From the operator’s tablet to a government meeting room
The project’s working environment is the Government Coordination Center. Presentations, documents, video calls and indicators share a room, with content and layouts that operators can change as the meeting progresses.
The tablet shows the scenario’s episodes, while the screen behind it displays the selected material. Photo from the project materials.
The touch console is used alongside working monitors and room equipment. Photo from the project materials.
The tablet console sits alongside workstation monitors and equipment, with rows of participant workstations behind them. Photo from the project materials.
The room in use: participants, presentations and shared screens
These public photographs show talks between the heads of government of Russia and Kazakhstan at the Coordination Center on 2 November 2021. Participants use workstations with monitors and microphones. The photographs show different display arrangements: a document on the shared screen, and a remote speaker alongside a transport map.
Delegations at their workstations during the talks on 2 November 2021.
Participants’ workstations face a shared screen with presentation materials. Photograph published on 2 November 2021.
During a discussion of transport infrastructure, the video wall shows the speaker and a route map at the same time. Photograph published on 2 November 2021.
Press Service of the Government of Kazakhstan · 2 November 2021
From meeting preparation to the room display
Materials and the presentation sequence are prepared in advance. During the meeting, the operator switches episodes, controls individual screen areas and sees the display state in the console.
Select a diagram element to learn more
Materials and the presentation sequence are prepared in advance. During the meeting, the operator switches episodes, controls individual screen areas and sees the display state in the console.
- Prepare
Gather materials and build a scenario
- Select
Open the right episode on the tablet
- Display
Send a command to the video wall
- See the state
Receive the screen state
Presentation materials appear on the video wall in front of participants’ workstations. Photo from the project materials.
At the RUSSIA exhibition at VDNH
The project team also took part in the RUSSIA exhibition and forum at VDNH. The Coordination Center’s exhibition introduced visitors to the government venue through a situation room, large screens and interactive areas.
A panoramic video wall and workstations with conference microphones introduce visitors to the Coordination Center’s meeting environment.
A tour of the exhibition: a map of Russia, display materials and touch terminals introduce visitors to the work of the government venue.
What has to come together behind one operator action
Selecting a material on a tablet coordinates several applications, different sources and independent areas of a large screen.
Different sources in one display
Documents, video, cameras, web pages and updating widgets need different loading, viewing and control methods.
The console shares the screen’s state
Commands pass through the server, while the screen state returns to the operator: the active scenario, material pages, audio and timers.
Each area has its own content
The large screen is divided into areas and columns. Materials can have their own pages, playlist order and playback duration.
Clear control over the display
Roles and permissions determine access to materials and actions. Operators can hand control to one another.
A closer look at the operator console
The console brings together scenarios, the material library, screen layouts and display controls. The images below show the interface with demo content.
From the home screen, the operator opens presentations, statuses and desktops. All data and materials shown on the screen were created for the interface demonstration.
The active episode, materials and scenario navigation share one screen. All data and materials shown on the screen were created for the interface demonstration.
Widgets are selected from the library and placed in the display grid. All data and materials shown on the screen were created for the interface demonstration.
Technical details
The operator console, administration panel and display player share one server. The HTTP API handles material uploads and scenario changes, while Socket.IO carries control commands and the current display state. The server checks permissions and connects users and screens belonging to each venue.
Touch controls need to remain clear while several materials are open on the video wall. Document pages, video, audio and timers share the display state. When several operators are working, roles, permissions and control handover determine who can change the screen content.
The operator console uses Nuxt, Vue, Vuex and Vuetify; the administration panel uses React. A NestJS server with TypeORM and PostgreSQL stores materials, scenarios and access settings. Redis and Bull queues handle background data updates and material processing. The Electron, Nuxt and Vue display player receives commands and shows content in the specified screen areas.
Let’s discuss your project
Tell me what you need: a website, store, service or workflow automation.