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

Deploying the socket server on Heroku

As discussed above, now we need to deploy our server on a cloud platform. Heroku offers a free, simple container called a dyno which should be adequate for our needs. Create a Heroku account and create a new app by clicking on New in the dashboard.

Name your app and click on Create app

Follow the instructions on the next page to deploy our app using Heroku CLI.

Install Heroku CLI using the command below.

npm install -g heroku

Once the installation is completed, enter heroku login to obtain an SSH key. This is a very simple process.

Then navigate to your server folder and initiate a git repository by entering

git init

Then add the Heroku git repository as your remote. To get your Heroku git repository URL, click on Settings on your dashboard and scroll down to the Info section.

Git remote add heroku <your url>

Then, stage all your files, commit them and then push them to the remote repository. Before deploying make sure the name of the server script file is either index.js or the main key in the package.json file has the name of your file.

$ git add .

$ git commit -am "init commit"

$ git push heroku master

Now, you have deployed your app. To get the URL of your app, in the settings page of your dashboard, scroll down to Domains and Certificates. In the client webpage, replace http://localhost:5000 with your app URL (The app will be listening on the default port 80 so don’t include :5000). Do the same in the camera app.

Now, let’s run both the camera app and the client app to see if everything is working as expected.

It’s indeed working as expected!

Configuring Raspberry Pi

Now, let’s get our Raspberry Pi device ready. Install Raspbian on your device and connect the camera module to the dedicated camera port on the device.

If you are wondering how to get the device installed with Raspbian, then worry no more, just follow this tutorial.

Install node.js and copy the code of our camera app into the Raspberry Pi device. Once done, we have an additional module to be installed.

npm install --save raspicam

Then, load it into our app.

var cam = require('raspicam');

Now, let’s configure some options.

var c = new cam({ mode: "photo", output: "photo.jpg", w: 1920, h: 1080 });

Here, we are setting the mode to photo, giving a name and a directory for the output file, and specifying the dimensions of our photo. This would capture the photo and save it in the directory with the name we specified. Then, we can encode that image like we previously did and send it back to the client.

We start taking a picture by calling the start method. Once the photo is saved, a read event would be emitted. Let’s listen to that event. 

c.start();

c.on("read", () => {
        var data = new Buffer(fs.readFileSync("./photo.jpg")).toString("base64");
        fn(data);
        c.stop();
    });

In the event listener, we are encoding the photo as we did before and passing it to the callback function. Then we are calling the stop method to stop the camera.

By default, the camera interface is disabled in Raspberry Pi. To enable it, use sudo raspi-config to enter the configuration mode. There under Interfacings Options, enable the camera interface.

Now, let’s run our camera app and see if we can request for a picture through our webpage and actually get the picture.

And it works! Now, we have a camera that connects to the internet and can be used to take pictures remotely.

You can access the complete code in my Git repository.