Creating a Simple SimpleCVjs App: Face-detection

Creating a Simple SimpleCVjs App: Face-detection

I use SimpleCV a lot. It is a computer vision library for Python. It is great for doing prototyping and experimentation. The same folks have come up with SimpleCV.js, which aims to give the same set of tools to the browser. With HTML5 folks coming up with getUserMedia, which lets app developers access the user's camera and microphone, there are tons of things that can be done with tools like SimpleCVjs to do cool Computer Vision stuff.

The SimpleCVjs github page, provides an awesome demo app, with an in-browser interactive console to write stuff. That app incorporates a whole lotta features and can be a little difficult to understand. So in this post I shall develop a very simple app that takes input from the user's webcam and detects faces in the video stream .

Create a boilerplate app with Chaplin

Brunch is a nice little tool used to build web applications. We shall use a boilerplate app to get us started with brunch and Chaplin. Chaplin is a MVC framework and has neat features for memory management. I shall write more about these two tools in the future. For now use brunch new gh:paulmillr/brunch-with-chaplin to get a boilerplate app.

After this we need to add SimpleCV modules to our app. For this copy the contents of the app/models/ folder into your app's app/models/ and vendor folder to your app's vendor folder. Also update your brunch-config.coffee file to account for the vendor stylesheets.

The app can be started by running brunch watch --server. This starts a demon which listens for changes to your app's files and rebuilds in case of any change, also starts an HTTP server.

Setting up "views" for the app

Okay so we have our basic boilerplate app up! and have configured SimpleCVjs in it. Now we need to modify the Image model in app/models, to add a function for face detection.

We shall remove the default code for "views". For setting up the camera input we use the following code in app/views/home/home-page-views.coffee

Okay so no we are ready to run our app! 😀 We shall see the face details being printed to the console every time the app detects a face! Awesome!

Check out the github page for seeing the source code.

About Ganesh

Leave a Reply

Your email address will not be published. Required fields are marked *