Team Ubidots:

•

UbiMaker

Published September 22, 2015

Face Counter with Raspberry Pi

Count how many people are looking at a camera.

Work in progress11,252

Things used in this project

Hardware components

Web Camera

Raspberry Pi 2 Model B

Software apps and online services

Ubidots

OpenCV – Open Source Computer Vision Library OpenCV

Story

Why counting people?

The Internet of Things is about merging the digital and the physical. If there's one thing we learned about the digital world in the past 15 years is that successful products and services were the ones that closed the loop.

That's right; Google built a fortune "closing the loop" by measuring clicks and views of ads, helping brands optimize their offerings; LinkedIn "closed the loop" because they allowed us to discover hidden relationships within our network, helping people get a new job or a new business deal; Amazon "closed the loop" by suggesting relevant products based on your browsing and buying habits.

In fact, there's a great quote from a known Silicon Valley investor that says:

"What I learned from Google is to only invest in things that close the loop" (Chris Sacca)

If we apply this concept to the physical world, the possibilities are enormous. Uber is a good example: the traditional process (ordering a cab) was disrupted by providing a feedback loop (a mobile app) to tell you where the car is and how much it might cost (see a Tim O'Reilly video about this).

This project is about closing the loop in the real world: being able to measure the interest in a product or shelf and having this data online using Ubidots, to help retailers and product manufacturers make decisions in real-time.

A Face Counter with Raspberry Pi + Web Camera

In this project we explore a face counter device using:

Node.js wrapper for OpenCV

A Raspberry Pi (w/ an SD card of least a 8GB!)

A cheap Web Camera

The Ubidots cloud

It could be applied to many things like:

Measuring the interest in a particular product in a supermarket

Measuring the interest of students in a particular book or topic in a library's bookshelf

Do A/B testing of product features or packaging

And the best thing is - it will cost you less than $50 dollars.

1. Setup your Ubidots Account

Log in to Ubidots. Create a datasource and add a new variable called "Faces". To do this, go to the "Sources" tab and click on "Add new data source":

Creating a data source in Ubidots

...then click on the data source and select "Add new variable":

Adding a new variable in Ubidots

Click on the "i" icon of the variable and copy the VARIABLE's ID. We'll need this later. Each variable have an ID:

Get the VARIABLE's ID

Now go to "My profile" tab, click on "API Keys" and then on "Create Short Token". This will be your key to authenticate the Raspberry Pi to the Ubidots API. Copy it somewhere as we'll also need it for our code.

2. Install the required packages in your RPi

Be aware that this will take a while (at least 9 hours to build and install OpenCV!):

Install Node.js in Raspberry Pi

Build and install OpenCV 2.4.9 in a Raspberry Pi

Install the Node.js wrapper for OpenCV:

$ npm install nodejs

Install other required libraries by Node:

$ npm install express
$ npm install ubidots

3. Coding the Face Counter

ubidotsCamera.js

This code requires an external XML file to detect the faces. Download it from the following link and place it on the same folder as the "ubidotsCamera.js" file: haarcascade_frontalface_alt2.xml

Finally, let's put an HTML in the same folder so we can access the camera from a browser: index.html. To run the project, access your Raspberry Pi through a terminal and run the .js file:

$ node ubidotsCamera.js

After that, open a web browser and write the following in the address bar: http://localhost:2000/

Great! Now you should see the faces being detected and their sum being send over to Ubidots.

var cv = require('opencv');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

var xml = './haarcascade_frontalface_alt2.xml';
var BLUE = [255, 0, 0]; //default red
var COLOR = [0, 255, 0]; //default red

var ubidots = require('ubidots');

// Replace with your Ubidots Token here
var client = ubidots.createClient('8324c8efe664adeed3f21c20f860ef37fb839ad0');

app.get('/', function(req, res){
  res.sendFile(__dirname+'/index.html');
});

app.get('/js/index.js', function(req, res){
  res.sendFile(__dirname + '/js/index.js');
});

app.get('/js/interact-1.2.2.min.js', function(req, res){
  res.sendFile(__dirname + '/js/interact-1.2.2.min.js');
});

app.get('/css/style.css', function(req, res){
  res.sendFile(__dirname + '/css/style.css');
});

io.on('connection', function(socket){
	
});

http.listen(2000, function(){
  console.log('listening on *:2000');
});

var loop = function () {
  var camera = new cv.VideoCapture(0);
  camera.setWidth(360);
  camera.setHeight(240);
  camera.read(function (err, image) {
	image.detectObject(xml, {}, function(err, faces) {
		for(var k = 0; k < faces.length; k++) {
			face = faces[k];
			image.ellipse(face.x + face.width/2, face.y + face.height/2, face.width/2, face.height/2, COLOR, 2);
		}
		io.emit('image', image.toBuffer().toString('base64'));
		io.emit('numface', faces.length);

		client.auth(function () {
			// Replace with your Ubidots VARIABLE ID here
			var v = this.getVariable('54e24ca876254262e98a3369');
			v.saveValue(faces.length);
		});
		camera.close();
	});
  });
};

setInterval(loop, 10000);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ubidots</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <img id="camera" />
  <div id="nav2">
        Faces: 
	<a id="text">Sensor</a>
        </br>
  </div>

  <script>
    var socket = io();
    var image = document.querySelector('#camera');

    socket.on('image', function (data) {
      image.src = 'data:image/png;base64,' + data;
    });

    socket.on('numface', function(data){
      document.getElementById("text").innerHTML = data;
    });

  </script>
</body>
</html>