IP camera: stream and record a fragment

General
85 
<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="/dooropen.mp4" type="video/mp4"></video></td>
    </tr>
</table>
<br>
<br>
<table width="100%" border="1">
  
</table>
</center>
</body> 
</html>
86

Your code works fine here when I try with my 10 sec recording

What browser are you using? It has to support playing mp4

What happens if you try to play the movie directly?

http://your.ip:1880/dooropen.mp4

If I try here with http://192.168.0.243:1880/dooropen.mp4 it works as expected

87

i use google chrome. it said Cannot GET /dooropen.mp4 error

88

You have a path problem...I think

Try to change in settings.js
httpStatic: '/home/pi',

Restart NR

It has to work with http://your.ip:1880/dooropen.mp4

You have to try to figure out, otherwise no meaning trying

89

already did what u suggested. same error

90

already works. thank you very much. sorry for my weakness

91

Everything fine now?

92

yes. thank you very much

93

OK, fine, happy to hear! Now you can explore further and continue your project!

94

So in this exercise we looked at how to use the ui template node and html code in the dashboard. This allows us to use all nice options available in html and javascript to design a web ui we like

Another option for the dashboard, mention by Paul @zenofmud is to use the ui media node (node-red-contrib-ui-media)

Here is a simple flow that will show your recorded video on the dashboard

Is a matter of taste what you prefer. My personal choice was to use ui template node to give me most possible options in terms of design etc

image
image1048Ɨ98 8.24 KB 

[{"id":"3c184a96.327466","type":"ui_media","z":"dbfb0dbc.c8a91","group":"4246a880.b5ddb8","name":"","width":"8","height":"6","order":26,"category":"","file":"","layout":"adjust","showcontrols":true,"loop":true,"onstart":true,"muted":true,"scope":"local","tooltip":"","x":910,"y":2790,"wires":[[]]},{"id":"167c69d3.74ad56","type":"change","z":"dbfb0dbc.c8a91","name":"","rules":[{"t":"set","p":"mimetype","pt":"msg","to":"video/mp4","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":710,"y":2790,"wires":[["3c184a96.327466"]]},{"id":"771443b1.9c392c","type":"file in","z":"dbfb0dbc.c8a91","name":"","filename":"/home/pi/dooropen.mp4","format":"","chunk":false,"sendError":false,"encoding":"none","x":450,"y":2790,"wires":[["167c69d3.74ad56"]]},{"id":"8fa5e49a.4877a8","type":"inject","z":"dbfb0dbc.c8a91","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":230,"y":2790,"wires":[["771443b1.9c392c"]]},{"id":"4246a880.b5ddb8","type":"ui_group","name":"Video Test","tab":"e338d88b.0fb2b8","order":15,"disp":false,"width":"23","collapse":false},{"id":"e338d88b.0fb2b8","type":"ui_tab","name":"Video Test","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
95

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.