Player overlays

Customizing overlays

It is possible to override any overlay for any display area in our system. The system uses 2 levels of overlays settings:

  1. global settings
  2. settings per player/plugin

Currently we have 4 display areas which display information to user:

* Id: 1, Name: MAIN_AREA - display area which covers active player's display rectangle. Active player is the player that the events (play,pause) come from
* Id: 2, Name: INACTIVE_AREA - display area which covers all inactive player' display rectangle
* Id: 4, Name: OPTOUT - display area where optout dialog can be shown (for now it's active player's display rectangle)
* Id: 6, Name: WAITING - display area that covers active player's display rectangle after user allowed camera and before recording has been started

Behaviour of displaying all prompts/overlays for all display areas has the following steps:

  1. video starts playing
  2. system asks access to webcam
  3. depending whether access dialog of browser:
    1. appears
      • pause video
      • show MAIN_AREA overlay for active player
      • show INACTIVE_AREA overlays for all inactive players
    2. doesn’t appear
      • do nothing
  4. depending whether the user
    1. allows access to camera
      • show waiting overlay until recording is started
    2. denies access to camera
      • remove all overlays
      • resume video
    3. does nothing within the timeout period
      • remove all overlays
      • resume video
    4. click on opt-out button on the main area overlay
      • show opt-out overlay for active player
      • after timeout period remove all overlays and resume video

Also overlays for MAIN_AREA and INACTIVE_AREA usually contain a button to optout dialog. If user presses the button, the optout dialog will appear for 5 seconds.

Global overlay settings

To change global settings you should use ‘overlaySet’ field of rubac init request:

<script>
rubac('initialize', {  accountId: 'aaaaaa-bbbbbb', overlaySet:'Hello3FinalWithoutArrow' });
</script>

or

<script>
rubac('initialize', {  accountId: 'aaaaaa-bbbbbb', overlaySet: { overlays: [{ type: 4, content: '<div>My Opt out overlay</div>' }] }});
</script>

The ‘overlaySet’ field can contain:

  • overlaySet name. It’s the name of an already defined overlaySet (see the list) or the name of a content A/B testing experiment, which includes more than one overlaySet
  • an object with overlays’ settings. The object includes next fields:
    • ‘name’ - name of overlaySet which will be used as base overlaySet for customization. If name isn’t provided then default overlaySet will be used
    • ‘overlays’ - array of settings for display areas. Each object has next fields:
      • ‘type’(mandatory field) - type of display area (1 - MAIN_AREA, 2 - INACTIVE_AREA, 4 - OPTOUT)
      • ‘url’ (optional) - link to html which contains the overlay
      • ‘content’ (optional) - overlay content

examples:

overlaySet: {
    name:'Hello3FinalWithoutArrow',
    overlays: [
    { type: 1, url: 'http:\\linktoMyActiveOverlay.html' },
    { type: 4, content: '<div>My Opt out overlay</div>' }
    ]
}

or

overlaySet: {
    overlays: [
    { type: 2, url: 'MyInactiveOverlay.html' }
    ]
}

Predefined overlays

You can see a list of predefined overlays from the following web page

Overlays settings per plugin

If you create your own plugin and want to use different overlays for different plugins then you can override overlay settings per player instance. You should provide settings with your player object. examples:

rubac('application.addPlayer', { player: yourPluginPlayer, overlaySet: 'AnotherOverlaySet' } )

or

var settings= { overlays: [ { type: 2, url: 'MyInactiveOverlay.html' }]};

rubac('application.addPlayer', { player: yourPlugin1_Player, overlaySet: 'AnotherOverlaySet' } )
rubac('application.addPlayer', { player: yourPlugin2_Player1, overlaySet: settings } )
rubac('application.addPlayer', { player: yourPlugin2_Player2, overlaySet: settings } )

Implement opt-out functionality on main overlay

If you want global opt-out functionality on your custom overlay, all you have to do is to provide an element the user can click on and make the following call window.parent.Realeyesit.OverlayHelper.optOut(window, 5000); in the click event handler. (5000 is the timeout period when the overlay will be hidden automatically.)

One possible implementation can look like this:

<a href="#" onclick="window.parent.Realeyesit.OverlayHelper.optOut(window, 5000);">Opt out</a>

Overlays tutorial

In this tutorial we are going to adjust overlays for the Realeyes UBA SDK using the settings. As a result we’ll have code that changes overlays to match the opt-out and main areas of YouTube video.

We will use an YouTube video and a default YouTube plug-in.

Firstly, let’s add the following html content to our page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>How to use default overlays</title>
    </head>
    <body style="padding: 8px;">
        <h4>Video</h4>
        <iframe width="640" height="360" src="//www.youtube.com/embed/Yf636vLep8s" frameborder="0" allowfullscreen></iframe><br />
        <script>
            (function (w, d, tn, p, n, e, f, co) {
                w['RealeyesitUBACore'] = n;
                w[n] = w[n] || function (m, h) {
                    h.t = w[n].gt ? w[n].gt() : Date.now();
                    co = {}, co.m = m, co.args = h;
                    (w[n].q = w[n].q || []).push(co);
                };
                e = d.createElement(tn), f = d.getElementsByTagName(tn)[0];
                e.async = 1;
                e.src = p;
                f.parentNode.insertBefore(e, f);
            })(window, document, 'script', '//datacollection2cdn.realeyesit.com/DataCollectionSDK/live/' +
        'realeyesit_UBA_SDK_js.min.js', 'rubac');
            rubac('initialize', { accountId: 'd3d944-xOSevn', plugins: ["youtube"] });
        </script>
    </body>
</html>

The page contains the video and some basic injection code for the Realeyes UBA. (See working example.) As you can see, we are using the default plug-in for YouTube video:

rubac('initialize', { accountId: 'd3d944-xOSevn',plugins: ["youtube"] });

We’ll be using our default overlay.

Step 1: Define base overlay set

We will use an overlay as our default overlay set. For that we need to change the code to use a predefined overlaySet:

rubac('initialize',
{ accountId: 'd3d944-xOSevn',plugins: ["youtube"], overlaySet: "Hello3FinalWithoutArrow" });

The overlaySet will thus be applied to all videos. (See working example.)

You can find a list of supported sets here.

Step 2: Define custom overlay for main area

Predefined overlays can’t cover everything. Let’s create a new html ‘mainOverlay.html’ file with a main overlay for a custom plug-in:

<!DOCTYPE html>
<html>
    <head>
        <title>How to use default overlays</title>
        <link type="text/css" media="screen" rel="stylesheet" href="site.css">
    </head>
    <body>
        <div id="main-overlay-container">
        <span>Please share your webcam</span>
        <br/>
        or <a href="#" onclick="window.parent.Realeyesit.OverlayHelper.optOut(window, 5000);">Opt out</a>
        </div>
    </body>
</html>

We’ll also add the following style to ‘site.css’:

#main-overlay-container{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: gray;
    text-align: center;
    color: white;
    opacity: 70
}

The overlay will show ‘Please share your webcam’on a gray background. Let’s change our injection code to apply the overlay to the plug-in:

var oSettings = {
    name: "Hello3FinalWithoutArrow",
    overlays: [{
                 type: 1,
                 url: "mainOverlay.html"
               }]
};

rubac('initialize',
{ accountId: 'd3d944-xOSevn', plugins: ["youtube"], <b>overlaySet: oSettings </b>});

Where:

  • name - name of the extended overlay set (if skip this then the default overlayset will be used)
  • overlays - the array contains overlay settings per display area
  • type - display area type
  • url - url to html with overlay content which will be displayed in a separate iframe

Overlay types are:

  • Id: 1, Name: MAIN_AREA - display area which covers active player’s display rectangle. Active player it’s player when user press play/pause etc
  • Id: 2, Name: INACTIVE_AREA - display area which covers all inactive players’ display rectangle
  • Id: 4, Name: OPTOUT - display area where optout dialog can be shown (for now it’s active player’s display rectangle)

NOTE:If you want global opt-out functionality on your custom overlay, all you have to do is to provide an element the user can click on and make the following call Realeyesit.OverlayHelper.optOut(window, 5000); where 5000 is the timeout period when the overlay will be hidden automatically.

In our overlay it looks like this:

<a href="#" onclick="window.parent.Realeyesit.OverlayHelper.optOut(window, 5000);">Opt out</a>

The old overlay will be overriden and will show our new overlay from ‘mainOverlay.html’. (See working example.)

Step 3: Define custom opt-out overlay

Let’s try to change the current opt-out overlay to white on black lettering.

‘Custom opt-out dialog’:

var optoutOverlay = '<html><head></head><body style="margin:0; padding:0"><div style="width:100%;height:100%;background-color:black;text-align: center;color: white;">Custom opt out dialog!</div></body></html>';
var oSettings = {
    name: "Hello3FinalWithoutArrow",
    overlays: [{ type: 4, content: optoutOverlay },
                  {
                 type: 1,
                 url: "mainOverlay.html"
               }]
};

rubac('initialize',
{ accountId: 'd3d944-xOSevn', plugins: ["youtube"], <b>overlaySet: oSettings </b>});

The configuration will override default overlays and change the content of the opt-out overlay accordingly.

(See working example.)

However, overlays stored as strings are inconvenient. So let’s move our content to a separate html file ‘optOut.html’ and move styles to ‘site.css’. ‘optOut.html’:

<!DOCTYPE html>
<html>
<head>
    <title>How to use default overlays</title>
    <link type="text/css" media="screen" rel="stylesheet" href="site.css">
</head>
<body style="padding:0; margin:0">
    <div id="optout-container">Custom opt out dialog</div>
</body>
</html>

‘site.css’:

.optout-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    text-align: center;
    color: white;
}

After that we’ll change our settings to:

var oSettings = {
    name: "Hello3FinalWithoutArrow",
    overlays: [{
                 type: 4,
                 url: "optOut.html"
               },
               {
                 type: 1,
                 url: "mainOverlay.html"
               }]
};

rubac('initialize', { accountId: 'd3d944-xOSevn', plugins: ["youtube"], overlaySet: oSettings });

(See working example.)

NOTE: to see opt-out dialog click on the opt-out link. Don’t forget to clear your cookies afterwards, or you will automatically opt-out and Realeyesit UBA will not work for you.