Implementation Streaming for Cordova

Owned by Christopher Kirch (KASRL) (Unlicensed)
Last updated: Nov 14, 2019 by Ralf Cornehl (KASRL) (Unlicensed)
4 min read

Streaming Measurement in Cordova

This chapter describes the basic use of the JavaScript sensor for the measurement of streaming content with the Cordova framework.

The following platforms are supported with this method:

  • Android
  • iOS

Other target platforms may work, but are not tested and therefore considered as not supported.

Notice

This approach cannot be tested in "browser" mode.

If this sensor detects "browser" as the target platform it defaults to the HTML5 sensor implementation of the pure JavaScript sensor.

Integration

Add plugins to config.xml

The integration requires a few dependencies to be installed within the config.xml of the Cordova-based project.

    <plugin name="cordova-plugin-device" spec="~2.0.3" />
    <plugin name="cordova-plugin-idfa" spec="~1.1.0">
        <variable name="PLAY_SERVICES_ADS_VERSION" value="15.0.+" />
    </plugin>
    <plugin name="cordova-plugin-app-version" spec="^0.1.9" />
    <plugin name="cordova-plugin-file" spec="~6.0.2" />
    <plugin name="cordova-plugin-advanced-http" spec="~2.2.0" />

They need to go below the closing of the last </platform>.

Example:

<platform name="android">
        <allow-intent href="market:*" />
</platform>
<platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
</platform>

<plugin name="cordova-plugin-device" spec="~2.0.3" />
<plugin name="cordova-plugin-idfa" spec="~1.1.0">
  <variable name="PLAY_SERVICES_ADS_VERSION" value="15.0.+" />
</plugin>
<plugin name="cordova-plugin-app-version" spec="^0.1.9" />
<plugin name="cordova-plugin-file" spec="~6.0.2" />
<plugin name="cordova-plugin-advanced-http" spec="~2.2.0" />
Install plugins and its dependencies

To install these plug-ins, use Cordova's prepare.

cordova prepare

Output (Sample):

Plugin 'cordova-plugin-device' found in config.xml... Migrating it to package.json
Plugin 'cordova-plugin-idfa' found in config.xml... Migrating it to package.json
Plugin 'cordova-plugin-app-version' found in config.xml... Migrating it to package.json
Plugin 'cordova-plugin-file' found in config.xml... Migrating it to package.json
Plugin 'cordova-plugin-advanced-http' found in config.xml... Migrating it to package.json
Discovered saved plugin "cordova-plugin-device". Adding it to the project
Installing "cordova-plugin-device" for android
Installing "cordova-plugin-device" for ios
Discovered saved plugin "cordova-plugin-idfa". Adding it to the project
Installing "cordova-plugin-idfa" for android
Installing "cordova-support-android-plugin" for android
Subproject Path: CordovaLib
Subproject Path: app
Installing "cordova-plugin-idfa" for ios
Discovered saved plugin "cordova-plugin-app-version". Adding it to the project
Installing "cordova-plugin-app-version" for android
Installing "cordova-plugin-app-version" for ios
Discovered saved plugin "cordova-plugin-file". Adding it to the project
Installing "cordova-plugin-file" for android

The Android Persistent storage location now defaults to "Internal". Please check this plugin's README to see if your application needs any changes in its config.xml.

If this is a new application no changes are required.

If this is an update to an existing application that did not specify an "AndroidPersistentFileLocation" you may need to add:

      "<preference name="AndroidPersistentFileLocation" value="Compatibility" />"

to config.xml in order for the application to find previously stored files.
        
Installing "cordova-plugin-file" for ios
Discovered saved plugin "cordova-plugin-advanced-http". Adding it to the project
Installing "cordova-plugin-advanced-http" for android
Plugin dependency "cordova-plugin-file@6.0.2" already fetched, using that version.
Dependent plugin "cordova-plugin-file" already installed on android.
Subproject Path: CordovaLib
Subproject Path: app
Installing "cordova-plugin-advanced-http" for ios
Plugin dependency "cordova-plugin-file@6.0.2" already fetched, using that version.
Dependent plugin "cordova-plugin-file" already installed on ios.
Alternative: Install plugins via "cordova plugin"

Alternatively the plug-ins can be installed manually:

cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-idfa
cordova plugin add cordova-plugin-app-version
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-advanced-http

Content-Security-Policy:

It is vital to permit external connections to the provided tracking site i.e.:

connect-src test.2cnt.net;

(warning) test = The site code in this case is “test”. You have to replace the site code “test” by the site code (unique name provided by Kantar) for the measured site.

This includes loading images from that site, i.e.:

img-src test.2cnt.net;

Inline same-origin scripts also need to be allowed:

script-src 'self' 'unsafe-inline';

Implementation

The sensor's script (SpringStreams.js) needs to be added to the project at:

www/js/springstreams.js

The rest of the integration works as stated in Basic Use of the API, with some key differences.

The location to load the sensor script from will not include the www as stated in the path above.

<script src="js/springstreams.js"></script>

To work with Cordova, the track method requires the HTML5CordovaAdapter as adapter argument:

//Sensor tracking
sensors.track(document.getElementById('video'), description, sensors.HTML5CordovaAdapter);

Example Integration

The following integration shows a complete integration on a simple HTML page.

<html>
    <head>       
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; connect-src *.2cnt.net; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <!-- Sensor javascript file -->
        <script src="js/springstreams.js"></script>
        <!-- Sensor initialization -->
        <script type="text/javascript">
            var sensors = new SpringStreams("test");
        </script>
        <title>Hello World</title>
    </head>
    <body>
        <div>
            <h1>Apache Cordova</h1>
            <!-- http://camendesign.com/code/video_for_everybody/test.html -->
            <video width="100%" id="video" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls />
            <script type="text/javascript">
                document.addEventListener("deviceready", function () {
                    //Sensor description
                    var description = {
                        "stream": "MyVideoName"
                    };
                    //Sensor tracking
                    sensors.track(document.getElementById('video'), description, sensors.HTML5CordovaAdapter);
                }, false);
            </script>           
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>