# Capture Images with Webcam on Gateway

**URL:** <https://forum.inductiveautomation.com/t/capture-images-with-webcam-on-gateway/94865>\
**Category:** Ignition\
**Tags:** ignition81, perspective, scripting\
**Created:** [August 20, 2024, 6:29am UTC](https://forum.inductiveautomation.com/t/capture-images-with-webcam-on-gateway/94865 "2024-08-20T06:29:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [August 20, 2024, 6:29am UTC](https://forum.inductiveautomation.com/t/capture-images-with-webcam-on-gateway/94865/1 "2024-08-20T06:29:05Z")

</div>

I have had a very odd use case for some functionality on a recent job, and thought I would share some things that may be of use to people on here.

My task was to capture an image from a camera local to the gateway and display/use the image directly in ignition.

To do this I have used a few tools and methods.

- Install Automation Professionals Image Streamer Module [Link](https://forum.inductiveautomation.com/t/automation-professionals-image-streamer-driver-module/29371)
- Follow the instructions to install FFmpeg and OpenCV [Link](https://www.automation-pros.com/streamer/doc/opencv.html)
- Install your USB webcam so that it works in Windows as normal.
- Open up Ignition and start some code:

Under _Scripting -\> Gateway Events_ I set up a _Message Handler_ called _Capture Image_

```python
	import base64
	from system import cv2
	logger = system.util.getLogger("ImageLog")
	# initialize the camera
	cam = cv2.VideoCapture(0) # 0 -> index of camera
	cvImg = cv2.Mat()
	buffer = cv2.MatOfByte()
	if not cam.isOpened():
		logger.info("Error: Could not open camera.")
	else:
		s = cam.read(cvImg) #read image
		if s: # frame captured without any errors
			
			retval = cv2.imgcodecs.imencode('.jpg', cvImg,buffer) #encode the Mat from openCV as a jpeg
			imageBytes = ''.join(map(lambda x: chr(x % 256), buffer.toArray())) #convert the image to a stream of bytes
			jpg_as_text = base64.b64encode(imageBytes) #Encode the image as base64
			b64Image = "data:image/jpeg;base64,%s"%jpg_as_text #Add the image metadata to the string
			system.tag.writeBlocking(["[edge]New Tag"], [b64Image]) #Write the tag
			logger.info("Image Captured")
		cam.release() #Release camera from script

```

In the above script, you will see I have created a single tag `[edge]New Tag`  
This is tag is a _Memory Tag_ of type _String_ and this will eventually hold a base64 image string. This is not an ideal way to store the image but its a proof of concept that works.

I am working in Perspective, so I have made a view with an _Image_ and a _Button_ on a page together.

In the view, I have bound the Image prop `source` to the tag with a Direct tag binding to `[edge]New Tag`  
I have added an _onClick_ event to the _Button_ with the following script:

```python
def runAction(self, event):
	system.util.sendMessage("Edge","CaptureImage",payload={})

```

Now if you save the project and run the view, click the button and in a second or so you should see an image on the screen in the image container.

Enjoy.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [August 20, 2024, 12:57pm UTC](https://forum.inductiveautomation.com/t/capture-images-with-webcam-on-gateway/94865/2 "2024-08-20T12:57:11Z")

</div>

Note: 3rd party modules (other than Cirrus Link) are not allowed on Edge.

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [August 20, 2024, 9:23pm UTC](https://forum.inductiveautomation.com/t/capture-images-with-webcam-on-gateway/94865/3 "2024-08-20T21:23:14Z")

</div>

It is a little misleading here, my Gateway started off as an Edge gateway and I had to convert it to a normal gateway before I could get this demo to work.