Soph wrote: ↑Fri Dec 20, 2024 8:59 am
Hello!
For my job i have very limited monitor real estate and I've been trying to watch a camera's feed using firefox PIP using scripts and stuff but i can't manage to do it because ZM real-time camera feed is not a supported video feed.
I have access directly to the camera's RTSP feed if there exist a desktop linux/windows app or script that can do that.
I'm fine with any hack/bodge that can help me achieve it because it would be really worth it
Even having an option to watch full screen could actually solve my problem if i make a WPA of zoneminder and then hold it above other windows
Best regards,
Soph
Hey Soph! Since you have access to the rtsp stream, you can use VLC in always on top mode. Click the 'View' menu item in the VLC titlebar and select "Always on top". Note: If you leave VLC like this, be prepared to be frustrated to no end one day when you can't figure out why clicking anywhere on the VLC window makes it just a loud "ding" across your speakers. Hint: it's usually because a password dialog popped up behind the "Always on Top" VLC window. And no, you can't just move the VLC window to see and use the dialog box. Ctrl-Shift-Esc
If you want a neat customizable way, you could do something like this. There is a newish feature called Document Picture in Picture that allows you to do essentially the same thing as video PIP. It is literally the whole screen OR what you choose to be in the document. You can make an extension to do this. Create a new folder and name it something. Copy this and save it in the folder as "manifest.json"
Code: Select all
{
"manifest_version": 3,
"name": "ZM Document PIP",
"description": "Example Document PIP Extension for ZoneMinder",
"version": "3",
"host_permissions": [
"*://*/zm"
],
"content_scripts": [
{
"matches": [
"*://*/zm/*view=watch*"
],
"js": [
"injected.js"
],
"run_at": "document_start"
}
],
"action": {
"default_title": "ZM Document Picture In Picture"
}
}
This just tells the extension where to inject this content script, which is right here. You need to add a second file called "injected.js" to the folder with these contents.
Code: Select all
const togglePictureInPicture = async (targetDiv) => {
const targetDivParent = targetDiv.parentNode;
if (window.documentPictureInPicture.window) {
targetDivParent.append(targetDiv);
window.documentPictureInPicture.window.close();
return;
}
const pipWindow = await window.documentPictureInPicture.requestWindow({
disallowReturnToOpener: false,
width: targetDiv.clientWidth || 1920,
height: targetDiv.clientHeight || 1080
});
pipWindow.addEventListener("pagehide", (event) => {
//put the pip window back in the ZM window
targetDivParent.append(targetDiv);
});
const CSS =
`
body { margin: 0px !important; }
img {
width: 100vw !important;
height: 100vh !important;
object-fit: fill !important;
}
::-webkit-scrollbar {
width: 0px !important;
}`;
let styleSheet = document.createElement("style");
styleSheet.textContent = CSS;
pipWindow.document.head.appendChild(styleSheet);
//Note: ZM- injected stylesheets do not inject without programatic injection or "match_about_blank"
pipWindow.document.body.append(targetDiv);
}
document.addEventListener( 'DOMContentLoaded', () => {
let clickEl = document.getElementById('Monitor');
clickEl.addEventListener("contextmenu", (e) => {
if (!"documentPictureInPicture" in window){
return;
}
e.preventDefault();
togglePictureInPicture(e.target);
})
});
Load the folder unpacked into your browser extension manager with Developer mode on. Reload the page, and now whenever you right click on an image in the "view=watch" page, it will be in a new PIP window.
You could do this for the entire montage screen or any webpage, and you select the content you want to be put into the new PIP window. I chose the "#Monitor" div because you said "watch a cameras feed". Hence I injected the script (in the manifest) to the "view=watch" pages. You can copy original styling from the source document and .. You can do whatever you want lol.