Foscam - Capture snapshot and display on dashboard
An example on how to capture a snapshot from a Foscam IP camera (e.g. FI9901EP) and displaying it on the dashboard.
Part one is doing an HTTP request to the Foscam camera for a snapshot image. But the camera doesn't return an image, but a HTML page with an img tag. The second part is to extract the relative image url from the src attribute of the img tag and combine it with the url of the Foscam camera. Then we do a second HTTP request to get the actual image.
The last part is converting the bytes of the image to BASE64 and displaying those on the dashboard in an img tag.
[{"id":"ddbef7d.fe6b008","type":"http request","z":"5764a4c6.7c673c","name":"","method":"GET","ret":"txt","paytoqs":false,"url":"http://xxx.xxx.xxx.xxx:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture&usr=username&pwd=password","tls":"","proxy":"","x":350,"y":140,"wires":[["6343bc6c.3e4064"]]},{"id":"bf8fb947.95b6b8","type":"ui_template","z":"5764a4c6.7c673c","group":"3e29f5d6.a6e1ea","name":"Display image","order":1,"width":"0","height":"0","format":"<img alt=\"Camera Snapshot\" src=\"data:image/jpg;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1160,"y":140,"wires":[[]]},{"id":"958a1948.922658","type":"base64","z":"5764a4c6.7c673c","name":"Encode","action":"","property":"payload","x":960,"y":140,"wires":[["bf8fb947.95b6b8"]]},{"id":"8b9258cd.bdec78","type":"http request","z":"5764a4c6.7c673c","name":"","method":"GET","ret":"bin","paytoqs":false,"url":"","tls":"","proxy":"","x":770,"y":140,"wires":[["958a1948.922658"]]},{"id":"6343bc6c.3e4064","type":"change","z":"5764a4c6.7c673c","name":"","rules":[{"t":"set","p":"url","pt":"msg","to":"(\t $imgUri := $match(payload, /<img.*?src=\"([^\">]*\\/([^\">]*?))\".*?>/);\t $imgUri := $replace($imgUri.groups[0], '../', '');\t \t $cameraUri := $match(responseUrl, /^http[s]?:\\/\\/[a-zA-Z0-9.:-_]+/);\t $cameraUri := $cameraUri.match;\t \t $join([$cameraUri, $imgUri], '/')\t)","tot":"jsonata"},{"t":"delete","p":"payload","pt":"msg"},{"t":"delete","p":"headers","pt":"msg"},{"t":"delete","p":"statusCode","pt":"msg"},{"t":"delete","p":"responseUrl","pt":"msg"},{"t":"delete","p":"redirectList","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":140,"wires":[["8b9258cd.bdec78"]]},{"id":"3e29f5d6.a6e1ea","type":"ui_group","z":"","name":"Camera","tab":"b11c3576.085198","disp":true,"width":"24","collapse":false},{"id":"b11c3576.085198","type":"ui_tab","z":"","name":"Surveillance","icon":"security","order":2,"disabled":false,"hidden":false}]
