OK pls ask
now the video has been saved in local file. how can i directly display those saved video to the dashboard?
In the dashboard you can use a ui_template node. As example this is code that I use to show stored video files in the dashboard. you can try and modify & delete what you do not need, this code is part of my solution and viewing of latest recordings from my 7 security cameras
Please note you have to configure NR in settings; set httpStatic to the folder where you have the recordings, otherwise it will not work
<!DOCTYPE html>
<html>
<style>
video {
border: 1px solid #ddd;
border-radius: 8px;
padding: 2px;
width: 400px;
height:300px;
}
.norm {
border:4px outset;
color:white;
background:#FBF14D;
}
</style>
<script>
//Make scope available in functions
var theScope = scope;
// Watch the payload and update corresponding picture
(function(scope) {
scope.$watch('msg', function(msg) {
//alert(msg);
inMessage(msg.payload);
});
})(scope);
function inMessage(event) {
if (event.match('hello')) {
alert(event);
}
}
function SendMessage(eventname, el){
theScope.send({payload:eventname});
return false;
}
</script>
<body>
<center>
<table>
<tr><!-- Row 1 -->
<td style="text-align: center"><video width="405px" controls autoplay><source id="CAM31" src="/cam31.mp4" type="video/mp4"></video></td>
<td style="text-align: center"><video width="405px" controls autoplay><source id="CAM12" src="/cam12.mp4" type="video/mp4"></video></td>
<td style="text-align: center"><video width="405px" controls autoplay><source id="CAM41" src="/cam41.mp4" type="video/mp4"></video></td>
<td style="text-align: center"><video width="405px" controls autoplay><source id="CAM11" src="/cam11.mp4" type="video/mp4"></video></td>
</tr>
</table>
<table>
<tr><!-- Row 2 -->
<td style="text-align: center"><video width="405px" controls autoplay><source id="CAM32" src="/cam32.mp4" type="video/mp4"></video></td>
<td style="text-align: center"><video width="405px" controls autoplay><source id="CAM22" src="/cam22.mp4" type="video/mp4"></video></td>
<td style="text-align: center"><video width="405px" controls autoplay><source id="CAM21" src="/cam21.mp4" type="video/mp4"></video></td>
</tr>
</table>
<br>
<br>
<table width="100%" border="1">
<tr><!-- Row 1 -->
<td><div style="text-align:center"><button id="b1" class="norm" onMouseDown="SendMessage('Detected persons', this)" style="font-size:100%; background-color:#808080; height:60px; width:610px"> SHOW DETECTED PERSONS </button></div></td>
<td><div style="text-align:center"><button id="b2" class="norm" onMouseDown="SendMessage('Video', this)" style="font-size:100%; background-color:#808080; height:60px; width:610px"> SHOW LIVE VIDEOS </button></div></td>
<td><div style="text-align:center"><button id="b3" class="norm" onMouseDown="SendMessage('Update recordings', this)" style="font-size:100%; background-color:#808080; height:60px; width:610px"> UPDATE RECORDINGS </button></div></td>
</tr>
</table>
</center>
</body>
</html>
can u explain more about this?
No, that you have to figure out 
sure. only ui_template node is enough?
i have set the setting js. but no video being display
There is also a ui-media node you could try
I need to verify you have made it correctly
Show that part of the settings.js as well as the html code for the ui template
Thank you. Yes, the video was being displayed on the dashboard but it didnt update automatically for a new video or replace the old uploaded video with a new one
This is the setting.js that i edited:
// The following property can be used in place of 'httpAdminRoot' and 'httpNodeRoot',
// to apply the same root to both parts.
//httpRoot: '/red',
// When httpAdminRoot is used to move the UI to a different root path, the
// following property can be used to identify a directory of static content
// that should be served at http://localhost:1880/.
**//httpStatic: '/home/pi/',**I did ask you to show WHAT & HOW you did the changes. This is not what you did, I guess we have a language or communication problem
Anyway, do the following assuming the recorded video file has the name "output.mp4" and is recorded to /home/pi
In settings, change to
httpStatic: '/home/pi/',
In the html code I posted above, change to
<td style="text-align: center"><video width="405px" controls autoplay><source id="CAM31" src="/output.mp4" type="video/mp4"></video></td>
This works perfect here, the video autoplays without problems
This is the way I asked you to present your settings and what you eventually changed
In settings, i already change the httpStatic: '/home/pi/' from the original one
So then the next is to edit the html code in the ui template. What have you done there?
And of course, after you change settings.js, you have to restart NR
yes already restart the NR. ui template i used the one u gave but no video being played on the dashboard
Try now to understand what I ask you to do
You have to edit the src="/output.mp4" to match with the name of your recorded video file
Copy & paste the content of your ui template code here so I can check if you done it correctly
video {
border: 1px solid #ddd;
border-radius: 8px;
padding: 2px;
width: 400px;
height:300px;
}
.norm {
border:4px outset;
color:white;
background:#FBF14D;
}
You have to paste the code correctly, I cant read it
type or paste code here
how to paste correctly? i try to paste but different outcomes
