Feat: Using audio motion analyzer#4393
Conversation
|
Watch page Monitor page Will these names be ok or do I need to change something? |
|
I guess it's ok. I would have gone with a toggle for video and a toggle for analysis, but either way gets the job done. |
Yes, I wanted to do it that way. This is a multi select in which you can select the necessary players or disable them all. |
I've done a lot already, but... I came to the conclusion that Player = None is wrong. To play only audio, we still need a player. It can be either go2rtc or rtsp2web. |
|
Let's leave the player issues aside. I disagree with adding options to disable zms playback, as that is the fallback when all else fails. People get confused when there are too many options to configure. |
I don't want to disable ZMS either. |
…l the volume of all monitors Moving the volume slider control portion from MonitorStream.js to skin.js
- Clear IconMute when executing destroyVolumeSlider() - Added the ability to clear the icon state to changeStateIconMute() MonitorStream.js - Set #volumeControls to "disabled" instead of "hidden" - Don't execute controlMute() when executing createVolumeSlider() Added: audioMotionAnalyzer.js
|
@connortechnology If this PR is approved, I'll create a settings page for the visualizer later. |
|
@connortechnology
|
It's almost invisible to the naked eye, but it does impact performance.
|
@connortechnology |
There was a problem hiding this comment.
Pull request overview
Adds an “audio motion analyzer” visualization to classic skin streaming views, controlled by a new per-monitor WhatDisplay setting (and a user override via cookie), enabling video-only, audio-visualization-only, or both.
Changes:
- Introduces
WhatDisplaymonitor option and exposes it in Monitor settings + Watch/Montage/Event view controls. - Adds an
<audio-motion>web component backed by the vendoredaudioMotion-analyzerlibrary, plus JS glue to connect it to captured MediaStreams and volume controls. - Updates montage/watch/event behaviors and CSS to optionally hide video while keeping streams running.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 16 comments.
Show a summary per file
| File | Description |
|---|---|
| web/skins/classic/views/watch.php | Adds “What display” selector to Watch controls. |
| web/skins/classic/views/montage.php | Adds “What display” selector and conditional audio control panel rendering. |
| web/skins/classic/views/monitor.php | Adds WhatDisplay field to monitor “viewing” settings. |
| web/skins/classic/views/js/watch.js.php | Exposes monitor whatDisplay in per-monitor JS data. |
| web/skins/classic/views/js/watch.js | Implements controlWhatDisplay() and hooks audio visualization lifecycle into Watch flow. |
| web/skins/classic/views/js/montage.js.php | Exposes monitor whatDisplay in montage JS data. |
| web/skins/classic/views/js/montage.js | Adds montage-specific handling for no-video mode, observers, and global volume controls. |
| web/skins/classic/views/js/event.js.php | Exposes whatDisplay for event playback. |
| web/skins/classic/views/js/event.js | Hooks audio visualization init/pause into Event playback and adds “What display” reload handler. |
| web/skins/classic/views/event.php | Adds “What display” selector, data attribute for video hiding, and <audio-motion> markup. |
| web/skins/classic/js/skin.js | Adds shared helpers for connecting/destroying audio visualization and refactors volume slider/mute behavior. |
| web/skins/classic/js/audioMotionAnalyzer.js | New module defining <audio-motion> custom element and integrating analyzer behavior. |
| web/skins/classic/includes/functions.php | Loads the new module script from xhtmlFooter(). |
| web/skins/classic/includes/config.php | Defines $whatDisplay options array for Monitor settings. |
| web/skins/classic/css/base/skin.css | Adds CSS for audio visualization layout and “hide video but keep stream alive” behavior. |
| web/skins/classic/assets/version | Documents the newly vendored library version. |
| web/skins/classic/assets/audioMotion-analyzer/src/audioMotion-analyzer.js | Adds vendored upstream analyzer library source. |
| web/js/MonitorStream.js | Plumbs whatDisplay, integrates audio visualization and refactors volume control helpers. |
| web/includes/Monitor.php | Adds default WhatDisplay, emits data-not-display-video, and appends <audio-motion> markup per stream. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 'AnalysisImage' => 'FullColour', | ||
| 'Enabled' => array('type'=>'boolean','default'=>1), | ||
| 'Decoding' => 'Always', | ||
| 'WhatDisplay' => 'OnlyVideo', |
There was a problem hiding this comment.
This adds a new WhatDisplay monitor field in defaults and UI, but the PR doesn’t include a DB migration/update SQL in db/ to add the Monitors.WhatDisplay column. Without an update script, installs/upgrades will hit SQL/ORM errors when accessing $monitor->WhatDisplay(). Add a db/zm_update-*.sql entry (and/or schema update) as part of this change.
| 'WhatDisplay' => 'OnlyVideo', |
There was a problem hiding this comment.
I don't want to break anything, so I didn't add the SQL migration to the code.
You need to add the following code:
ALTER TABLE MonitorsADDWhatDisplayenum('OnlyVideo','OnlyAudioVisualization','VideoAudioVisualization') NOT NULL DEFAULT 'OnlyVideo' AFTERDecoding;
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
@connortechnology |
|
Isaac, have you checked this PR yet? |
There are still some changes that need to be made to the BD:
ALTER TABLE `Monitors` ADD `WhatDisplay` enum('OnlyVideo','OnlyAudioVisualization','VideoAudioVisualization') NOT NULL DEFAULT 'OnlyVideo' AFTER `Decoding`;