Using a esp32 cam to make a surveillance camera.

Hi @sj_h1,

Sorry, I am not clear how far you have got so far.

Assuming you start by getting the camera side to work, and then add in your servo controls later:

With regard to the ESP32 CAM, have you installed some software like the Arduino example in Bill's excellent video using cameraWebServer?

If so, the ESP32 sends HTML/CSS/Javascript commands in 'human readable' form, using simple printf statements, which instructs the browser to produce the human control interface, with many options to alter the camera picture shown in the adjacent window. The ESP32 must also send the video picture, when that option is chosen.

A quick experiment of running this program, using Firefox as the browser, and selecting "More Tools-> Page Source", listed the HTML etc program listing of nearly 800 lines length. The listing was well-formatted and not compressed.

Of course, if you were to look at the stream of data passing from the ESP32 to the browser, whilst a video stream was enabled, then the majority of data bytes would be the video picture itself, which would not be 'human readable'. So far as the HTML etc. program listing is concerned, that is handled by a few lines of code commanding the browser to do all the detail work.

Perhaps, if you describe your current position in a little more detail, somone may be able to help more.

Best wishes, Dave

@sj_h1

So if you are using what most of us do and what Bill used in his video, then it is running a stripped down version of an Apache server. Everything is generated from the app_httpd.cpp file that should be a tab opened in your workspace(assuming you are using the Arduino IDE). Once you start the camera server, you cannot just make your own response in your sketch like you would with a basic web server project because the apache server running for the camera will intercept it. You can edit that file to give you a custom response/page. I am assuming that is what you are looking for.

You would need to create a custom interrupt and its handler and send it through the json_response. The easiest one to copy and play around with is:

//Handler starts with

static esp_err_t status_handler(httpd_req_t *req) {

//Copy the whole section between the {}

//Change status_handler to whatever you want to call it



//Interupt starts with

httpd_uri_t status_uri = {
//Change status_uri to something else. Whatever you want but I would keep the _uri
   .uri = "/status", //Change to name of page accessed
   .method = HTTP_GET,
   .handler = status_handler, //Change to name of handler above
   .user_ctx = NULL
};

I suggest putting a comment line with a label and asterisks all the way across the screen before and after each section of your code because you might find yourself scrolling a lot to find it. I would also assume you would need to set up some kind of pointer to your main sketch.

Yes, I do have the camera server working just fine. I just figured out I can get the web page source by using the "view page source" in my web browser which was the original problem. I now need to know how to modify it to add pan right/left and tilt up/down buttons. I may remove a few of the existing controls because I will not need them.

Posted by: @sj_h1

Yes, I do have the camera server working just fine. I just figured out I can get the web page source by using the "view page source" in my web browser which was the original problem. I now need to know how to modify it to add pan right/left and tilt up/down buttons. I may remove a few of the existing controls because I will not need them.

Unfortunately, it is not that easy but it is doable. You will find the index response in the tab I talked about above. It is pulling the index from the camera_index.h then it uses pointer to the library to get the correct values.

You can create your own using this tool. Copy all but first comma. You will still need to figure out the handler for it but this should work.

Hi @sj_h1,

  The procedure I described was a version of 'View page source', and the code was not compressed, so I am not clear what your original question was discussing.

The code on the ESP32 cam must play several roles, including web server and sending the web browser (HTML etc.) client code to the browser, as well as running the camera (and servos), so extending the system may involve changes to more than 1 section of the code.

----------------

  A reference that looked relevant ... (on a superficial glance - I haven't tried it)

  https://randomnerdtutorials.com/esp32-cam-pan-and-tilt-2-axis/

@davee The html in the server code is compressed and I couldn't find a tool to un-compress it, instead I used the "view source in the browser"

@davee I already did. All I got is the hardware (esp32, servos, power supply) and esp32 camera server code.

Posted by: @sj_h1

@davee The html in the server code is compressed and I couldn't find a tool to un-compress it, instead I used the "view source in the browser"

 

Are you, by any chance, trying to read the HTML file in the Arduino IDE (or a text editor) ?

@will Both, but I couldn't find a tool that sucessfully un-compressed the Arduino source, so I am now using the text from the "view source" in the broswer.

@sj_h1

Files that end in .html, .htm (or similar) must be opened in your browser, or some other display or editing software which is capable of converting the html raw text to its properly formatted state.

It's not that the html files are "compressed", it's just that you're using the wrong tools to view them.

Hi @sj_h1,

   You say "All I got is the hardware (esp32, servos, power supply) and esp32 camera server code."

That seems reasonable .... what were you looking for?

@sj_h1

GZIP is the compression that the Apache server on the ESP32 camera is using. I have not found any converter other than browsers that go the other way(I know there is GNU GZIP for Linux but I do not know for sure if it will decompress too, I will have to try it out tomorrow on my other machine). You can pull the code directly from Chrome and paste it here:

HTML to GZIP

Do not copy the first comma and you will need to replace the code in index_ov3660_html_gz and index_ov2640_html_gz(if you know the field of view of your camera, you would only need to replace that one) of the camera_index.h. You will also need to get the length of it and place it in the defined index_ov2640_html_gz_len and index_ov3660_html_gz_len above each field. You would still need to edit the handler for your new buttons to function. That will be a pain.

But if you don't care about the extra functions, I think @davee gave a very good link. Basic but works.

@davee I need to modify the web page to add 4 buttons:

Tilt up

Tilt down

Pan Left

Pan right

Hi @sj_h1,  RE: I need to modify the web page to add 4 buttons: Tilt .....

  Sorry, I don't have such a servo system (or time) to check it out fully, but at first glance the reference I gave ( https://randomnerdtutorials.com/esp32-cam-pan-and-tilt-2-axis/ )  seems to do just that.

You said you were hoping to graft some code onto an existing base. If it was my task, then I would try implementing a prototype version of this reference, and look to see how it works, then merge with my existing base code... or just possibly, merge the other way round, depending upon the capabilities you need.

Good luck!