Camera in WebUI

Software / Firmware Jackpot Board / FluidNC
1

Prompted by this post on the Neat! thread, I was like hmm, I wonder if I can get a camera to display in the WebUI:

I’m not really interested in doing AI things or cutting things without CAD/gcode. But I was curious about using it for alignment. Still 100% unnecessary. I absolutely don’t have a valid reason to do this other than curiosity. And it seems no matter how silly anything I do is, I always seem to learn something useful.

It could also be useful just to have a camera you can see in the WebUI that does nothing else.

Camera alignment isn’t anything new:

Probe Camera Alignment · vlachoudis/bCNC Wiki

So, anyway, I figured for the WebUI, it needed to be a camera that could stream over HTTP. I got one of these. It’s tiny. I’m not sure it’s the best solution but works for my current purposes (whatever they are). It can stream wirelessly so all I need to do is run USB power.

I used this code (which I tweaked a bit so I could use PlatformIO):
Camera Usage for Sense Version | Seeed Studio Wiki

It comes with some heat sinks which are bigger than it is, which it absolutely needs.

image
image912×861 44.8 KB

So, when you run that code, you get all kinds of settings. For me (on my local network), this is at 192.168.0.199. The video stream is at 192.168.0.199:81/stream.

image
image370×892 20.8 KB

Max resolution is 1600x1200. It’s loaded with some “AI” nonsense for face recognition. Maybe there’s something useful there. I’d be satisfied with manual alignment via tiny jogs.

In WebUI v3, under the “Extra content” settings, there’s already an image type and it works:

image
image447×550 10.2 KB

Sorry.

image
image463×614 49.9 KB

There’s a button to save the image but it doesn’t work. That’s fine.
image

Next step is to create an extension with some kind of overlay. There’s nothing magic here, it’s just using this HTML:

<img src="http://192.168.0.199:81/stream" alt="Camera" class="imageContainer" id="imagepqzaorrly">
7 Likes
2

A visual layout like some laser cutters have would be cool.

1 Like
3

Yea, that’s quite a bit more difficult than what I’m trying to do here. This camera would get mounted next to the router/spindle so it would be pretty limited how much of a gcode image preview it could overlay.

Ah, who knows. It wouldn’t be the first time I took something further than planned.

4 Likes
4

I love when you just try something random like this for fun. I am always surprised at how far these things can be pushed…or how little of them we utilize.

1 Like
5

Now I’ve got a simple extension with a target overlay and a button to toggle the camera on/off. It gets really hot so I don’t want to leave it on all the time.

This is on a random coaster with a dime for scale (that’s about 18mm diameter for non-US folks).

image
image451×606 40.2 KB

image
image457×366 35.2 KB

Next step is to add some controls for a digital zoom and maybe some other settings. Maybe some target color options.

Focus isn’t great but still probably good enough. You can get an auto-focus camera to connect which is the OV5640 instead of the OV2640 fixed focus one it comes with.

I guess I’m using what appears to be a newer variation of an “ESP32-CAM” module. That needs a separate programmer but that’s what this web server camera code I’m using originally came from. I wonder if that would run cooler since it’s a little bigger.

I’ve also thought about getting a Raspberry Pi Zero 2W and connect a camera to that. Now that I think about it, I have a Pi with a camera that I used for my Ender 3 with Octoprint.

Maybe I’m just trying to see how many ESP32s and wireless connections I can use at one time with my Lowrider. Jackpot + WLED + wireless pendant + camera would make 4.

1 Like
6

You’re using a separate esp just for the camera right? The web client is connecting to the rtsp stream? So the jackpot esp isn’t doing much extra work besides hosting a little extra code. The actual functionality of this is all in the client browser’s javascript?

Then it shouldn’t really matter if it is an esp camera or rpi 2 w camera or windows server or an IP camera.

7

Yea, the camera has it’s own ESP32 so all the Jackpot is doing is serving the extension. The stream is just http. As far as I know, you can’t stream RTSP directly from a webpage.

My main concern for considering other options is how hot this gets but what I have is fine for now.

1 Like