ESP32-CAM: Set Access Point (AP) for Web Server (Arduino IDE)

This tutorial shows how to set your ESP32-CAM as an Access Point (AP) for your web server projects. This way, you don’t need to be connected to a router to access the web server. We’ll program the ESP32-CAM using Arduino IDE.

ESP32-CAM Set Access Point AP for Web Server Arduino IDE

Access Point vs Station

In previous ESP32-CAM web server projects, we connect the ESP32-CAM to a wireless router. In this configuration, we can access the ESP32-CAM board through the local network.

In this scenario, the router acts as an access point and the ESP32-CAM board is set as a station. So, you need to be connected to your router (local network) to control and access the ESP32-CAM web server.

ESP32-CAM Station connects to Router

In some cases, this might not be the best configuration (when you don’t have a router nearby). But if you set the ESP32-CAM boards as an access point (hotspot), you can be connected using any device with Wi-Fi capabilities without the need to connect to your router.

ESP32-CAM set as a Soft Access Point

Basically, when you set the ESP32-CAM as an access point you create its own Wi-Fi network and nearby Wi-Fi devices (stations) can connect to it (like your smartphone or your computer).

Soft Access Point

Because the ESP32-CAM doesn’t connect further to a wired network (like your router), it is called soft-AP (soft Access Point).

This means that if you try to load libraries or use firmware from the internet, it will not work (like including JavaScript libraries). It also doesn’t work if you try to make HTTP requests to services on the internet (like sending an email with a photo, for example).

ESP32-CAM Video Web Server Access Point (AP)

In this tutorial, we’ll show you how to set the ESP32 as an access point. As an example, we’ll modify the CameraWebServer project that comes with the Arduino IDE. Then, you should be able to modify any of your projects to set the ESP32-CAM as an access point.

In your Arduino IDE, go to File > Examples > ESP32 > Camera > CameraWebServer.

Then, modify the code to act as an access point as we’ll explain.

Customize the SSID and Password

You need to define an SSID name and a password to access the ESP32-CAM access point. In this example we’re setting the ESP32 SSID name to ESP32-CAM Access Point. You can modify the name to whatever you want. The password is 123456789, but you can and should also modify it.

const char* ssid = "ESP32-CAM Access Point";
const char* password = "123456789";

Setting the ESP32-CAM as an Access Point

In the setup(), remove the following lines (set the ESP32 as a station):

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(500);
  Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");

And add the following to set the ESP32 as an access point using the softAP() method:

WiFi.softAP(ssid, password);

There are also other optional parameters you can pass to the softAP() method. Here’s all the parameters:

softAP(const char* ssid, const char* password, int channel, int ssid_hidden, int max_connection)
  • ssid (defined earlier): maximum of 63 characters;
  • password (defined earlier): minimum of 8 characters; set to NULL if you want the access point to be open
  • channel: Wi-Fi channel number (1-13)
  • ssid_hidden: (0 = broadcast SSID, 1 = hide SSID)
  • max_connection: maximum simultaneous connected clients (1-4)

This is what you need to include in your web server sketches to set the ESP32-CAM as an access point.

You can download the complete code here.

Connecting to the ESP32-CAM Access Point

After uploading the code, you can connect to the ESP32-CAM access point to access the web server. You don’t need to connect to a router.

In your smartphone open your Wi-Fi settings and tap the ESP32-CAM Access Point network:

Connect to ESP32-CAM Access Point Smartphone

Type the password you’ve defined earlier in the code.

Connect to ESP32-CAM Access Point Smartphone Insert Password

Open your web browser and type the IP address 192.168.4.1. The video streaming web server page should load:

Video Streaming Web Server ESP32-CAM Access Point


To connect to the access point on your computer, go to the Network and Internet Settings, select the “ESP32-Access-Point“ and insert the password.

Connect to ESP32-CAM Access Point Computer

And it’s done! Now, to access the ESP32-CAM web server page, you just need to type the IP address 192.168.4.1 in your browser.

Wrapping Up

In this tutorial you’ve learned how to set the ESP32-CAM as an access point in your web server sketches. When the ESP32 is set as an access point, devices with Wi Fi capabilities like your smartphone can connect directly to the ESP without the need to connect to a router.

If you like the ESP32-CAM, take a look at our resources:

Thanks for reading.



Build Web Server projects with the ESP32 and ESP8266 boards to control outputs and monitor sensors remotely. Learn HTML, CSS, JavaScript and client-server communication protocols DOWNLOAD »

Build Web Server projects with the ESP32 and ESP8266 boards to control outputs and monitor sensors remotely. Learn HTML, CSS, JavaScript and client-server communication protocols DOWNLOAD »


Enjoyed this project? Stay updated by subscribing our newsletter!

21 thoughts on “ESP32-CAM: Set Access Point (AP) for Web Server (Arduino IDE)”

  1. This is a very interesting post. I can think of some agriculture projects, where distances are large and connectivity is an issue.

    Is it possible for the ESP32-CAM to detect that a new device has connected to it’s WiFi, identify the IP assigned, and then execute some code? For example, send a picture or some data to an Android device. I know this could be done the other way round, the Android device pulling information from the ESP32, but I would like to see how much can be automated.

    Congrats for all your posts!

    Reply
  2. This so much better than using a wifi router, to be able to just log into the camera directly without wifi it could be used anywhere so would love to make one. I think it is the way to go with no wifi for the door and window sensors plus other sensor boards that don’t have to rely on wifi, ESPNow is the way to go

    A very nice project well done you are a very clever person

    Thanks, Bob

    Reply
  3. Very nice project. however, I have a question. Is it possible to change the defaut SoftAP IP adress because I can see it is always 192.168.4.1.
    Thanks a lot

    Reply
    • Hi.
      You can do something like this:

      WiFi.mode(WIFI_AP);
      WiFi.softAP(ssid, password);
      delay(100);

      IPAddress Ip(192, 168, 1, 1); //your desired IP address
      IPAddress NMask(255, 255, 255, 0);
      WiFi.softAPConfig(Ip, Ip, NMask); //set the IP address

      I hope this helps.
      Regards,
      Sara

      Reply
  4. Hi,
    Great project. I got it working right away and I can access it from my cellphone ok. However, this may be obvious to you all but I always get the setup page with all the switches, which is fine, but I want to just get the picture showing (no setup switches…).
    In other words, do all the setup once, add them into the app and not show them, just the CAM screen. Thanks.
    Jacob

    Reply
  5. Hi,
    I have uploaded the file to the esp32-cam successfully however when compiling, I get the following error: ‘box_array_t {aka struct tag_box_list}’ has no member named ‘score’

    Any thoughts?
    D

    Reply
  6. Congratulation for the great tutorial. I found this very useful and easy to implement. Would you please extend the feature to save the video stream to sd card

    Thank you

    Reply
  7. The knockoff camera XRZ00D1 does in fact work with this code as is but it seems like a lot of these cameras are defective.

    Reply
  8. I had a hard time understanding where the actual html was coming from when I first started messing with the ESP32Cam boards. I spent way too long trying to understand how the hex data in “camera_index.h” was a web page so I tried an experiment that worked for me and wanted to pass it on.
    I used a program called “PsPad” installed with the hex editor option and “7zip” and since I am using Windows 7 I also used Notepad.
    What I discovered:
    As it turns out, the webpage being presented was being sent as html but it was being decoded first. This was apparent since there is no substantial html code in this example. When I opened the code and got it uploaded to my ESP32 Cam board, it worked first time and I was elated. Then I started looking for ways to customize/hack the code to suit my needs but I couldn’t find any html code. I did however find where they were sending the html. This code is currently setup to support two different cameras, the OV2640 and the OV3660. I found this in the same location within the code that I found the key to their html. Currently that is in app_httpd.cpp lines 580-589. If it gets shifted around just search this tab file for “httpd_resp_send” and it should put you in the middle of it.
    You’ll notice above this line that they send a line as a response to a webpage request that should look familiar to anyone familiar with html.
    httpd_resp_set_type(req, “text/html”);
    The “text/html” was the line that opened all the doors for me. But then I noticed the second line and I thought I was going to be stuck.
    httpd_resp_set_hdr(req, “Content-Encoding”, “gzip”);
    Gzip encoding? hmmm. Okay that’s new to me for web page presentation. As I kept reading the subsequent lines I noticed that they were basically calling a large character block of data in the form of the variable “index_ov3660_html_gz” or “index_ov2640_html_gz” with an indeterminate length (*) of “index_ov3660_html_gz_len” or “index_ov2640_html_gz_len”.
    If you look in the tab “camera_index.h” you’ll see these lines at the top of the page:
    #define index_ov2640_html_gz_len 4316
    const uint8_t index_ov2640_html_gz[] = {
    What follows however is not html (Yet). It is actually the html however it has been compressed using GNU Zip and is expanded when it is sent as a response to your html page request.
    But now I ran into the problem of seeing what that code is. In my case it was simple. I use many different editors for different things but this was where PsPad came to the rescue. I’m going to try to explain it so maybe you can use this method. Be aware that I have no idea if there is another method or an easier method but this one works for me every time.
    Decoding and formatting the Hex:
    1) In the Arduino IDE click on the camera_index.h tab and highlight ONLY the hex data BETWEEN THE BRACKETS { } of this section of code (lines 5-274).
    2) Open up a no frills editor like Notepad and paste it and save it. You don’t want an editor that is going to assume it knows what kind of file you have opened and then tries to format or change it in any way.
    3) Using Notepad press Ctrl-H and enter “0x” (zero x) without the quotes in the “Find what” line and leave the “Replace with” line blank. This will remove all occurrences of 0x from the file.
    4) Now press Ctrl-H and enter a comma in the “Find what” line and leave the “Replace with” line blank. This will remove all occurrences of “,” from the file.
    5) Save the file for good measure.
    6) Press Ctrl-A to highlight all the data in this file and then press Ctrl-C to copy it to your clipboard.
    7) Close the file.
    8) Now open this file with “PsPad(hex)”. This is a special hex editor that PsPad has as an installation option that I have honestly very rarely used or needed. When you open it in this mode it will not read the file right since it is actually text at the time so you’ll need to replace the contents of this file with what is in your clipboard. To do this:
    9) Press Ctrl-A then Ctrl-V to paste your clipped data into the file.
    10) Use “Save As” to save the file as whatever filename you choose but change the extension to “.gz”
    Now you have the html file saved in a separate file in compressed GNU Zip format.
    I used 7zip to open it but I think WinZip will read it as well. Windows “Extract” is clueless however.
    When you open the .gz file it should contain a compressed file called “index_ov2640.html”.
    Extract the file and you’ll see that it is merely an html file with a whole lot of CSS and some script which looks like it may be JavaScript. The CSS and the JavaScript are “minified” so if you want to make them more readable that is a whole different process I’m not going to go into. You now have the html decoded so from here on you are on your own.
    There is more to the “camera_index.h” file and you can do the same to the rest of it in this same manner. Just remember to only use the data BETWEEN THE BRACKETS { } as the contents of your .gz file.
    Hope this helps even though it is long winded and maybe cumbersome for some but it also works every time, so far (knock on wood).

    Reply

Leave a Comment

Download our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.