ESP32 websocket Camera & viewer
A tiny ESP32 Camera to get the live feed. The client ESP32 [TFT viewer] connects the Camera ESP32 on the same IP address and gets the websocket image data as and when changes. The digital image data is then processed and then after sizing, it is projected on the TFT screen.
ESP32 websocket Camera & viewer
Prelude: This project is a sequel of my earlier project “ESP32 Cam project” which was used to project a video from an ESP32-CAM to a network and then connecting a computer to that network and then call the IP address of the CAM for getting the live feed from the CAM. The DHCP IP address of the Camera can either be known from the Serial print or from the attached I2C OLED connected to the ESP32 CAM.
The project can be extended further by having fixed IP address as well. For that you have to enter the fixed IP address in the set up portion like this.
WiFi.begin(ssid, password);IPAddress Ip(192, 168, 10, 10); //IP address of your choice. IPAddress NMask(255, 255, 255, 0); //Netmask of your choice. WiFi.Config(Ip, Ip, NMask);
WiFi Access Point mode: Therefore, now you have a cam which is connected to your wifi and it has a fixed IP address as 192.168.10.10. Now in the network, if you call 192.168.10.10 ,you will be able to see the cam view. That’s it. But the entire set up is again dependent on the WiFi network of your home. If it is down, the whole thing will be down as well! To get rid of this profound problem, here’s the Camera on Access Point mode.
WiFi Camera on AP mode: The WiFi camera is set up as an independent hot spot itself. One can connect the camera and get the cam view on the fixed IP address or the DHCP IP address call back. For that the set up comes here; The few other parameters , their uses with explanation is also described below.
Remove the password parameter, if you want the AP (Access Point) to be openssid_hidden: (0 = broadcast SSID, 1 = hide SSID)channel: Wi-Fi channel number (1-13)max_connection: maximum simultaneous connected clients (1-4)softAP(const char* ssid, const char* password, int channel, int ssid_hidden, int max_connection)
WiFi.softAP(ssid, password, 1, 10, 2); //Set a fixed IP address by this Serial.println("Set softAPConfig"); IPAddress Ip(192, 168, 10, 10); // Select your IP address now. IPAddress NMask(255, 255, 255, 0); //Select the netmask now. WiFi.softAPConfig(Ip, Ip, NMask);
Well, we are a step ahead now. Our ESP32 Cam is now on it’s own self created WiFi hot spot. One can simply connect a laptop to our ESP32 Cam and by calling that fixed IP address [192.168.10.10] and one can get the live Cam feed.
ESP32 Cam view on ESP32 TFT: Now lets move on a step further. We are using a tiny ESP32 Camera to get the live feed. Whereas, for output we are using a cumbersome laptop or computer to see the output. This is a huge disparity. 50 gram ESP32 camera versus 2.5kg laptop screen output view. Cant’ we have a matching ESP32 TFT output? Yes, that’s our next project.
ESP32 Websocket camera: Few ideas need to be changed before embarking on a matching ESP32 camera viewer. So far we were projecting ESP32 camera output on a http web server protocol. That’s a overburden for the viewer. Therefore, we will use websocket protocol. In websocket instead of refreshing the entire webpage, it helps to update the additional data only. Therefore, it creates substantially less load on the output device – ESP32 Camera Viewer. The camera project on websocket is not necessarily a different one from our earlier camera. Only the program software is slightly changed.
The client ESP32 [TFT viewer] connects the Camera ESP32 on the same IP address and gets the websocket image data as and when changes. The digital image data is then processed and then after sizing, it is projected on the TFT screen.
Schematic of ESP32 webcam:
Schematic of ESP32 Cam Viewer:
ILI9341 TFT preferably 2.8” to 3.5” display works best. A small 0.8” TFT also works but the output becomes unrecognizable on a small TFT! On websocket the update is selective – once in 250 milli second. Where the picture changes, will update automatically.
BOM: [With Sources]
ESP32 x 1 no Cam: INR 700 https://robu.in/product/esp32-cam-wifi-module-bluetooth-with-ov2640-camera-module-2mp/
ESP32 x 1 nos [38 pin] : INR 550 https://calcuttaelectronics.com/product/esp32-development-board-wifibluetooth-30-pin/
3.3 volt regulator x 2 nos: AMS1117 or HT7333 = INR 20 https://calcuttaelectronics.com/product/ams1117-5-0/
TFT 2.8” to 3.5” ILI9341 x 1no: INR 1200 https://robu.in/product/2-8-inch-spi-screen-module-tft-interface-240-x-320-without-touch/
Total Expenditure with out power supply = INR:2500 only
Working principle of ESP32 webcam with OLED: For image handling by ESP32 there are many Arduino libraries but for this project we find the TFT_eSPI.h is the fastest one and easy to manage. You can very easily change the TFT type by simply changing the TFT specific file in the User_Setup_Select file. To use the smaller display like ILI9163 type you have just to uncomment the respective line. It’s very easy and you also can define which pin you would like to connect to the TFTs. TFT_eSPI also have facility to connect ILI9488 parallel type 3.5” TFT display as well! The parallel TFT will be little faster than the Serial display.
#include <User_Setups/Setup1_ILI9341.h> // Setup file configured for my ILI9341//#include <User_Setups/Setup2_ST7735.h> // Setup file configured for my ST7735//#include <User_Setups/Setup3_ILI9163.h> // Setup file configured for my ILI9163
Software for ESP32 websocket cam & ESP32 TFT viewer : is attached. Most of the libraries I have attached. However, if you find some libraries are missing, just get them installed from Arduino IDE vide Sketch –> Include library –> manage libraries
ESP32 Camera Programmer: The ESP32 camera does not come with built in USB to serial interface. Therefore, to upload the sketch one needs to have a USB to Serial programmer which looks like this and comes for INR:250 to INR:300. The schematics shown below. The GPIO 0 to be pulled to ground during uploading mode and the reset button of the ESP32 to be pressed during first few seconds of uploading after that it is to be released.
Schematics of ESP32-Camera programming:
Set up: In the present set up everything is set for an ILI9341 3.5” SPI TFT display to work. For changing to a smaller display like ILI9163 one has to comment out the ILI9341 line and uncomment the ILI9163 line in User_Setup_Select file. The connections are to be made as per the schematics shown.
The camera has the following Image quality setups - VGA 640x480,
SVGA 800x600,
XGA 1024x768,
SXGA 1280X1024,
UXGA 1600X1200;
CIF 400X296
QVGA 320X240
HQVGA 240X176
QQVGA 160X120
The key word [the English letter word] is to be used inside setup in the if loop -
if(psramFound()){
config.frame_size = FRAMESIZE_CIF; //VGA;
config.jpeg_quality = 10;
config.fb_count = 2;
} else {
config.frame_size = FRAMESIZE_SVGA;
config.jpeg_quality = 12;
config.fb_count = 1;
}
For bigger and better quality picture use higher resolution image quality like SXGA or UXGA type while for smaller size TFT use VGA or CIF type. The bigger the picture size is the slower the display becomes.
Aftermath: ESP32 camera is very cheap so is the ESP32 TFT display. Together they cost without power supply unit is INR:2500 only. Although it is not very fast to have a video like feed. It’s rather jarring but the images are clearly distinguishable. With a small external antenna the distance between the camera and viewer can be increased as high as 200 meters.
The possible uses can be – (1) Door eye hole camera in which the camera will be looking outside through a small hole while the viewer is placed inside providing a wider view, (2) Car rear view mirror which runs on 3.3 volts only thus consumes very less power.(3) Intruder surveillance camera for a passage or locker room , Birds watching etc.
Prototype:
Bye bye,
Bera / Vindhyanagar
Prelude: This project is a sequel of my earlier project “ESP32 Cam project” which was used to project a video from an ESP32-CAM to a network and then connecting a computer to that network and then call the IP address of the CAM for getting the live feed from the CAM. The DHCP IP address of the Camera can either be known from the Serial print or from the attached I2C OLED connected to the ESP32 CAM.
The project can be extended further by having fixed IP address as well. For that you have to enter the fixed IP address in the set up portion like this.
WiFi.begin(ssid, password);IPAddress Ip(192, 168, 10, 10); //IP address of your choice. IPAddress NMask(255, 255, 255, 0); //Netmask of your choice. WiFi.Config(Ip, Ip, NMask);
WiFi Access Point mode: Therefore, now you have a cam which is connected to your wifi and it has a fixed IP address as 192.168.10.10. Now in the network, if you call 192.168.10.10 ,you will be able to see the cam view. That’s it. But the entire set up is again dependent on the WiFi network of your home. If it is down, the whole thing will be down as well! To get rid of this profound problem, here’s the Camera on Access Point mode.
WiFi Camera on AP mode: The WiFi camera is set up as an independent hot spot itself. One can connect the camera and get the cam view on the fixed IP address or the DHCP IP address call back. For that the set up comes here; The few other parameters , their uses with explanation is also described below.
Remove the password parameter, if you want the AP (Access Point) to be openssid_hidden: (0 = broadcast SSID, 1 = hide SSID)channel: Wi-Fi channel number (1-13)max_connection: maximum simultaneous connected clients (1-4)softAP(const char* ssid, const char* password, int channel, int ssid_hidden, int max_connection)
WiFi.softAP(ssid, password, 1, 10, 2); //Set a fixed IP address by this Serial.println("Set softAPConfig"); IPAddress Ip(192, 168, 10, 10); // Select your IP address now. IPAddress NMask(255, 255, 255, 0); //Select the netmask now. WiFi.softAPConfig(Ip, Ip, NMask);
Well, we are a step ahead now. Our ESP32 Cam is now on it’s own self created WiFi hot spot. One can simply connect a laptop to our ESP32 Cam and by calling that fixed IP address [192.168.10.10] and one can get the live Cam feed.
ESP32 Cam view on ESP32 TFT: Now lets move on a step further. We are using a tiny ESP32 Camera to get the live feed. Whereas, for output we are using a cumbersome laptop or computer to see the output. This is a huge disparity. 50 gram ESP32 camera versus 2.5kg laptop screen output view. Cant’ we have a matching ESP32 TFT output? Yes, that’s our next project.
ESP32 Websocket camera: Few ideas need to be changed before embarking on a matching ESP32 camera viewer. So far we were projecting ESP32 camera output on a http web server protocol. That’s a overburden for the viewer. Therefore, we will use websocket protocol. In websocket instead of refreshing the entire webpage, it helps to update the additional data only. Therefore, it creates substantially less load on the output device – ESP32 Camera Viewer. The camera project on websocket is not necessarily a different one from our earlier camera. Only the program software is slightly changed.
The client ESP32 [TFT viewer] connects the Camera ESP32 on the same IP address and gets the websocket image data as and when changes. The digital image data is then processed and then after sizing, it is projected on the TFT screen.
Schematic of ESP32 webcam:
Schematic of ESP32 Cam Viewer:
ILI9341 TFT preferably 2.8” to 3.5” display works best. A small 0.8” TFT also works but the output becomes unrecognizable on a small TFT! On websocket the update is selective – once in 250 milli second. Where the picture changes, will update automatically.
BOM: [With Sources]
ESP32 x 1 no Cam: INR 700 https://robu.in/product/esp32-cam-wifi-module-bluetooth-with-ov2640-camera-module-2mp/
ESP32 x 1 nos [38 pin] : INR 550 https://calcuttaelectronics.com/product/esp32-development-board-wifibluetooth-30-pin/
3.3 volt regulator x 2 nos: AMS1117 or HT7333 = INR 20 https://calcuttaelectronics.com/product/ams1117-5-0/
TFT 2.8” to 3.5” ILI9341 x 1no: INR 1200 https://robu.in/product/2-8-inch-spi-screen-module-tft-interface-240-x-320-without-touch/
Total Expenditure with out power supply = INR:2500 only
Working principle of ESP32 webcam with OLED: For image handling by ESP32 there are many Arduino libraries but for this project we find the TFT_eSPI.h is the fastest one and easy to manage. You can very easily change the TFT type by simply changing the TFT specific file in the User_Setup_Select file. To use the smaller display like ILI9163 type you have just to uncomment the respective line. It’s very easy and you also can define which pin you would like to connect to the TFTs. TFT_eSPI also have facility to connect ILI9488 parallel type 3.5” TFT display as well! The parallel TFT will be little faster than the Serial display.
#include <User_Setups/Setup1_ILI9341.h> // Setup file configured for my ILI9341//#include <User_Setups/Setup2_ST7735.h> // Setup file configured for my ST7735//#include <User_Setups/Setup3_ILI9163.h> // Setup file configured for my ILI9163
Software for ESP32 websocket cam & ESP32 TFT viewer : is attached. Most of the libraries I have attached. However, if you find some libraries are missing, just get them installed from Arduino IDE vide Sketch –> Include library –> manage libraries
ESP32 Camera Programmer: The ESP32 camera does not come with built in USB to serial interface. Therefore, to upload the sketch one needs to have a USB to Serial programmer which looks like this and comes for INR:250 to INR:300. The schematics shown below. The GPIO 0 to be pulled to ground during uploading mode and the reset button of the ESP32 to be pressed during first few seconds of uploading after that it is to be released.
Schematics of ESP32-Camera programming:
Set up: In the present set up everything is set for an ILI9341 3.5” SPI TFT display to work. For changing to a smaller display like ILI9163 one has to comment out the ILI9341 line and uncomment the ILI9163 line in User_Setup_Select file. The connections are to be made as per the schematics shown.
The camera has the following Image quality setups - VGA 640x480,
SVGA 800x600,
XGA 1024x768,
SXGA 1280X1024,
UXGA 1600X1200;
CIF 400X296
QVGA 320X240
HQVGA 240X176
QQVGA 160X120
The key word [the English letter word] is to be used inside setup in the if loop -
if(psramFound()){
config.frame_size = FRAMESIZE_CIF; //VGA;
config.jpeg_quality = 10;
config.fb_count = 2;
} else {
config.frame_size = FRAMESIZE_SVGA;
config.jpeg_quality = 12;
config.fb_count = 1;
}
For bigger and better quality picture use higher resolution image quality like SXGA or UXGA type while for smaller size TFT use VGA or CIF type. The bigger the picture size is the slower the display becomes.
Aftermath: ESP32 camera is very cheap so is the ESP32 TFT display. Together they cost without power supply unit is INR:2500 only. Although it is not very fast to have a video like feed. It’s rather jarring but the images are clearly distinguishable. With a small external antenna the distance between the camera and viewer can be increased as high as 200 meters.
The possible uses can be – (1) Door eye hole camera in which the camera will be looking outside through a small hole while the viewer is placed inside providing a wider view, (2) Car rear view mirror which runs on 3.3 volts only thus consumes very less power.(3) Intruder surveillance camera for a passage or locker room , Birds watching etc.
Prototype:
Bye bye,
Bera / Vindhyanagar
Discussie (3 opmerking(en))