{"id":101496,"date":"2021-04-08T13:39:35","date_gmt":"2021-04-08T13:39:35","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=101496"},"modified":"2024-06-14T09:46:51","modified_gmt":"2024-06-14T09:46:51","slug":"esp32-cam-pan-and-tilt-2-axis","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-cam-pan-and-tilt-2-axis\/","title":{"rendered":"ESP32-CAM Pan and Tilt Video Streaming Web Server (2 Axis)"},"content":{"rendered":"\n<p>In this project, we\u2019ll attach the ESP32-CAM to a pan and tilt stand with two SG90 servo motors. With a pan and tilt camera stand, you can move the camera up, down, to the left, and the right\u2014 this is great for surveillance. The ESP32-CAM hosts a web server that shows video streaming and buttons to control the servo motors to move the camera.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-CAM-Pan-Tilt-Video-Streaming-Web-Server.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-103043\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-CAM-Pan-Tilt-Video-Streaming-Web-Server.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-CAM-Pan-Tilt-Video-Streaming-Web-Server.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-CAM-Pan-Tilt-Video-Streaming-Web-Server.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-CAM-Pan-Tilt-Video-Streaming-Web-Server.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p><strong>Boards compatibility:<\/strong> for this project, you need an ESP32 camera development board with<br>access to two GPIOs to control two servo motors. You can use: <a href=\"https:\/\/makeradvisor.com\/esp32-cam-ov2640-camera\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP32-CAM AI-Thinker<\/a>, <a href=\"https:\/\/makeradvisor.com\/ttgo-t-journal-esp32-camera-board-review\/\" target=\"_blank\" rel=\"noreferrer noopener\">T-Journal<\/a>, <a href=\"https:\/\/makeradvisor.com\/ttgo-t-camera-plus-esp32-review-pinout\/\" target=\"_blank\" rel=\"noreferrer noopener\">TTGO T-Camera Plus<\/a>, or ESP32-CAM Freenove boards (<a href=\"https:\/\/randomnerdtutorials.com\/getting-started-freenove-esp32-wrover-cam\/\" title=\"\">Wrover <\/a>or S3).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Parts Required<\/h2>\n\n\n\n<p>For this project, we\u2019ll use the following parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp32-cam-external-antenna\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP32-CAM AI-Thinker with external antenna<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/pan-and-tilt-2-servos\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pan and tilt stand with SG90 servo motors<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/prototyping-circuit-board-stripboard\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Prototyping circuit board (optional)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jumper wires<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pan and Tilt Stand and Motors<\/h2>\n\n\n\n<p>For this project, we\u2019ll use a pan and tilt stand that already comes with two SG90 servo motors. The stand is shown in the following figure.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/Pan-and-tilt-with-Servo-Motors.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Pan and Tilt with SG90 Servo Motors ESP32-CAM\" class=\"wp-image-101499\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/Pan-and-tilt-with-Servo-Motors.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/Pan-and-tilt-with-Servo-Motors.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>We got our stand from Banggood, but you can get yours from any other store.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/pan-and-tilt-2-servos\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pan and Tilt stand with two servo motors<\/a><\/li>\n<\/ul>\n\n\n\n<p>Alternatively, you can get <a href=\"https:\/\/makeradvisor.com\/tools\/micro-servo-motor-tool\/\" target=\"_blank\" rel=\"noreferrer noopener\">two SG90 servo motors<\/a> and 3D print your own stand.<\/p>\n\n\n\n<p>Servo motors have three wires with different colors:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\"><strong>Wire<\/strong><\/td><td><strong>Color<\/strong><\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"rnthl rntcred\">Power<\/span><\/td><td>Red<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"rnthl rntcblack\">GND<\/span><\/td><td>Black or brown<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\"><span class=\"rnthl rntcorange\">Signal<\/span><\/td><td>Yellow, orange or white<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Control a Servo?<\/h2>\n\n\n\n<p>You can position the servo\u2019s shaft at various angles from 0 to 180\u00ba. Servos are controlled using a pulse width modulation (PWM) signal. This means that the PWM signal sent to the motor determines the shaft\u2019s position.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"500\" height=\"199\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/0-180-degrees.png?resize=500%2C199&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32-CAM servo shaft angles from 0 to 180\u00ba\" class=\"wp-image-61336\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/0-180-degrees.png?w=500&amp;quality=100&amp;strip=all&amp;ssl=1 500w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/0-180-degrees.png?resize=300%2C119&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/0-180-degrees.png?resize=250%2C100&amp;quality=100&amp;strip=all&amp;ssl=1 250w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>To control the servo motor, you can use the PWM capabilities of the ESP32 by sending a signal with the appropriate pulse width. Or you can use a library to make the code simpler. We\u2019ll be using the <strong>ESP32Servo <\/strong>library.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installing the ESP32Servo Library<\/h3>\n\n\n\n<p>To control servo motors, we\u2019ll use the <strong>ESP32Servo <\/strong>library. Make sure you install that library before proceeding. In your Arduino IDE, go to <strong>Sketch <\/strong>> <strong>Include Library<\/strong> > <strong>Manage Libraries<\/strong>. Search for <strong>ESP32Servo <\/strong>and install the library.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"815\" height=\"433\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/install-esp32-servo-library-arduino-ide.png?resize=815%2C433&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install ESP32 Servo library arduino ide\" class=\"wp-image-158928\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/install-esp32-servo-library-arduino-ide.png?w=815&amp;quality=100&amp;strip=all&amp;ssl=1 815w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/install-esp32-servo-library-arduino-ide.png?resize=300%2C159&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/01\/install-esp32-servo-library-arduino-ide.png?resize=768%2C408&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 815px) 100vw, 815px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Code<\/h2>\n\n\n\n<p>Copy the following code to your Arduino IDE.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\r\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\r\n  Complete instructions at https:\/\/RandomNerdTutorials.com\/esp32-cam-projects-ebook\/\r\n  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\r\n  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n*********\/\r\n\r\n#include &quot;esp_camera.h&quot;\r\n#include &lt;WiFi.h&gt;\r\n#include &quot;esp_timer.h&quot;\r\n#include &quot;img_converters.h&quot;\r\n#include &quot;Arduino.h&quot;\r\n#include &quot;fb_gfx.h&quot;\r\n#include &quot;soc\/soc.h&quot;             \/\/ disable brownout problems\r\n#include &quot;soc\/rtc_cntl_reg.h&quot;    \/\/ disable brownout problems\r\n#include &quot;esp_http_server.h&quot;\r\n#include &lt;ESP32Servo.h&gt;\r\n\r\n\/\/ Replace with your network credentials\r\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\r\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\r\n\r\n#define PART_BOUNDARY &quot;123456789000000000000987654321&quot;\r\n\r\n#define CAMERA_MODEL_AI_THINKER\r\n\/\/#define CAMERA_MODEL_M5STACK_PSRAM\r\n\/\/#define CAMERA_MODEL_M5STACK_WITHOUT_PSRAM\r\n\/\/#define CAMERA_MODEL_M5STACK_PSRAM_B\r\n\/\/#define CAMERA_MODEL_WROVER_KIT\r\n\r\n#if defined(CAMERA_MODEL_WROVER_KIT)\r\n  #define PWDN_GPIO_NUM    -1\r\n  #define RESET_GPIO_NUM   -1\r\n  #define XCLK_GPIO_NUM    21\r\n  #define SIOD_GPIO_NUM    26\r\n  #define SIOC_GPIO_NUM    27\r\n  \r\n  #define Y9_GPIO_NUM      35\r\n  #define Y8_GPIO_NUM      34\r\n  #define Y7_GPIO_NUM      39\r\n  #define Y6_GPIO_NUM      36\r\n  #define Y5_GPIO_NUM      19\r\n  #define Y4_GPIO_NUM      18\r\n  #define Y3_GPIO_NUM       5\r\n  #define Y2_GPIO_NUM       4\r\n  #define VSYNC_GPIO_NUM   25\r\n  #define HREF_GPIO_NUM    23\r\n  #define PCLK_GPIO_NUM    22\r\n\r\n#elif defined(CAMERA_MODEL_M5STACK_PSRAM)\r\n  #define PWDN_GPIO_NUM     -1\r\n  #define RESET_GPIO_NUM    15\r\n  #define XCLK_GPIO_NUM     27\r\n  #define SIOD_GPIO_NUM     25\r\n  #define SIOC_GPIO_NUM     23\r\n  \r\n  #define Y9_GPIO_NUM       19\r\n  #define Y8_GPIO_NUM       36\r\n  #define Y7_GPIO_NUM       18\r\n  #define Y6_GPIO_NUM       39\r\n  #define Y5_GPIO_NUM        5\r\n  #define Y4_GPIO_NUM       34\r\n  #define Y3_GPIO_NUM       35\r\n  #define Y2_GPIO_NUM       32\r\n  #define VSYNC_GPIO_NUM    22\r\n  #define HREF_GPIO_NUM     26\r\n  #define PCLK_GPIO_NUM     21\r\n\r\n#elif defined(CAMERA_MODEL_M5STACK_WITHOUT_PSRAM)\r\n  #define PWDN_GPIO_NUM     -1\r\n  #define RESET_GPIO_NUM    15\r\n  #define XCLK_GPIO_NUM     27\r\n  #define SIOD_GPIO_NUM     25\r\n  #define SIOC_GPIO_NUM     23\r\n  \r\n  #define Y9_GPIO_NUM       19\r\n  #define Y8_GPIO_NUM       36\r\n  #define Y7_GPIO_NUM       18\r\n  #define Y6_GPIO_NUM       39\r\n  #define Y5_GPIO_NUM        5\r\n  #define Y4_GPIO_NUM       34\r\n  #define Y3_GPIO_NUM       35\r\n  #define Y2_GPIO_NUM       17\r\n  #define VSYNC_GPIO_NUM    22\r\n  #define HREF_GPIO_NUM     26\r\n  #define PCLK_GPIO_NUM     21\r\n\r\n#elif defined(CAMERA_MODEL_AI_THINKER)\r\n  #define PWDN_GPIO_NUM     32\r\n  #define RESET_GPIO_NUM    -1\r\n  #define XCLK_GPIO_NUM      0\r\n  #define SIOD_GPIO_NUM     26\r\n  #define SIOC_GPIO_NUM     27\r\n  \r\n  #define Y9_GPIO_NUM       35\r\n  #define Y8_GPIO_NUM       34\r\n  #define Y7_GPIO_NUM       39\r\n  #define Y6_GPIO_NUM       36\r\n  #define Y5_GPIO_NUM       21\r\n  #define Y4_GPIO_NUM       19\r\n  #define Y3_GPIO_NUM       18\r\n  #define Y2_GPIO_NUM        5\r\n  #define VSYNC_GPIO_NUM    25\r\n  #define HREF_GPIO_NUM     23\r\n  #define PCLK_GPIO_NUM     22\r\n\r\n#elif defined(CAMERA_MODEL_M5STACK_PSRAM_B)\r\n  #define PWDN_GPIO_NUM     -1\r\n  #define RESET_GPIO_NUM    15\r\n  #define XCLK_GPIO_NUM     27\r\n  #define SIOD_GPIO_NUM     22\r\n  #define SIOC_GPIO_NUM     23\r\n  \r\n  #define Y9_GPIO_NUM       19\r\n  #define Y8_GPIO_NUM       36\r\n  #define Y7_GPIO_NUM       18\r\n  #define Y6_GPIO_NUM       39\r\n  #define Y5_GPIO_NUM        5\r\n  #define Y4_GPIO_NUM       34\r\n  #define Y3_GPIO_NUM       35\r\n  #define Y2_GPIO_NUM       32\r\n  #define VSYNC_GPIO_NUM    25\r\n  #define HREF_GPIO_NUM     26\r\n  #define PCLK_GPIO_NUM     21\r\n\r\n#else\r\n  #error &quot;Camera model not selected&quot;\r\n#endif\r\n\r\n#define SERVO_1      14\r\n#define SERVO_2      15\r\n\r\n#define SERVO_STEP   5\r\n\r\nServo servo1;\r\nServo servo2;\r\n\r\nint servo1Pos = 0;\r\nint servo2Pos = 0;\r\n\r\nstatic const char* _STREAM_CONTENT_TYPE = &quot;multipart\/x-mixed-replace;boundary=&quot; PART_BOUNDARY;\r\nstatic const char* _STREAM_BOUNDARY = &quot;\\r\\n--&quot; PART_BOUNDARY &quot;\\r\\n&quot;;\r\nstatic const char* _STREAM_PART = &quot;Content-Type: image\/jpeg\\r\\nContent-Length: %u\\r\\n\\r\\n&quot;;\r\n\r\nhttpd_handle_t camera_httpd = NULL;\r\nhttpd_handle_t stream_httpd = NULL;\r\n\r\nstatic const char PROGMEM INDEX_HTML[] = R&quot;rawliteral(\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;title&gt;ESP32-CAM Robot&lt;\/title&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\r\n    &lt;style&gt;\r\n      body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}\r\n      table { margin-left: auto; margin-right: auto; }\r\n      td { padding: 8 px; }\r\n      .button {\r\n        background-color: #2f4468;\r\n        border: none;\r\n        color: white;\r\n        padding: 10px 20px;\r\n        text-align: center;\r\n        text-decoration: none;\r\n        display: inline-block;\r\n        font-size: 18px;\r\n        margin: 6px 3px;\r\n        cursor: pointer;\r\n        -webkit-touch-callout: none;\r\n        -webkit-user-select: none;\r\n        -khtml-user-select: none;\r\n        -moz-user-select: none;\r\n        -ms-user-select: none;\r\n        user-select: none;\r\n        -webkit-tap-highlight-color: rgba(0,0,0,0);\r\n      }\r\n      img {  width: auto ;\r\n        max-width: 100% ;\r\n        height: auto ; \r\n      }\r\n    &lt;\/style&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;h1&gt;ESP32-CAM Pan and Tilt&lt;\/h1&gt;\r\n    &lt;img src=&quot;&quot; id=&quot;photo&quot; &gt;\r\n    &lt;table&gt;\r\n      &lt;tr&gt;&lt;td colspan=&quot;3&quot; align=&quot;center&quot;&gt;&lt;button class=&quot;button&quot; onmousedown=&quot;toggleCheckbox('up');&quot; ontouchstart=&quot;toggleCheckbox('up');&quot;&gt;Up&lt;\/button&gt;&lt;\/td&gt;&lt;\/tr&gt;\r\n      &lt;tr&gt;&lt;td align=&quot;center&quot;&gt;&lt;button class=&quot;button&quot; onmousedown=&quot;toggleCheckbox('left');&quot; ontouchstart=&quot;toggleCheckbox('left');&quot;&gt;Left&lt;\/button&gt;&lt;\/td&gt;&lt;td align=&quot;center&quot;&gt;&lt;\/td&gt;&lt;td align=&quot;center&quot;&gt;&lt;button class=&quot;button&quot; onmousedown=&quot;toggleCheckbox('right');&quot; ontouchstart=&quot;toggleCheckbox('right');&quot;&gt;Right&lt;\/button&gt;&lt;\/td&gt;&lt;\/tr&gt;\r\n      &lt;tr&gt;&lt;td colspan=&quot;3&quot; align=&quot;center&quot;&gt;&lt;button class=&quot;button&quot; onmousedown=&quot;toggleCheckbox('down');&quot; ontouchstart=&quot;toggleCheckbox('down');&quot;&gt;Down&lt;\/button&gt;&lt;\/td&gt;&lt;\/tr&gt;                   \r\n    &lt;\/table&gt;\r\n   &lt;script&gt;\r\n   function toggleCheckbox(x) {\r\n     var xhr = new XMLHttpRequest();\r\n     xhr.open(&quot;GET&quot;, &quot;\/action?go=&quot; + x, true);\r\n     xhr.send();\r\n   }\r\n   window.onload = document.getElementById(&quot;photo&quot;).src = window.location.href.slice(0, -1) + &quot;:81\/stream&quot;;\r\n  &lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n)rawliteral&quot;;\r\n\r\nstatic esp_err_t index_handler(httpd_req_t *req){\r\n  httpd_resp_set_type(req, &quot;text\/html&quot;);\r\n  return httpd_resp_send(req, (const char *)INDEX_HTML, strlen(INDEX_HTML));\r\n}\r\n\r\nstatic esp_err_t stream_handler(httpd_req_t *req){\r\n  camera_fb_t * fb = NULL;\r\n  esp_err_t res = ESP_OK;\r\n  size_t _jpg_buf_len = 0;\r\n  uint8_t * _jpg_buf = NULL;\r\n  char * part_buf[64];\r\n\r\n  res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);\r\n  if(res != ESP_OK){\r\n    return res;\r\n  }\r\n\r\n  while(true){\r\n    fb = esp_camera_fb_get();\r\n    if (!fb) {\r\n      Serial.println(&quot;Camera capture failed&quot;);\r\n      res = ESP_FAIL;\r\n    } else {\r\n      if(fb-&gt;width &gt; 400){\r\n        if(fb-&gt;format != PIXFORMAT_JPEG){\r\n          bool jpeg_converted = frame2jpg(fb, 80, &amp;_jpg_buf, &amp;_jpg_buf_len);\r\n          esp_camera_fb_return(fb);\r\n          fb = NULL;\r\n          if(!jpeg_converted){\r\n            Serial.println(&quot;JPEG compression failed&quot;);\r\n            res = ESP_FAIL;\r\n          }\r\n        } else {\r\n          _jpg_buf_len = fb-&gt;len;\r\n          _jpg_buf = fb-&gt;buf;\r\n        }\r\n      }\r\n    }\r\n    if(res == ESP_OK){\r\n      size_t hlen = snprintf((char *)part_buf, 64, _STREAM_PART, _jpg_buf_len);\r\n      res = httpd_resp_send_chunk(req, (const char *)part_buf, hlen);\r\n    }\r\n    if(res == ESP_OK){\r\n      res = httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);\r\n    }\r\n    if(res == ESP_OK){\r\n      res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));\r\n    }\r\n    if(fb){\r\n      esp_camera_fb_return(fb);\r\n      fb = NULL;\r\n      _jpg_buf = NULL;\r\n    } else if(_jpg_buf){\r\n      free(_jpg_buf);\r\n      _jpg_buf = NULL;\r\n    }\r\n    if(res != ESP_OK){\r\n      break;\r\n    }\r\n    \/\/Serial.printf(&quot;MJPG: %uB\\n&quot;,(uint32_t)(_jpg_buf_len));\r\n  }\r\n  return res;\r\n}\r\n\r\nstatic esp_err_t cmd_handler(httpd_req_t *req){\r\n  char*  buf;\r\n  size_t buf_len;\r\n  char variable[32] = {0,};\r\n  \r\n  buf_len = httpd_req_get_url_query_len(req) + 1;\r\n  if (buf_len &gt; 1) {\r\n    buf = (char*)malloc(buf_len);\r\n    if(!buf){\r\n      httpd_resp_send_500(req);\r\n      return ESP_FAIL;\r\n    }\r\n    if (httpd_req_get_url_query_str(req, buf, buf_len) == ESP_OK) {\r\n      if (httpd_query_key_value(buf, &quot;go&quot;, variable, sizeof(variable)) == ESP_OK) {\r\n      } else {\r\n        free(buf);\r\n        httpd_resp_send_404(req);\r\n        return ESP_FAIL;\r\n      }\r\n    } else {\r\n      free(buf);\r\n      httpd_resp_send_404(req);\r\n      return ESP_FAIL;\r\n    }\r\n    free(buf);\r\n  } else {\r\n    httpd_resp_send_404(req);\r\n    return ESP_FAIL;\r\n  }\r\n\r\n  sensor_t * s = esp_camera_sensor_get();\r\n  \/\/flip the camera vertically\r\n  \/\/s-&gt;set_vflip(s, 1);          \/\/ 0 = disable , 1 = enable\r\n  \/\/ mirror effect\r\n  \/\/s-&gt;set_hmirror(s, 1);          \/\/ 0 = disable , 1 = enable\r\n\r\n  int res = 0;\r\n  \r\n  if(!strcmp(variable, &quot;up&quot;)) {\r\n    if(servo1Pos &lt;= 170) {\r\n      servo1Pos += 10;\r\n      servo1.write(servo1Pos);\r\n    }\r\n    Serial.println(servo1Pos);\r\n    Serial.println(&quot;Up&quot;);\r\n  }\r\n  else if(!strcmp(variable, &quot;left&quot;)) {\r\n    if(servo2Pos &lt;= 170) {\r\n      servo2Pos += 10;\r\n      servo2.write(servo2Pos);\r\n    }\r\n    Serial.println(servo2Pos);\r\n    Serial.println(&quot;Left&quot;);\r\n  }\r\n  else if(!strcmp(variable, &quot;right&quot;)) {\r\n    if(servo2Pos &gt;= 10) {\r\n      servo2Pos -= 10;\r\n      servo2.write(servo2Pos);\r\n    }\r\n    Serial.println(servo2Pos);\r\n    Serial.println(&quot;Right&quot;);\r\n  }\r\n  else if(!strcmp(variable, &quot;down&quot;)) {\r\n    if(servo1Pos &gt;= 10) {\r\n      servo1Pos -= 10;\r\n      servo1.write(servo1Pos);\r\n    }\r\n    Serial.println(servo1Pos);\r\n    Serial.println(&quot;Down&quot;);\r\n  }\r\n  else {\r\n    res = -1;\r\n  }\r\n\r\n  if(res){\r\n    return httpd_resp_send_500(req);\r\n  }\r\n\r\n  httpd_resp_set_hdr(req, &quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;);\r\n  return httpd_resp_send(req, NULL, 0);\r\n}\r\n\r\nvoid startCameraServer(){\r\n  httpd_config_t config = HTTPD_DEFAULT_CONFIG();\r\n  config.server_port = 80;\r\n  httpd_uri_t index_uri = {\r\n    .uri       = &quot;\/&quot;,\r\n    .method    = HTTP_GET,\r\n    .handler   = index_handler,\r\n    .user_ctx  = NULL\r\n  };\r\n\r\n  httpd_uri_t cmd_uri = {\r\n    .uri       = &quot;\/action&quot;,\r\n    .method    = HTTP_GET,\r\n    .handler   = cmd_handler,\r\n    .user_ctx  = NULL\r\n  };\r\n  httpd_uri_t stream_uri = {\r\n    .uri       = &quot;\/stream&quot;,\r\n    .method    = HTTP_GET,\r\n    .handler   = stream_handler,\r\n    .user_ctx  = NULL\r\n  };\r\n  if (httpd_start(&amp;camera_httpd, &amp;config) == ESP_OK) {\r\n    httpd_register_uri_handler(camera_httpd, &amp;index_uri);\r\n    httpd_register_uri_handler(camera_httpd, &amp;cmd_uri);\r\n  }\r\n  config.server_port += 1;\r\n  config.ctrl_port += 1;\r\n  if (httpd_start(&amp;stream_httpd, &amp;config) == ESP_OK) {\r\n    httpd_register_uri_handler(stream_httpd, &amp;stream_uri);\r\n  }\r\n}\r\n\r\nvoid setup() {\r\n  WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0); \/\/disable brownout detector\r\n  servo1.setPeriodHertz(50);    \/\/ standard 50 hz servo\r\n  servo2.setPeriodHertz(50);    \/\/ standard 50 hz servo\r\n  \r\n  servo1.attach(SERVO_1, 1000, 2000);\r\n  servo2.attach(SERVO_2, 1000, 2000);\r\n  \r\n  servo1.write(servo1Pos);\r\n  servo2.write(servo2Pos);\r\n  \r\n  Serial.begin(115200);\r\n  Serial.setDebugOutput(false);\r\n  \r\n  camera_config_t config;\r\n  config.ledc_channel = LEDC_CHANNEL_0;\r\n  config.ledc_timer = LEDC_TIMER_0;\r\n  config.pin_d0 = Y2_GPIO_NUM;\r\n  config.pin_d1 = Y3_GPIO_NUM;\r\n  config.pin_d2 = Y4_GPIO_NUM;\r\n  config.pin_d3 = Y5_GPIO_NUM;\r\n  config.pin_d4 = Y6_GPIO_NUM;\r\n  config.pin_d5 = Y7_GPIO_NUM;\r\n  config.pin_d6 = Y8_GPIO_NUM;\r\n  config.pin_d7 = Y9_GPIO_NUM;\r\n  config.pin_xclk = XCLK_GPIO_NUM;\r\n  config.pin_pclk = PCLK_GPIO_NUM;\r\n  config.pin_vsync = VSYNC_GPIO_NUM;\r\n  config.pin_href = HREF_GPIO_NUM;\r\n  config.pin_sccb_sda = SIOD_GPIO_NUM;\r\n  config.pin_sccb_scl = SIOC_GPIO_NUM;\r\n  config.pin_pwdn = PWDN_GPIO_NUM;\r\n  config.pin_reset = RESET_GPIO_NUM;\r\n  config.xclk_freq_hz = 20000000;\r\n  config.pixel_format = PIXFORMAT_JPEG; \r\n  \r\n  if(psramFound()){\r\n    config.frame_size = FRAMESIZE_VGA;\r\n    config.jpeg_quality = 10;\r\n    config.fb_count = 2;\r\n  } else {\r\n    config.frame_size = FRAMESIZE_SVGA;\r\n    config.jpeg_quality = 12;\r\n    config.fb_count = 1;\r\n  }\r\n  \r\n  \/\/ Camera init\r\n  esp_err_t err = esp_camera_init(&amp;config);\r\n  if (err != ESP_OK) {\r\n    Serial.printf(&quot;Camera init failed with error 0x%x&quot;, err);\r\n    return;\r\n  }\r\n  \/\/ Wi-Fi connection\r\n  WiFi.begin(ssid, password);\r\n  while (WiFi.status() != WL_CONNECTED) {\r\n    delay(500);\r\n    Serial.print(&quot;.&quot;);\r\n  }\r\n  Serial.println(&quot;&quot;);\r\n  Serial.println(&quot;WiFi connected&quot;);\r\n  \r\n  Serial.print(&quot;Camera Stream Ready! Go to: http:\/\/&quot;);\r\n  Serial.println(WiFi.localIP());\r\n  \r\n  \/\/ Start streaming web server\r\n  startCameraServer();\r\n}\r\n\r\nvoid loop() {\r\n  \r\n}\r\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-CAM-eBook\/raw\/master\/Code\/Module_4\/Pan_and_Tilt_Video_Streaming\/Pan_and_Tilt_Video_Streaming.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Network Credentials<\/h3>\n\n\n\n<p>Insert your network credentials and the code should work straight away.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How the Code Works<\/h3>\n\n\n\n<p>Let&#8217;s take a look at the relevant parts to control the servo motors.<\/p>\n\n\n\n<p>Define the pins the servo motors are connected to. In this case, they are connected to the ESP32-CAM GPIOs 14 and 15.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#define SERVO_1 14\n#define SERVO_2 15<\/code><\/pre>\n\n\n\n<p>Create <span class=\"rnthl rntliteral\">Servo<\/span> objects to control each motor:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Servo servo1;\nServo servo2;<\/code><\/pre>\n\n\n\n<p>Define the servos&#8217; initial position.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>int servo1Pos = 0;\nint servo2Pos = 0;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Web Page<\/h3>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">INDEX_HTML<\/span> variable contains the HTML text to build the web page. The following lines display the buttons.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;table&gt;\n  &lt;tr&gt;&lt;td colspan=\"3\" align=\"center\"&gt;&lt;button class=\"button\" onmousedown=\"toggleCheckbox('up');\" ontouchstart=\"toggleCheckbox('up');\"&gt;Up&lt;\/button&gt;&lt;\/td&gt;&lt;\/tr&gt;\n  &lt;tr&gt;&lt;td align=\"center\"&gt;&lt;button class=\"button\" onmousedown=\"toggleCheckbox('left');\" ontouchstart=\"toggleCheckbox('left');\"&gt;Left&lt;\/button&gt;&lt;\/td&gt;&lt;td align=\"center\"&gt;&lt;\/td&gt;&lt;td align=\"center\"&gt;&lt;button class=\"button\" onmousedown=\"toggleCheckbox('right');\" ontouchstart=\"toggleCheckbox('right');\"&gt;Right&lt;\/button&gt;&lt;\/td&gt;&lt;\/tr&gt;\n  &lt;tr&gt;&lt;td colspan=\"3\" align=\"center\"&gt;&lt;button class=\"button\" onmousedown=\"toggleCheckbox('down');\" ontouchstart=\"toggleCheckbox('down');\"&gt;Down&lt;\/button&gt;&lt;\/td&gt;&lt;\/tr&gt;                   \n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p>When you click the buttons, the <span class=\"rnthl rntliteral\">toggleCheckbox()<\/span>  JavaScript function is called. It makes a request on a different URL depending on the button clicked.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>function toggleCheckbox(x) {\n  var xhr = new XMLHttpRequest();\n  xhr.open(\"GET\", \"\/action?go=\" + x, true);\n  xhr.send();\n}<\/code><\/pre>\n\n\n\n<p><br>Here are the requests made depending on the button that is being pressed:<\/p>\n\n\n\n<p><strong>Up:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/action?go=<strong>up<\/strong><\/code><\/pre>\n\n\n\n<p><strong>Down:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/action?go=<strong>down<\/strong><\/code><\/pre>\n\n\n\n<p><strong>Left:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/action?go=<strong>left<\/strong><\/code><\/pre>\n\n\n\n<p><strong>Right:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/action?go=<strong>right<\/strong><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Handle Requests<\/h3>\n\n\n\n<p>Then, we need to handle what happens when we get those requests. That\u2019s what\u2019s done in the following lines.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>if(!strcmp(variable, \"up\")) {\n  if(servo1Pos &lt;= 170) {\n    servo1Pos += 10;\n    servo1.write(servo1Pos);\n  }\n  Serial.println(servo1Pos);\n  Serial.println(\"Up\");\n}\nelse if(!strcmp(variable, \"left\")) {\n  if(servo2Pos &lt;= 170) {\n    servo2Pos += 10;\n    servo2.write(servo2Pos);\n  }\n  Serial.println(servo2Pos);\n  Serial.println(\"Left\");\n}\nelse if(!strcmp(variable, \"right\")) {\n  if(servo2Pos &gt;= 10) {\n    servo2Pos -= 10;\n    servo2.write(servo2Pos);\n  }\n  Serial.println(servo2Pos);\n  Serial.println(\"Right\");\n}\nelse if(!strcmp(variable, \"down\")) {\n  if(servo1Pos &gt;= 10) {\n    servo1Pos -= 10;\n    servo1.write(servo1Pos);\n  }\n  Serial.println(servo1Pos);\n  Serial.println(\"Down\");\n}<\/code><\/pre>\n\n\n\n<p>To move a motor, call the <span class=\"rnthl rntliteral\">write()<\/span> function on the <span class=\"rnthl rntliteral\">servo1<\/span> or <span class=\"rnthl rntliteral\">servo2<\/span> objects and pass the angle (0 to 180) as an argument. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>servo1.write(servo1Pos);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">setup()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup()<\/span>, set the servo motor properties: define the signal frequency.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>servo1.setPeriodHertz(50); \/\/ standard 50 hz servo\nservo2.setPeriodHertz(50); \/\/ standard 50 hz servo<\/code><\/pre>\n\n\n\n<p>Use the <span class=\"rnthl rntliteral\">attach()<\/span> method to set the servo GPIO and minimum and maximum pulse width in microseconds.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>servo1.attach(SERVO_1, 1000, 2000);\nservo2.attach(SERVO_2, 1000, 2000);<\/code><\/pre>\n\n\n\n<p>Set the motors to its initial position when the ESP32 first boots.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>servo1.write(servo1Pos);\nservo2.write(servo2Pos);<\/code><\/pre>\n\n\n\n<p>That\u2019s pretty much how the code works when it comes to control the servo motors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing the Code<\/h2>\n\n\n\n<p>After inserting your network credentials, you can upload the code to your board. You can use an FTDI programmer or an ESP32-CAM MB programmer. Read one of the following articles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/program-upload-code-esp32-cam\/\">How to Program \/ Upload Code to ESP32-CAM AI-Thinker (Arduino IDE) (FTDI)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/upload-code-esp32-cam-mb-usb\/\" target=\"_blank\" rel=\"noreferrer noopener\">Upload Code to ESP32-CAM AI-Thinker using ESP32-CAM-MB USB Programmer (easiest way)<\/a><\/li>\n<\/ul>\n\n\n\n<p>After uploading, open the Serial Monitor to get the board IP address.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"241\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-CAM-web-server-IP-address.png?resize=666%2C241&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32-CAM Getting IP Address Serial Monitor\" class=\"wp-image-158996\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-CAM-web-server-IP-address.png?w=666&amp;quality=100&amp;strip=all&amp;ssl=1 666w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-CAM-web-server-IP-address.png?resize=300%2C109&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/figure><\/div>\n\n\n<p><strong>Note:<\/strong> if you&#8217;re using an FTDI programmer, don&#8217;t forget to disconnect GPIO 0 from GND before opening the Serial Monitor.<\/p>\n\n\n\n<p>Open a browser and type the board IP address to get access to the web server. Click on the buttons and check on the Serial Monitor if everything seems to be working as expected.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"411\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-CAM-controlling-servos-pan-and-tilt.png?resize=666%2C411&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32-CAM Pan and Tilt Web Server Serial Monitor\" class=\"wp-image-158997\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-CAM-controlling-servos-pan-and-tilt.png?w=666&amp;quality=100&amp;strip=all&amp;ssl=1 666w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-CAM-controlling-servos-pan-and-tilt.png?resize=300%2C185&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 666px) 100vw, 666px\" \/><\/figure><\/div>\n\n\n<p>If everything is working as expected, you can wire the servo motors to the ESP32-CAM and continue with the project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Circuit<\/h2>\n\n\n\n<p>After assembling the pan and tilt stand, connect the servo motors to the ESP32-CAM as shown in the following schematic diagram. We\u2019re connecting the servo motor data pins to <span class=\"rnthl rntcorange\">GPIO 15<\/span> and <span class=\"rnthl rntcorange\">GPIO 14<\/span>.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"556\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-cam-serv-pan-tilt.png?resize=900%2C556&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32-CAM Pan and Tilt Servo Motors\" class=\"wp-image-103174\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-cam-serv-pan-tilt.png?w=900&amp;quality=100&amp;strip=all&amp;ssl=1 900w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-cam-serv-pan-tilt.png?resize=300%2C185&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-cam-serv-pan-tilt.png?resize=768%2C474&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div>\n\n\n<p>You can use a mini breadboard to assemble the circuit or build a mini stripboard with header pins to connect power, the ESP32-CAM, and the motors, as shown below.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP32-CAM-Pan-and-Tilt-prototype-board.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32-CAM Pan and Tilt Prototype Board\" class=\"wp-image-101510\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP32-CAM-Pan-and-Tilt-prototype-board.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP32-CAM-Pan-and-Tilt-prototype-board.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>The following figure shows how the pan and tilt stands looks like after assembling.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP32-CAM-Pan-and-Tilt-Circuit.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32-CAM Pan and Tilt Assembled\" class=\"wp-image-101502\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP32-CAM-Pan-and-Tilt-Circuit.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP32-CAM-Pan-and-Tilt-Circuit.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<p>Apply power to your board. Open a browser and type the ESP32-CAM IP address. A web page with real-time video streaming should load. Click the buttons to move the camera up, down, left, or right.<\/p>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"609\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP32-CAM-Pan-and-Tilt-Web-Server-Smartphone.jpg?resize=300%2C609&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32-CAM Pan and Tilt Web Server Video Streaming Smartphone Arduino IDE\" class=\"wp-image-101503\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP32-CAM-Pan-and-Tilt-Web-Server-Smartphone.jpg?w=300&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP32-CAM-Pan-and-Tilt-Web-Server-Smartphone.jpg?resize=148%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 148w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure><\/div>\n\n\n<p>You can move the camera remotely using the buttons on the web page. This allows you to<br>monitor a different area according to the camera position. This is a great solution for surveillance applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this tutorial, you&#8217;ve learned how to build a pan-and-tilt web server with video streaming to control the ESP32-CAM.<\/p>\n\n\n\n<p>Controlling servo motors with the ESP32-CAM is the same as controlling them using a &#8220;regular&#8221; ESP32. You can read the following tutorial to learn more about servo motors with the ESP32:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-servo-motor-web-server-arduino-ide\/\">ESP32 Servo Motor Web Server with Arduino IDE<\/a><\/li>\n<\/ul>\n\n\n\n<p>If you want to control your robot outside the range of your local network, you might consider <a href=\"https:\/\/randomnerdtutorials.com\/esp32-cam-access-point-ap-web-server\/\">setting the ESP32-CAM as an access point<\/a>. This way, the ESP32-CAM doesn&#8217;t need to connect to your router. It creates its own wi-fi network, and nearby wi-fi devices like your smartphone can connect to it.<\/p>\n\n\n\n<p>For more projects and tutorials with the ESP32-CAM:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-cam-projects-ebook\/\">Build ESP32-CAM Projects using Arduino IDE eBook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32-cam\/\">More ESP32-CAM Projects and Tutorials&#8230;<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this project, we\u2019ll attach the ESP32-CAM to a pan and tilt stand with two SG90 servo motors. With a pan and tilt camera stand, you can move the camera &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32-CAM Pan and Tilt Video Streaming Web Server (2 Axis)\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-cam-pan-and-tilt-2-axis\/#more-101496\" aria-label=\"Read more about ESP32-CAM Pan and Tilt Video Streaming Web Server (2 Axis)\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":103043,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[319],"tags":[],"class_list":["post-101496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32-cam"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-CAM-Pan-Tilt-Video-Streaming-Web-Server.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/101496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=101496"}],"version-history":[{"count":2,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/101496\/revisions"}],"predecessor-version":[{"id":158998,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/101496\/revisions\/158998"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/103043"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=101496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=101496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=101496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}