Quick Start

Perform the steps described below, and in about five minutes you’ll have a working integration with Realeyes Emotion recognition software.

Prerequisites

Integration basics

In this section we’ll guide you through the basic steps of integrating Realeyes into your page. There’s a live demo available here.

Step 1: Add a container div for the integration content

In the body of the HTML page, add a div that will act as a container for the Realeyes iframe. The iframe itself will be created on the fly by the Realeyes API Client in the next step.

1
2
3
4
5
6
7
8
9
<div id="integrationContainer" class="collection-container">
    <div class="progress-circle"></div>
</div>

<!-- Extra div to output events from Api for demo purpose -->
<div class="output">
    <b>Output:</b>
    <div class="feedback-outup"></div>
</div>

Step 2: Add IntegrationAPI.Client.js to your page

To include the Realeyes API Client, insert the following javascript code in your page. It will upon execution load the client JavaScript library required for Realeyes integration.

1
2
3
4
5
6
7
8
9
<script>
    var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    var script = document.createElement('script');
    script.src = 'https://codesdwncdn.realeyesit.com/IntegrationAPI/3/Realeyesit.IntegrationAPI.Client.min.js';
    script.type = 'text/javascript';
    script.onreadystatechange = InitCollection;
    script.onload = InitCollection;
    head.appendChild(script);
</script>

NOTE: We will implement the ‘InitCollection’ callback function in the next step.

Step 3: Implement the client callback logic to initialize collection

Now we are ready to intialize Realeyesit collection software. Usually the flow is: * Init * AskPermissions * Show media content

NOTE: you can find detailed charts of the webcam permission flow here.

The following JavaScript code initializes the above flow. It will ask permissions for webcam access when the page is loaded then display the video as soon as the user confirms access.

Make sure you replace the API key on the 5th line with the API key you generated in the prerequisite step. Also, place the following code above the code you wrote in the previous step.

The participantId links the client data on our side to yours and it is mandatory.

With the allowedDevices array you can define on which platforms you would like to collect data. Currently mobile, tablet and desktop are supported.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script>
    function InitCollection() {
        var config = {};
        config.apiKey = "2e87c1c4c0cbab41";
        config.key = "My_New_Study";
        config.participantId = "SOME_PARTICIPANT_IDENTIT"; //should be generated, stored and unique
        config.allowedDevices = ["mobile", "tablet", "desktop"];

        var instruction1 = {};
        instruction1.key = "TestInstruction1";
        instruction1.text = "Please watch the next video";
        instruction1.cutoff = 3000;

        var video1 = {};
        video1.key = "TestVideo1_LGStageFright";
        video1.url = "https://developers.realeyesit.com/videos/be4a5cc5-2bb0-4c69-b13a-6c805e5d7f6a.mp4";

        config.elements = [instruction1, video1];

        // check if environment is capable
        Realeyesit.IntegrationAPI.Client.checkEnvironment(function(state) {
            logCmpl(state);
            //subscribe to onReady
            Realeyesit.IntegrationAPI.Client.onReady(function () {
                logCmpl('Ready');
                // ask webcam permission
                Realeyesit.IntegrationAPI.Client.askWebcamPermissions(function (msg) {
                    logCmpl(msg);
                    //start media Preloading
                    Realeyesit.IntegrationAPI.Client.preloadMedias(function (msg) {
                        logCmpl(msg);
                        // start video play
                        Realeyesit.IntegrationAPI.Client.play(logCmpl, logErr, logPrg);
                    }, logErr, logPrg);
                }, logErr, logPrg);
            }, logErr);
        }, logErr);



        //subscribe to global event notification
        Realeyesit.IntegrationAPI.Client.addSessionStateListner(function(message) {
            switch (message.id) {
                case 13:
                    logCmpl(message, true); // Session has been completed
                    break;
                case 15:
                    logErr(message); //Session has been Failed
                    break;
                case 14:
                    logMsg(message); // Session has been declined by participant
                    break;
                default:
                    logPrg(message); // in-progress session states
                    break;
            }
        });

        Realeyesit.IntegrationAPI.Client.onError(logErr);
        Realeyesit.IntegrationAPI.Client.init('integrationContainer', config);
    }
</script>

NOTE: You can provide any type of video which is supported by the default HTML5 player. We recommend to use mp4 for the best performance.

NOTE: Videos uploaded to the delivery portal cannot be used directly from our servers. You have to use your own hosting environment.

Also let’s add function to log and output recieved api messages

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
    var output = document.querySelector('.feedback-outup');

    function logMsg(msg, level) {
        if (output) {
            var messageContainer = document.createElement('pre');
            messageContainer.className = (level || 'log');
            messageContainer.innerHTML = '<b>Timestamp:' + Date.now() + '</b>\n' +  JSON.stringify(msg, null, 2);

            if (output.childNodes.length > 0) {
                output.insertBefore(messageContainer, output.childNodes[0]);
            } else {
                output.appendChild(messageContainer);
            }
        }
    }

    // output messages from command complete callback
    function logCmpl(msg,close) {
        logMsg(msg, 'complete');
        // hide integration frame if test completed
        close && (document.querySelector('#integrationContainer').style.display ='none');
    }

    // output error messages from failed callback
    function logErr(msg) {
        logMsg(msg, 'error');
        // hide integration frame if error
        document.querySelector('#integrationContainer').style.display ='none';
    }

    // output messages from progress callbacks
    function logPrg(msg) {
        logMsg(msg, 'progress');
    }
</script>

Step 4: Run & Check results

If you have done all previous steps you can upload the changes to your web site and launch it. Or if you didn’t do it you can go to the demo page. Open developer tools for your browser and see progress messages in console as well. To check the results of collection, go to our delivery site. You will see a new study called “My_New_Study” under your account on the site. Or you can use our Reporting and Management API, documentation can be found here

NOTE: You will see the new study ‘myNewStudy’ only if you have performed all steps. If you just open our demo page the results will be under our demo study delivery site.