Table of Contents

About

As part of a mini-project, we have built a mechanism that pops up a snapshot of a camera once the camera detects motion, displays it on the desktop and also allows the notification to be be clicked in order to open Media Player Classic in order to view the camera in real time.

The project is very meta in the sense that it uses a lot of the areas of activity that we're involved with but it is still documented here because it is, in spite of that, remarkably simple to make and with tools made by Wizardry and Steamworks.

Requirements

  • Winify, in case you were wondering what that notification pop is in the about section, that notification is created by Winify, a program developed by us as a Windows (works for Windows 7, yay!) front-end to Gotify,
  • Node-Red. We have used node-red extensively in the past for very many projects given how flexible it is and how close it gets to software bare-metal node.js/javascript. Node-Red is extremely lightweight and has a bunch of addons or plugins that make interacting with IoT devices very easy,
  • A camera that supports movement detection.

Realization

Depending on the camera, node-red-contrib-onvif-nodes can be used to connect via the OnVif protocol to a camera and subscribe to motion notifications. Typically, this involves creating credentials in the camera application and then configuring an "OnVif Events" node to subscribe to motion notifications on the camera. The node-red-contrib-onvif-nodes "OnVif events" node subscribes to all the events that the camera offers, such that a switch node must be used to filter just the movement event.

Here is a flow geometry that depicts a way to retrieve a single image from the camera when motion is detected.

Note that the actual activator input for this flow is the link-in node on the upper left when the flow gets activated due to motion detection (omitted) as well as the timestamp node on the left that provides an initial image when node-red is loaded. The rest of the flow, namely the segment involving rtsp2mjpeg converts an RTSP stream from the camera to a JPEg image that is saved to the hard-drive local to the node-red installation at /projects/cameras/entrance/entrance_camera.jpg as well as being fed into the UI part of node-red in order to have a display of the current camera image.

In short, the flow grabs an image off the camera both during startup as well as when movement is detected and both saves and displays the image.

Now that the image is saved to local storage, there must be a way to serve up the image via HTTP to any client accessing the node-red instance and, fortunately, this is even a built-in feature to Node-red that does not require any additional addons or plugins. Serving content or rather URLs can be done using the http-in node. The following is a flow that will serve /projects/cameras/entrance/entrance_camera.jpg to any browser to accesses the Node-Red instance via the URL http://.../entrance_camera.jpg.

The http-in node is configured to serve GET requests on the /entrance_camera.jpg URL by answering with the image from the local filesystem at /projects/cameras/entrance/entrance_camera.jpg. The node reading /projects/cameras/entrance/entrance_camera.jpg is a simple file read Node-red default node that returns the image at /projects/cameras/entrance/entrance_camera.jpg as "a single Buffer object" (which must be set) and then feeds the buffer into the http response node, here named http (200). The http response node http (200) is configured to set the Content-Type header to image/jpegsuch that the data buffer from the antecedent node that will be sent to the browser will be interpreted by the browser as a JPEG image.

Now, all that is needed is to send a notification to the Gotify server, so Winify can pick it up. The flow responsible for that is depicted in the following image.

Interestingly, only built-in nodes indigenous to Node-Red are used, specifically, the test injector node is just used as an initializer but the flow will be linked up to the movement "Onvif" event in order to send the Gotify notification when the camera picks up movement. The first template node is a Gotify message using markdown format. Here is what we have, but any message should do and does not even need to link to the image:

[![Movement](http://NODE_RED/entrance_camera.jpg)](rtsp://RTSP_CAMERA/stream1)

were:

  • NODE_RED is the node-red hostname and port,
  • RTSP_CAMERA is the RTSP camera URL including any credentials

The following image is a depiction of the whole project put together.

In sequence, the whole flow is triggered via the upper left link-in node. When triggered, the flow proceeds to rip one image off the camera, saves it to disk and then also displays it on the UI. In turn, the bottom flow is triggered that will send a notification to Gotify with the URL of the node-red server within the payload message. When Winify picks up the notification from Gotify, the camera image will be displayed in the notification.

When the image appears on the desktop, Winify faithfully renders the message as HTML / Markdown content, such that any links if sent within the message body will work fine. Remember that the payload sent to Gotify was of the shape:

[![Movement](http://NODE_RED/entrance_camera.jpg)](rtsp://RTSP_CAMERA/stream1)

ccccc which, knowing markdown, actually represents an image within a link. The image is actually referred to (similar to the <img> tag in HTML markup) by ![Movement](http://NODE_RED/entrance_camera.jpg) whereas clicking the whole image would open up the link rtsp://RTSP_CAMERA/stream1 which, if the operating system has a program registered to handle the RTSP protocol, should pop up a program to watch the stream live.

Having program registered for the RTSP protocol depends on the Windows version but we successfully managed to get Media Player Classic on Windows 7 to launch when clicking the Winify notification in order to view the camera RTSP stream live.

The idea is that the notification and image just provide a preview but also the convenience of just clicking the detected image and then opening up a live RTSP stream to actually see what the movement is about. This is extremely useful given that human attention can only be just that distributed and just watching a camera can be very boring if nothing is happening such that it is possible to work and only when an event is detected to switch to viewing the camera live.

The system is also extremely efficient, even in terms of power because nothing happens till the motion detector within the camera triggers the flows, such that there is no server or computational process taking place, but just a small $5V$ camera on a few hundred amperes monitoring during idle times.


iot/desktop_notifications_with_interactive_preview_and_video_for_camera_motion.txt ยท Last modified: 2025/04/19 00:16 by office

Wizardry and Steamworks

© 2025 Wizardry and Steamworks

Access website using Tor Access website using i2p Wizardry and Steamworks PGP Key


For the contact, copyright, license, warranty and privacy terms for the usage of this website please see the contact, license, privacy, copyright.