Node red not running on supervisor.
A Call to a Web Hook can be set in MotionEYE either in the Motion Notifications or the File Storage settings.
Note the addition of ?%f to the webhook. This has the effect of appending the file name to the url. In m case it has a unique date and time of the recording.
In Node Red
For Static image of initial movement in Video
http://192.168.1.22:8765/movie/1/preview/*plus_unique_date/and_time.mp4*
For Video
http://192.168.1.22:8765/movie/1/playback/*plus_unique_date/and_time.mp4*
For pictures
http://192.168.1.22:8765/picture/1/preview/*plus_unique_date/and_time.mpg*
The output from the Web Hook can be used for finding the unique name of the image or video, so that it can be appended to the playback http address. This can be done using JSONATA in a Change node
e.g. For pictures the msg.payload from Http request, an Http In (set to POST and url /webhookfile) is set to the value in a Change node
$replace(req._parsedUrl.query,"/var/lib/motioneye/Camera1","http://192.168.n.n:8765/picture/1/preview")
and for the Static image of initial movement
$replace(req._parsedUrl.query,"/var/lib/motioneye/Camera1","http://192.168.n.n:8765/movie/1/preview")
On my pi MotionEYE stores the images at "/var/lib/motioneye/Camera1", but yours may be at a different location.
an Http request can then be made to download an image or mp4.
You will need node-red-node-base64
The ui_template can be used for displaying a static image
In Summary: An Http Request (set to: GET, and payload as Send as request body, with Return as a binary buffer) is processed by Base64 (Action : Encode as Base64) and output in a ui Template (set to: Reload last value on refresh - so that the image persists in the dashboard on refresh). Using the following Template
<style>
img{
object-fit:contain;
}
</style>
<img src="data:image/png;base64,{{msg.payload}}" />
the image fills the desired grid pattern set by Size.
Just noticed I have inconsistencies in the above please ignore the Webhook is sometimes denoted as Webhook_img....so long as they are the same in MotionEYE and on Node red they can be called whatever you wish.
I have the template displaying the static picture which when clicked displays the video so contains additional code.
<style>
img {
object-fit: contain;
}
</style>
<img src = "data:image/png;base64,{{msg.payload}}" ng-hide = "showToggle" ng-click = "send({payload:msg.vid});showToggle=!showToggle" />
<video controls id="video" width="100%" heigth="100%" playsinline poster ></video>
<script>
(function(scope) {
// Watch for messages being send to this template node
scope.$watch('msg', function (msg) {
if (msg) {
var video = document.getElementById('video');
video.src = msg.payload;
video.play();
}
});
})(scope);
</script>