AV Site

What It Is

AV Site is a web application I built from scratch for my department. It’s a single platform where the team can look up equipment, control video switchers and audio mixers in real-time, schedule automated content uploads, manage overlays, run batch operations, and launch desktop applications — all from a browser, on any device. It’s deployed via Docker across multiple international studio locations, each managing hundreds of devices.

Why I Built It

We were tracking hundreds of devices in an Excel spreadsheet — hard to search, impossible to act on, and always slightly out of date. I built a simple web app to put it in a database, and quickly realized how many useful tools could be built around having that data structured and accessible. What started as an equipment list turned into the primary tool the team uses every day.

What’s Inside

Equipment Database

The foundation of everything else. Every piece of AV equipment in the facility — buildings, rooms, device types, IP addresses, rack locations — stored in a searchable database. With over 1,900 entries at a single location, subnet-based filtering narrows things down fast. Every equipment row has one-click ping testing that shows connectivity status inline. An equipment status dashboard can parallel-ping all devices at once, fetch live ATEM model and video format info, and suggest the next available IP when adding new gear. Quick-action buttons let you jump straight into control for ATEMs, X32s, Videohubs, and Ultimattes. Bulk import from Excel spreadsheets is supported with column mapping, multi-sheet support, and automatic location hierarchy creation.

Video Switcher Control

A browser-based control panel for Blackmagic ATEM video switchers. Program/preview switching, transitions, upstream and downstream keyers, fade to black, color generators, aux outputs, and macro execution — all controlled in real-time over WebSocket. Multiple operators can control the same switcher simultaneously, and every state change syncs in real-time — whether it comes from the web interface, the native ATEM Software Control, or someone pressing buttons on the physical hardware. The interface is fully responsive — operators use it on phones from the studio floor. Connection logging tracks every session with user, device, duration, and disconnect reason.

Audio Mixer Control

Real-time browser-based control for Behringer X32 audio mixers using a custom OSC encoder/decoder over UDP — no external library. The mixer view shows 32 input channels, 16 buses, 8 aux inputs, 6 matrices, 8 DCAs, and main with faders, meters, mute, pan, channel names, and colors. The channel detail view with gate, dynamics, EQ, and bus sends is partially implemented and still in development.

X32 Quick Mute

A separate operational tool for bulk muting and unmuting channels across many mixers at once. The page connects to potentially 100+ X32s simultaneously, parses channel names to group them by studio and table, and provides per-studio and per-table mute controls. A mixer status modal shows building-wide statistics. This is distinct from the per-mixer control page — it’s built for managing audio across an entire facility at once.

Content Scheduling

Automated media uploads to ATEM media pools. Users select a production type, upload images, pick target devices and slots, and set a time. Images are validated for aspect ratio and resolution, auto-resized to 1920×1080 if needed. The scheduler uses PostgreSQL with FOR UPDATE SKIP LOCKED for distributed lock-free task processing, dispatching uploads to a Go HTTP server running on a Windows VM (required because Blackmagic’s MediaUpload.exe SDK binary is Windows-only). Different production types enforce different safety rules — some skip tally checking, others require dual verification that a slot is both sourced to a media player and on-air before blocking. A live monitoring dashboard shows job progress, success rates, and daily breakdowns with cancel and retry.

Overlay Management

A configurable overlay system for when production sets go into maintenance or need branding changes. Each production type has its own profile with a media asset library, per-button macro execution, keyer configuration (USK1–4, DSK1), and media player selection. Buttons are customizable with colors, icons, and drag-and-drop ordering. Operators pick a profile and state, and the system handles keyer setup, media uploads, and macro execution automatically.

Batch Macro Execution

A dedicated page for running ATEM macros across multiple switchers simultaneously. Select a macro, pick the target ATEMs, and execute. The system validates that the macro exists on each device and reports per-device results — useful for applying the same configuration change across dozens of switchers at once.

Device Launchers

A custom URL protocol system that lets the browser launch desktop applications pointed at the right device. Four protocols are registered: avserver-atem:// for ATEM Software Control, avserver-ultimatte:// for Ultimatte, avserver-videohub:// for Smart Videohub, and avserver-x32:// for X32-Edit. Each handler self-installs on Windows or Mac and works from any equipment link on the site after that. The Ultimatte Slot Launcher takes it further — batch-opening up to 8 Ultimatte devices into their correct application slots simultaneously.

Mobile & PWA

The entire platform is configured as a Progressive Web App. Operators install it on their phone or tablet and get a standalone app — full screen, no browser chrome, instant access to any device on the network.

Tech Stack

• Backend: Python, Django, Django Channels, WebSocket
• Database: PostgreSQL
• Frontend: Alpine.js, HTMX, Tailwind CSS, DaisyUI
• Protocols: Blackmagic ATEM (PyATEMMax, custom fork), custom OSC encoder/decoder (X32)
• Media Pipeline: Go HTTP server, Blackmagic SDK (MediaUpload.exe)
• Deployment: Docker, docker-compose, Nginx Proxy Manager, Cloudflare SSL

Gallery

Screenshots and screen recordings coming soon.

Related Journal Entries

Coming soon.