# Trying to display a base64 image from webcam on dashboard

**URL:** <https://discourse.nodered.org/t/trying-to-display-a-base64-image-from-webcam-on-dashboard/71521>\
**Category:** Dashboard\
**Created:** [30 November 2022 18:45 UTC](https://discourse.nodered.org/t/trying-to-display-a-base64-image-from-webcam-on-dashboard/71521 "2022-11-30T18:45:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [30 November 2022 18:45 UTC](https://discourse.nodered.org/t/trying-to-display-a-base64-image-from-webcam-on-dashboard/71521/1 "2022-11-30T18:45:38Z")

</div>

I have seen a few suggestions on here to display a camera picture (base64 grabbed from my cam via the onvif node), on the dashboard. None seem to work for me, I imported a couple of flows with variations of the template node, but none display a picture.  
This is the last function node with template I tried:

```auto

[{"id":"36238576.a6929a","type":"template","z":"70856be3b8bea8cd","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"320px\" height=\"240px\" src=\"{{{payload}}}\">","output":"str","x":560,"y":400,"wires":[["1ab473af56702995"]]},{"id":"1ab473af56702995","type":"ui_template","z":"70856be3b8bea8cd","group":"c7a43587.2944e8","name":"","order":7,"width":"0","height":"0","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":740,"y":400,"wires":[[]]},{"id":"c7a43587.2944e8","type":"ui_group","name":"Default","tab":"fbd536a.22bf9c8","order":1,"disp":true,"width":"6","collapse":false},{"id":"fbd536a.22bf9c8","type":"ui_tab","name":"Home","icon":"dashboard"}]

```

This is a partial grab from the debug node

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6f4d0adf7b3e371a84efb0761608dfc10556c5d7.png)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [30 November 2022 19:04 UTC](https://discourse.nodered.org/t/trying-to-display-a-base64-image-from-webcam-on-dashboard/71521/2 "2022-11-30T19:04:24Z")

</div>

The base64 image is in `msg.payload.image.base64` according to your screenshot

Also if you set output of template node to `msg.template`

nodes help info.

> **Using `msg.template`:**  
> You can also define the template content via `msg.template` , so you can use external files for example.  
> Template will be reloaded on input if it has changed.  
> Code written in the Template field will be ignored when `msg.template` is present.  
> e.g.

```auto
[{"id":"36238576.a6929a","type":"template","z":"452103ea51141731","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"320px\" height=\"240px\" src=\"{{{payload.image.base64}}}\">","output":"str","x":283.00000762939453,"y":3980.0001182556152,"wires":[["1ab473af56702995"]]},{"id":"1ab473af56702995","type":"ui_template","z":"452103ea51141731","group":"c7a43587.2944e8","name":"","order":7,"width":"0","height":"0","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":463.00000762939453,"y":3980.0001182556152,"wires":[[]]},{"id":"c7a43587.2944e8","type":"ui_group","name":"Default","tab":"fbd536a.22bf9c8","order":1,"disp":true,"width":"6","collapse":false},{"id":"fbd536a.22bf9c8","type":"ui_tab","name":"Home","icon":"dashboard"}]

```

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [30 November 2022 20:13 UTC](https://discourse.nodered.org/t/trying-to-display-a-base64-image-from-webcam-on-dashboard/71521/3 "2022-11-30T20:13:42Z")

</div>

Thats working. Is there a way to resize the picture (make it bigger) ? I tried changing the size by adjusting the template image size, but that didnt work. Also tried adjusting the width in the onvif node, but that didnt work either. I guess the image size is given by what the camera sends ?  
It is sending a x value of 240 and 7 of 180 in msg.payload.config. I guess thats the image size coming from the camera ? It does not look as if I can change it in the camera

---

<div class="post-metadata">

**Author:** ![Mikee1234K](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mikee1234k/32/70283_2.png) [@Mikee1234K](https://discourse.nodered.org/u/Mikee1234K)\
**Post date:** [30 November 2022 20:18 UTC](https://discourse.nodered.org/t/trying-to-display-a-base64-image-from-webcam-on-dashboard/71521/4 "2022-11-30T20:18:30Z")

</div>

I actually managed to change in in the camera, now its I think 250x320px. And adjusting the layout in dashboard layout has increased the size of the displayed picture.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [30 November 2022 21:54 UTC](https://discourse.nodered.org/t/trying-to-display-a-base64-image-from-webcam-on-dashboard/71521/5 "2022-11-30T21:54:15Z")

</div>

A quick [google](https://www.google.com/search?q=image+size+html+css) will give you many ways to size a image using html/css

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [14 December 2022 21:54 UTC](https://discourse.nodered.org/t/trying-to-display-a-base64-image-from-webcam-on-dashboard/71521/6 "2022-12-14T21:54:46Z")

</div>

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