Introduction

Introducing JSHG

Javascript Hand Gesture Plugin (JSHG) is a wonderful plugin that allows you to support the hand gesture recognition of users through web camera in your existing websites or web applications. You do not need to have any background in computer vision to use this plugin. It currently offers the basic set of hand gestures which include the position of hand (left, right, up, down) and counts the number of fingers. We provides a well-designed API for you to integrate JSHG to your application easily. If you have strong background in computer vision, it is very simple for you to customize JSHG according to your preference.

How it works

JSHG plugin reads the video stream from the webcam.

It uses computer vision to track user's hand.

Red dot is the position of hand.
Yellow dots are the positions of fingers.

The screen is divided into 9 areas.
On the left picture, the hand is in "DOWN" position.

The main application which integrates JSHG plugin in is provided that hand information to map with their corresponding actions.

How To Integrate

Step 1 - Load JSHG files.

Download and unzip the latest version of JSHG.
Look inside the jshg folder to find jquery-1.11.0.min.js, compatibility.js, jshg.js and load all of them. You can replace jquery-1.11.0.min.js by your own jQuery library (but it must be jQuery v1.6 or later). All the files must be loaded in the following order:
```
<script src="jshg/jquery-1.11.0.min.js"></script>
<script src="jshg/compatibility.js"></script>
<script src="jshg/jshg.js"></script>
```

Step 2 - Initialize JSHG

Define a function to map the gesture returning from JSHG with your expected actions

var actionMapper = function(gesture) {
    if (gesture.isLeft) 
        console.log("Hey, your hand is on the left side");
    ...
}

gesture

reference

Optional: add a div to display the gesture images.

<div id="gestureShownHere"></div>

Init JSHG

JSHG.init({
    "actionCallback": actionMapper, 
    "learnDivId": "gestureShownHere",
    "gestureDivId": "gestureShownHere",
    "settings": {
        "cameraWidth": 500, 
        "cameraHeight": 400, 
        "gestureDisplayWidth": 100, 
        "gestureDisplayHeight": 80
    },
});

settings

reference

Step 3 - Turn it on

At this time, JSHG is ready to use.

JSHG.run()
// JSHG.stop(); -- for stopping

To improve the accuracy of hand gesture recognition, you may want JSHG to learn the skin color before running. You can easily do that by using the following function instead of JSHG.run()

JSHG.learnSkinColor()

More details about the API are available at reference page.

Examples

Example 1 - HTML5Slides

Try now

In this example, we integrate JSHG with Google HTML5 slide template. This allows you to create a wonderful presentation by controlling the slides by your hand gestures via webcam. Two basic gestures are used: moving hand to the right moves the slide forward and moving hand to the left moves it backward.

The integrated code is simple as the following:

var currentGesture = null;
var finishLearning = function() {
    $("#startInstruction").show();
}
var actionMapper = function(gesture) {
    if (currentGesture != null && currentGesture.isSameRelativePos(gesture)) return;
    if (gesture.isLeft) {
        nextSlide();
    } else if (gesture.isRight) {
        prevSlide();
    };
    currentGesture = gesture;
}
JSHG.init({
    "actionCallback": actionMapper, 
    "learnCallback": finishLearning,
    "learnDivId": "learningShownHere",
    "gestureDivId": "gestureShownHere",
    "settings": {
        "learningCountDown_": 10, 
        "cameraWidth": 500, 
        "cameraHeight": 400, 
        "gestureDisplayWidth": 100, 
        "gestureDisplayHeight": 80
    },
});

Example 2 - Google Earth