ESP32-CAM Video over Websockets with Relay Bi-directional

hey thanks for tuning in welcome to nomadic geek in this tutorial we'll be using the esp32 cams to control a relay through a web dashboard learn how to create a dynamic dashboard that activates a relay with ease this tutorial is perfect for enhancing your skills and expanding your knowledge of iot so grab your esp32 cam or favorite Arduino and let's get started [Music] [Music] let us first take a look at what we need for this tutorial a relay is an electrically operated switch that opens and closes the circuit to control the flow of electricity it's essentially a switch that is operated by an electromagnet which is triggered by a voltage or current the relay acts as a middleman between the control circuit and the load circuit and it can be used to control high voltage or high power circuits with low power signals they're often used in automated systems to control lighting heating cooling and other electrical systems the esp32 cam is a module based on the esp32 microcontroller which is a powerful low-cost and low Power Platform that is well suited for iot applications the module is equipped with a camera and can be used for a variety of applications including video streaming and image capture it is built-in Bluetooth and Wi-Fi making it well suited for our project an ftdi converter is a device that converts serial signals into USB signals the ftdi converter is used to interface between a computer and a device that uses a Serial interface such as the esp32 cam module hit the like button subscribe to our Channel and turn on notifications for more tutorials like this and don't hesitate to leave a comment with any questions or thoughts you may have now that we're all set let's dive in and start controlling the relay are you ready let's get started if you haven't already you need to install the esp32 board in the Arduino IDE if you need instructions how to do that you can either click the card on the screen or find a link to the short instructional video in the description after watching this video in the top of our code we have some includes and include directive is a pre-processor directive that tells the compiler to include the contents of another file into the source code this allows for code reuse and helps to make the code easier to maintain and modify this header file contains my personal Wi-Fi SSID and password to avoid the risk of revealing it to the internet this file contains definitions structures and functions for controlling the camera and capturing images or videos this provides access to the Wi-Fi functionalities of the esp32 microcontroller this provides access to the websockets functionality this line sets the camera model to the AI thinker model this is necessary to configure the camera pins correctly as different camera models use different pin configurations this provides access to the standard input output library of C which includes functions for input output operations like reading from and writing to the serial interface this header file contains definitions for the camera pins such as the PIN numbers for power data and control signals esp32 cam module has a built-in flashlight on pin number four of the esp32 which we will use in conjunction with the relay for demonstration purposes so we Define The Flash under scorpion as pin 4. and the relay underscore one underscore pin is 12. these two lines of code Define two constant character pointers SSID and password and initialize them with the values of network underscore name and password respectively you will need to replace them with the actual values for your own network as you can see in the comments SSID is the name of the Wi-Fi network you see when connecting to it from as an example a smartphone and the password is its password this line defines the IP address of the computer that will host the node.js server we will write later in this tutorial and the line below is the port which you can leave as it is an IP address is a unique numerical label assigned to a device connected to a network that identifies the device and its location allowing it to communicate with other devices on the network if you need instructions how to check your computer's IP address you can either click the card on the screen or find a link to the short instructional video in the description after watching this video we create an integer for both the flashlight and the relay so that we can keep track of their state on or off as a zero and one using namespace websockets is the C plus directive to include all the symbols and entities defined within the websockets namespace into the global one websockets client client just declares an instance of the websockets client class further we have a function that we use for handling websocket events it takes two parameters event and data which are the event and its accompanying data respectively the function checks the type of the event and outputs a corresponding message to the serial monitor if the event is of connection closed event the ESP module is restarted this ensures that the module continuously tries to establish a connection to the server which I will explain why further down in the code the function on message callback is for handling incoming messages from a websocket connection function takes a single parameter a websocket's message object which represents a message received from the websocket connection the function then extracts a key and a value from the data contained in the message by using the index of and substring methods of the string class depending on the key the function updates the state of either the onboard LED or the relay by setting the corresponding digital output pin high or low the function also prints the key and value to the serial monitor for debugging purposes this is the setup function which is one of the two mandatory functions in an Arduino sketch this function is executed once when the Arduino board is powered on or reset the purpose of the setup function is to initialize any necessary resources such as setting the pin modes initializing libraries or connecting to a network the reason why we have the restart of the esp32 cam and the function above is to run this setup function over and over until the connection is established the first rows in the setup function sets up the configuration of the camera module by initializing a camera underscore configure underscore T struct named config it sets the LED Channel LED timer and pins for various signals including clock signals vertical sync signal horizontal reference signal and power signals among others it also sets the clock frequency pixel format frame size jpeg quality and number of frame buffers then we initializes the camera with the specified configuration checks if the initialization is successful and retrieves the camera sensor object it then sets the contrast Rob gamma and vertical flip of the sensor to flip the image captured by the sensor vertically so that it appears upside down after that it starts a connection with the specified Wi-Fi network and waits until the connection is established then it sets the mode of the two pins for the LED and relay as outputs you can later revisit the code and remove the line set underscore v-flip if the images from your device are upside down these two lines are calling the two functions on message callback and on events callback that were added earlier in the code to handle websocket connection events and message events respectively these functions are being registered with the client object so that they can be triggered when the corresponding events occur during the websocket communication then we initializes the serial communication with a bob rate of 115 200 bits per second so that we can send and receive data to the serial monitor then we connect to the node.js server the while loop continues to execute until the connection is established if the connection fails the loop will wait for 500 milliseconds before trying to connect again so to summarize the life cycle of the program so far when the esp32 cam is powered on it will run the setup function and then set up the Callback functions defined at the top of the code it will remain in the while loop until a connection to the node.js server is established if the connection is lost at any point the honor vents callback event handler will run causing the esp32 cam to restart itself every time it is powered on it will run the setup function and try to connect to the node.js server repeatedly until a connection is successfully established and when that happens the second mandatory function of an Arduino Stitch runs the loop function this function is executed repeatedly allowing the esp32 cam to perform its tasks continuously such as receiving and processing messages reading data from sensors and controlling actuators while it remains connected to the node.js server the first line of the loop function client.pol checks for incoming messages or events from the websocket connection if a new frame buffer an image is available from the camera ESP camera FB git is used to retrieve it if the frame buffer is not available the function returns immediately the next step is to send the binary data of the frame buffer to the node.js server using client.send binary the frame buffer is then returned to the camera using ESP camera FB return after sending the frame buffer a string with the state of the flash LED and relay is constructed and printed to the serial monitor for debugging purposes State can be either on or off finally the state string is sent to the node.js server using client.send that's all for the esp32 cam upload your code to the board so we can move on to writing the code for our node.js server if you need instructions on how to upload your code to your esp32 cam module you can either click the card on the screen or find a link to the short instructional video in the description after watching this video for writing our node.js server you may use the integrated development environment IDE of your preference but in this video I am demonstrating the use of Visual Studio code vs code here we have our project we have a file explorer located on the left side where all of our project files are stored it consists of a public folder which holds all the files that are accessible from the client side then we have our package.json which contains important information about the project such as scripts and version numbers amongst others and is necessary for using npm the package manager for node.js and lastly the server.js which is the core of our project where all the server-side logic and functionality are defined and implemented as you can see I have the package.json file open when you initialize the node.js project with npm in it the package.json file is automatically created and provides you with the opportunity to specify important details such as the name author description and more for your project you can always modify these details later on within this file if you need instructions on how to create a project from scratch this way you can either click the card on the screen or find a link to the short instructional video in the description after watching this video These that the project is using Express is a fast minimalist web framework for node.js it provides a lot of the functionality needed for web application including routing and middleware and makes it easier to build a server the path module provides utilities for working with file and directory paths in node.js it allows you to manipulate file paths in a way that is platform independent so you can write code that works the same on Windows Mac OS and Linux the Ws module provides a websocket implementation websockets allow real-time communication between a server and client and are commonly used for things like chat applications and online games the Ws module provides a simple way to work with websockets in node.js to install a dependency you can use the node package manager command line tool the npm tool is installed with node.js and can be used to install packages from the npm registry if you need instructions on how to install node.js and its package manager you can either click the card on the screen or find a link to the short instructional video in the description after watching this video The Script section of our package.json file in node.js defines command line scripts that can be run using npm in this specific case we have two scripts defined test this script is supposed to run tests for your application but as the script itself says it just returns an error message indicating that no test is specified start this script is more important and is used to start the server it specifies that when the command npm start is run the script should run the server.js file using the node command these scripts can be run from the command line by running npm run script name for example to start the server you would run npm run start the required statement in JavaScript is used to include external modules in the node.js application it allows you to reuse code across your application and is equivalent to importing libraries or modules and other programming languages and we save them as constants we create an instance of the express application we set up a static file server using the express static middleware it Maps the URL static to our public folder in the project directory the folder that is exposed to the clients to read the HTML JavaScript and Graphics within it create an array named clients which will later be used to store connected websocket clients we create a constant named HTTP underscore Port which holds the value of 8 000. this is the port that the HTTP server will listen on and is used to connect to by the clients these lines of code creates an object named devices that contains information about a device named relay underscore module one one the information about the device is stored as an object within the device's object with a port property set to the value 888 this information is used later in the code to define the port on which the server will listen for incoming connections from the device this code is setting up a listener for an uncut exception event when such an event occurs it logs the error into the origin of the errors to the console along with a message indicating the status this code sets up a websocket server on Port 899 and listens for incoming connections when a connection is established the connection event is fired and a new websocket instance is created to represent the connection the code listens for messages sent by the client and then tries to parse the data as a Json object it represents a command operation the code looks up the recipient device and the device's object and sets the command property to the message key and value the code within the track hatch block processes the incoming data in the websocket connection data is not in a valid Json format or if there is any error the code in the catch block ignores the error and continues to listen for new messages this code creates websocket servers for each device defined in the devices object the websocket server listens for incoming connections on the specified Port which is stored in the port property of each device object for each connection the websocket instance representing the connection listens for incoming messages [Music] the command is available in the device object it sends the command to the connected device if the incoming message is an object it sets the image property of the device object to a base64 encoded string representation of the data if the incoming message is a string it splits it by commas and creates a key value object to store peripheral data devices object is then sent to All clients connected to the websocket server finally we create a route with the URL path slash client when this route is requested by a client the server sends back the file located at the path slash public slash client.html the path.resolve method is used to get the absolute path of the file to be sent and the send file method is used to send the file back to the client and we start the HTTP server and listens on Port HTTP underscore Port which was previously defined as 8000. [Music] the public folder contains the client-side components of the web page including the client.css file for styling the client.html file for the page structure and the client.js file for the Page's functionality these files work together to create the final presentation of the web page on the client's device this is a basic HTML structure for a web page called client the content of the web page is placed inside a division element with an ID of main wrapper this main wrapper element is used to render all the JavaScript generated elements on the page includes two resources which are linked through the script and Link tags script tag is linking to client.js while the link tag is linking to client.css the static folder is the virtual path that is mapped to the actual public folder this allows the server to serve the static files to the client when requested as the static folder is the endpoint that is made publicly accessible by the express static middleware in the client.js we have the logic for the presentation this code creates a new websocket connection to the server at its IP and port once the websocket is open a message is sent to the server with an operation of connecting along with an empty data object this message is sent in Json string format the following code is a websocket event listener that listens for incoming messages from the server the Ws object is a websocket instance that has already been established with a connection The Listener function is triggered every time a message is received from the server this data is expected to be in Json format and is parsed into a JavaScript object called MD the function then Loops through each device in MD devices if a device is not present in the HTML document it creates the necessary elements to display information about the device the elements include a main div container with an ID matching the device's ID a header H2 element an image ing element and a div container for holding command buttons if the device has an image the source of the image IMG element is updated with the base64 encoded image data received from the server if the device has peripheral devices the function Loops through each peripheral device and creates command buttons If the buttons don't already exist each button has an ID matching the ID of the peripheral device a state icon that displays whether the peripheral is on or off and an event listener that listens for clicks on the button the event listener sends a command to the server via the websocket connection indicating the desired State change for the peripheral if the peripheral device already exists the function checks if its state has changed and if so updates the state icon accordingly at dot CSS file is responsible for styling including positioning and appearance we are controlling the appearance and position of the HTML body foreign cards commands buttons and the icon for on and off let's try it all out we try to start the server we have to install the express module [Music] we try again now the server starts and is evidenced by the output in the serial monitor communication has been established between the server and the esp32 cam let's try if we can see anything in the client all seems to work as it should we can both turn on the LED as well as the relay controlling the LED bar let's take a look at how the relay should be connected and then summarize the command's flow from button pushed in the dashboard on the client to the relay connected to the esp32 cam foreign this is how we connect if we are using a 5 volt relay this is because the esp32 cam module can output 5 volt on its 5V pin this is how we connected for a 12 volt relay which is the one I am currently using the esp32 cam is just connected to the ground and Signal pin on gpio12 and the power is provided from the 12 volt battery this is how it could look like in an installation foreign let us go through the flow now when the button is clicked an event handler is triggered which sends a websockets message to the server with an operation of command and the data containing the state of the device and its reference [Music] the server gets the message and as the operation is set to command it sets the command to the device object when the server receives a message from the device with a pending command it sends the command to the device in return and then sets the command to null indicating that it has been processed and consumed the esp32 cam module gets the message and Triggers on message which call the on message callback function the messages contain either onboard led1 or relay 1 as the key and one or zero as the value the relay receives a high signal to turn on the connected peripheral the variable holding the state gets a 1 instead of zero the new state is sent back to the server causing the icon on the dashboard to turn yellow this allows the client to send the next command of zero which turns off the relay and that concludes this tutorial if you enjoyed what you saw make sure to hit the Subscribe button and give this video a big like that way you'll never miss a single one of my future uploads and if you have any ideas for topics you'd like to see me cover in the future drop a comment below your feedback and suggestions are always appreciated so until next time farewell and keep on learning [Music] foreign [Music]

Channel: Nomadic Geek

Views: 2,834

Keywords: Wi-Fi, wifi, Bluetooth, Camera, Surveillance, wifi-camera, node.js, websockets, ESP32, ESP32-CAM, ESP8266, stream, video stream, arduino, microcontroller, IoT, DIY, DHT11, DHT22, maker, sensor data, Relay, Bidirectional, communication, How to, websocket, tutorial, sockets, real-time monitoring

Id: qz8Xre9XGG0

Length: 26min 46sec (1606 seconds)

Published: Sun Feb 12 2023