DIY Remote Camera using Raspberry Pi, Pi Camera, and Socket.IO

The Client

Now that our socket server is listening to connections, let’s create a client that would connect to that server. Our client will be a simple HTML page. To serve this HTML page, we need to create a node.js server but you are free to use any server of your choice.

var express=require('express');
var app=express();
var http=require('http').Server(app);
var path=require("path");

app.use(express.static(path.join(__dirname,'assets')));
app.get('/',(req,res)=>{
    res.sendFile(__dirname+'/client.html');
});

http.listen(3000,()=>{
    console.log("Server running");
})

Here, we are serving the client.html file whenever the root endpoint is called and are using the static middleware to serve static files. In the root directory of your client app, create a folder called assets. All your static files should go here. Create an HTML file named client.html in your root directory.

We need to load the socket.io module into our webpage and the easiest way is to use a CDN link. Add the following script tag to the header of your webpage.

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

Now, open another script tag and connect to our socket server by specifying its URL.

var socket=io("http://localhost:5000/camera");

Here, camera refers to the namespace. Now, run the server and load the webpage. In the console of your socket server, you should see a message similar to the one below.

You have connected your client to the server!

Inter-socket communication

Now, we need to send a message to the server from the client. To do so, we need to emit an event from the client and have the server listen to that event. Let’s call this event take. On the socket server, let’s create a listener.

socket.of('camera').on("connection", io=>{
    console.log("Client connected!",io.id);
    io.on("take",(mes, fn)=>{
        console.log("Picture request ", mes);
        fn(“Hello from server!”);
    })
})

The socket connection event passes the client socket as an argument into the callback function. We need to listen to the take event on that socket. The on method listens to the take event which is specified as the first argument. The second argument is a callback function into which the message received and another callback function are passed as arguments. This callback function is defined by the client and can be called by the server anytime. Now, whenever we receive a message, a message will be printed in our console and the callback function will be called with another message passed as the argument.

Let’s try to emit an event from the client. We are going to create a button, which when pressed would emit this event.

<button onclick="requestPicture()">Take a Picture!</button>

This button will now call the requestPicture() JavaScript function when clicked.

Now, let’s implement this function inside the script tag we previously created to connect to our socket server.

var socket=io("http://localhost:5000/camera");

function requestPicture(){
                socket.emit('take','picture',(msg)=>{
                    console.log(msg);
                });
            }

We are using the emit method of the socket we created in an earlier method to emit the event take. The first argument passed specifies the name of the event. The next argument is the message that we want to send. The third one is a callback function which accepts an argument. This callback function prints the variable in the console and can be called by the server. We can design this callback function in any way we want to accept any number of arguments. You can use this callback function to receive a response from the server after emitting a message. Let’s test our app now. Load the webpage and click on the button.

On the server’s console, you will be able to see the message “picture” that we sent.

Our web client’s console will have the server’s response printed.

Let’s try to understand the flow of events. First, when we click on the button on the webpage, an event is emitted with a message and a callback function. Our server captures this event and calls the callback function we sent with the message. Our client, now, receives the response.

The Remote Camera

It’s time we set up our Remote Camera now. Since we don’t need our camera module for the time being, let’s run the node.js app on our computer. We need to install the socket.io-client module here. Bear in mind that the module we installed in our socket server is the server module and this is the client module.

npm install --save socket.io-client

Once installed, load it into your script.

var io = require('socket.io-client');

Let’s connect to our socket server.

var socket = io.connect('http://localhost:5000/camera');

We can listen to the connect event to print a message when the socket establishes a connection with our server.

socket.on("connect", () => {

    console.log("Connected to the server!");

})

Run the app and you should see the following message on your console.