Getting Started with JavaScript

In this guide, we will show you how to integrate your Web application with the Realeyes Experience Platform using our ExperienceSDK for Javascript - Emotion & Attention.

After completing this guide, you will know

• the system requirements for the integration with the ExperienceSDK,
• how to include the ExperienceSDK in your web application so that it can take and analyze images from the source's device
• what steps are needed to see the first facial expression data arrive from the device to our Experience Dashboard.

ExperienceSDK - Emotion & Attention system requirements

Supported Browsers

The following browsers are supported on desktop platforms:

• Chrome (54 or newer)
• Edge (15 or newer)
• Opera (41 or newer)

Recommended Hardware Requirements

• CPU: 3GHz
• RAM: 16GB
• GPU: 1.5GB

You also need to generate an account hash on the Developers Portal to be able to initialize and use the ExperienceSDK.

Adding the ExperienceSDK to your web app

The latest version of the ExperienceSDK is published on Realeyes' CDN (powered by AWS). To include it in your app, just reference the library, eg.:

<script src="https://codesdwncdn.realeyesit.com/experience-sdk/xp/release/1/reExperienceSdk.min.js"></script>

Versioning

The SDK uses semantic versioning, eg.: 1.5.10 Releases can be found, by replacing the version part of the library's link:

https://codesdwncdn.realeyesit.com/experience-sdk/xp/release/{SEMANTIC_VERSION}/reExperienceSdk.min.js

Latest versions are always under '1' version:

https://codesdwncdn.realeyesit.com/experience-sdk/xp/release/1/reExperienceSdk.min.js

Working with the ExperienceSDK

When you embed the ExperienceSDK to a web application and start it, it detects certain events on the device. These events can be e.g. facial expression detection events, analytic events, custom events for user segmentation, etc. We refer to the detection or generation of those events as event collection.

The ExperienceSDK also emits (exposes) few of the events to the web application for client side handling, and sends the events to our Experience Dashboard for further processing.

Adding the SDK to a web app will automatically instantiate itself under 'window.Realeyesit.experienceSdk'.

var reConfig = {
        accountHash: 'YOUR_ACCOUNT_HASH',
        autoStart: true,
        autoPreLoad: true,
};

window.Realeyesit.experienceSdk.init(reConfig);

Important

Account hash must be filled with a registered one!

By default the configuration seen above is enough to start the SDK and start collecting data.

Important

It will ask for camera permission from the user.

For the ExperienceSDK to be able to generate Facial Expression Events, first you need check for camera permission and if it is not granted, you need to request it from the user. Please refer to the Android documentation on how to check for and request camera permission.

If your web app already has a camera stream, you can easily pass it to the SDK with the configuration:

var reConfig = {
        accountHash: 'YOUR_ACCOUNT_HASH',
        autoStart: true,
        autoPreLoad: true,
        cameraStream: YOUR_CAMERA_STREAM_OBJECT
};

window.Realeyesit.experienceSdk.init(reConfig);

Working with Events

The SDK uses a pub-sub mechanism, calling the 'on' method on the SDK will register a handler for the specified event:

window.Realeyesit.experienceSdk.on('facialExpressionsDetected', (params) => {
        console.log(params);
});

Currently available events are:

facialExpressionsDetected,
initDone,
preloadDone,
cameraPermissionAccessed,
cameraPermissionDenied,
runningStateChanged,

Examples

We know that the easiest way to understand an SDK is through examples. Here you can find some.