Picture-In-Picture (PIP) / fullscreen ?

[Soph]

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

[burger]

I didn't know about picture in picture. Here is a post on Mozilla's forums regarding the lack of compatibility with MJPEG streams (which I'm guessing ZM uses, since the cgi path for streams has JPEG):
https://connect.mozilla.org/t5/ideas/pi ... di-p/37432

You can use the API to make custom webpages. https://wiki.zoneminder.com/External_Live_Stream
You can use ZMNinja, etiher in a second monitor, or on a tablet at your desk.
You might be able to have semi transparent windows. While its a hack that is likely possible, you are probably better off just having a second monitor, tablet, or one of those smaller usb connected monitors that have come out in the past 5 years.
Finally, you could use a small window with 'always on top' selected. Or you could script something in greasemonkey.

Many ways to do this, i'm sure.

[makers_mark]

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.