ESP32 Tutorial 45- Custom Streamign Server with LED control CAM-3 l SunFounder's ESP32 Learning kit

Hi. welcome to an esp32 tutorial from Robojax  in this video we are going to learn how to use   this esp32 extension board from Sounder to have  a live video stream on our browser and I'm going   to click to turn on an LED from the screen  and turn it off it's also responding very well esp32 starter kit from SunFounder this is  the best esp32 learning kit from SunFounder it   has this esp32 microcontroller which has  built in Wi-Fi and Bluetooth this board   can do everything or Arduino Uno can do  or many other Arduinos can do plus extra   more features because we have Wi-Fi and  Bluetooth the possibilities are endless   you can get connected to the cloud or  do the control or read information or   values via your mobile device or your  desktop or over the cloud from a far location it comes with a camera extension  kit where you can stream the video over   Wi-Fi either through the cloud or to your  network and also it comes with micro SD   card where you can save images on the micro  SD card or you can write from the device any   information log the information on the device  and read it back you can power the board using   this included 18650 lithium battery and it has  built-in charger where you can connect micro USB   and charge the battery the kit comes with 320  pieces of component that you can learn tons of projects we had two previous lessons on this  esp32 extension camera board from SunFounder   where the in the first video we learned how to  take photo with this camera and save it on the   micro SD card the second video we introduce basic  video streaming where we streamed the video and   watched over the Wi-Fi in this video we are going  to add extra feature by creating an interface on   the screen where we can click and turn off the  LED or turn it on from the screen with much more   flexibility from this lesson we learn a lot of  other principle of interacting from the browser come to this page docs.sunFounder.com scroll  down until you see esp32 then click on esp32   starter kit main on the left side click on  Arduino user and then scroll down to 8.3   custom video streaming video server click this  is the document a page for today's lesson we   need our esp32 board esp32 camera extension board  our Bread Board uh jumper wires 220 oh resistor   and an LED we will install our camera and I'm  going to explain the wiring then we have a a   code here the explanation of the code is also here  provided with this screen which I'm going to show you when you use esp32 with SunFounder esp32  camera extension module like this it comes   also with a battery on the package and it comes  a built-in charger so you can connect it and   charge it and disconnect and later on you can  use it with a lot of power so you can power up   your application very easily and here's the  wiring the wiring is very simple we have one   LED the longer pin the positive is facing  this way just inserted somewhere and from   the left pin the black wire is connected to this  blue line which is my ground as shown here and   then it is connected to the ground second pin  is ground when the USB is facing this way you   could connect it directly here and we didn't  need this small wire but I follow the diagram   on the screen and from the right pin we have  220 Ohm resistor to this point where this is connected here to pen 14 um if your camera  is not connected we can just pull this up   like that so I'm pulling it up this black and  this can be removed and invert it very easily   you feel it when it goes in and it is at the  same line of the edge of this PCB and then push it I'm opening Arduino IDE let's open our project by clicking on file  open on the left side click on downloads then   esp32 starter kit main on the right side double  click to open it double click on C double click   on codes and scroll down to ot3 HTML cam LED  double click to open it select this file and   click open this is our uh project majority of  these files we are already familiar this is for   the camera for the Wi-Fi this is for the time  control image conversion some uh frame buffer   and file system and HTT ESP HTTP server  so these are all needed for this the only   thing that you need to set is your Wi-Fi SS ID  and your Wi-Fi password Wi-Fi SS SSID is case   sensitive for example capital D will not work  in my router which is Dar so it must be lower   case in your case also whatever it is and type  it exactly as it is the rest of the setting is   for the pens depending on the type of uh camera  and settings we're not going to touch any of   these and here we're defining the LED pen this  is pen 14 this is holding the whole page which   start here with rawLereral from here to here so  this is the HTML page that we see on the screen and this is the text that you see on the screen so this this text is and this text  so the video is displayed in the in place   of this tag image tag source and ID is photo  it says unload document this is JavaScript get   element ID by source and by uh get element ID  which is cal LED f photo and the source should   be uh from this URL which goes at1 Stream So  this goes and the in place of this photo and   after that these two are our push button  which are labeled LED here with on and off on and off when we click on the on or off it goes to  this function cal LED toggle checkbox to   this and it sends a request of type get forward  SL action question go equal x this x is coming   from here either the word on or off so remember  go is equal x and then now goes action question   mark go and this is this portion is taking  care of it so for each action that we sent   from the browser we should have this element  as you can see stream was getting the video   for us this is getting the action and when  the action happens it goes to this command handlers and it comes to this line command  handlers inside this command Handler here   it says if the variable is equal on print this on  the screen to show in the serial Monitor and then   using digital right LED P set to HIGH, HIGH means  one else if it is equal off then we print this off   on the screen and turn off the LED so that is  the whole so this is how we can turn on and off   LED and you can do anything else that you want  just change on and off accordingly in here and the and on and off in here so here this is for touch  this is for Mouse on and off   so these words must match otherwise it will not work now when we have main forward flash when we  load the page the HTML page it comes and it goes   to index Handler and when we request action  with when we request forward SL stream from this here when the page is loaded it  says go and run on Port 81 for/ stream   that comes to the stream Handler  and here it for/ stream it goes   to stream Handler function and when we  load the page when that when we don't   type anything it goes to index Handler  let's have a look at the index Handler and so it comes to index Handler index Handler is  very simple it goes and it sends response with a   it just sends the HTML page this index HTML  which is this so initially it just sends the   page the page is loaded and then when the page  is loaded we have this for/ stream on Port 81   forward SL stream comes here when the when it's  forward stream it goes to stream Handler and here this is the stream Handler long uh  function which starts up which ends in   here so this stream Handler is setting  a lot of variables for the video when   the request type is stream it stores  it here and the result is the result   of the video is here and it checks  if the result is not equal to ESP okay it will return so it will continuously  stay here otherwise it will run this this   portion which it gets the frame and if there is  camera capture fails it fails otherwise it will   return the buffer and if the is if the result  is okay and there is no issue then at the end   this will return and we will see the video  the setup we use pen mode and set the LED   pin as an output this is setting up the serial  monitor with 115,200 and this is setting up the   ser debug output false so it doesn't print  anything these are all configuration for the camera connect to the Wi-Fi using SS ID  and password and we check using Y Loop   if Wi-Fi_status()is not equal to WL_connected  this is a constant defined in the code and it   every half a second it prints one dot on the  serial monitor side by side as you don't have   here print Ln once the connection happens the  program reaches here and prints that Wi-Fi is   connected and it will print the IP address after  this uh text so we can see which IP to connect   to and then this line is starting the streaming  server and inside the loop we don't have anything now let's see how we can select the esp32 board  we can click here under the select board and   type here esp32 D as soon as you type Dev you see  Dev board you can select it and click okay so the   board have been selected now we have to select  the port the other way to select the board is   Click On Tools board esp32 and select the esp32  Dev module now we have to select the port if I   click here it shows two port and I don't know  which one belongs to my device sometimes you   will see you will not see the number properly  so the best way to be sure the right click on   the start menu go to the device manager and you  will see here the ports if I click on this Arrow   it will show me the ports one is USB serial  ch340 one the other is USB serial device and   here now it's connected if I disconnect this one  of them disappear the one that disappeared is my board so six stays and it disappeared if I connect it so it is my comport ch340 now it is my comp  port and I can select it or I can click on tool   port and here you will see it you can select  whichever you want ours is com8 now we have   successfully selected the board and the port  and this is very important it must be done first and once the code is  ready click here to upload the code you will see the IP address in here  this is our IP address we are going   to open the browser I'm clicking  control V and in here I'm clicking   I'm pasting it so the video is showing up  here this is now the demonstration and as   you can see the browser is now open  I have opened the IP address here 1 192.168.0.100 and this uh esp32 must  be connected to the same router as   this computer otherwise you will not be able  to see it and the LED is also connected we   can click on off to turn it off and click on  so to turn it on the esp32 is now powered up   with uh lithium battery it is not connected  to anything it works perfectly as you can see now here is the demonstration  on mobile device as you can see the   video is there and let's turn on and off  and our LED LED is also responding very well

Channel: Robojax

Views: 893

Keywords: robojax, sun, founder, sunfounder, course, tutorial, kit, learn, learning, step by step, esp32, arduino, iot, wifi, stream, streaming, server, LED, vrowser, wi-fi, control, turn ON, turn OFF, mobile, phone

Id: 73DJFPa_pnA

Length: 17min 29sec (1049 seconds)

Published: Thu Jan 04 2024