Configuration

Platform#

The HbbTV platform (successor of SUN MHP) is designed to be compliant with the HTML5 standard but historically, it has inherited from OIPF environment which is therefore handling various <object/> tags associated to native features and specific codes.

Hopefully Wiztivi is providing a dedicated vendor that is managing those standards.

Software Versioning#

The ETSI (European Telecommunications Standards Institute) is validating their own specifications (based on the HbbTV ones and approving them) using another versioning notation (used to identify the HbbTV version on a device by looking at its HTTP user-agent header which includes this ETSI versioning field)

Prerequisite#

First you need to check that your application package.json does integrate the wanted vendor:

    ...
    "devDependencies": {
        "@dana/vendor-hbbtv": "7.2311.x",

Then you might have to modify the grunt serve task (within the file named Gruntfile.js) which is launching a dedicated web local server (named connect) in order to test your HbbTV application on your PC (or remotely on your HbbTV device):

    grunt.config.merge({
        ...
        connect: {
            dev: {
                options: {
                    middleware: function (connect, options, middlewares) {
                        middlewares.unshift(function (req, res, next) {
                            if (req.url.match(/hbbtv.*.html/) || req.url === "/index.xhtml") {
                                res._headers = {"Content-Type": "application/vnd.hbbtv.xhtml+xml"};
                                console.log(new Date() + " " + req.headers["user-agent"] + ' / ' + req.url);
                            } else if (req.url.match(/.aitx/)) {
                                res._headers = {"Content-Type": "application/vnd.dvb.ait+xml"};
                            }
                            return next();
                        });
                        return middlewares;
                    }
                }
            }
        },

Application Profile#

As seen above, you just need to add a profile based on this hbbtv vendor which is also depending on its own hbbtv engine.

Example:

"base-hbbtv": {
    "isHbbtv": true,
    "es5": true,
    "base": {
        "name": "hbbtv",
        "vendors": [
            "@dana/engine-hbbtv",
            "@dana/renderer-css"
        ]
    }
}

It is recommanded that you use CSS as rendering engine as most devices are providing such graphical layer.

In fact, some platforms like LG/Samsung Smart TVs have a more up-to-date embedded browser which includes the <CANVAS/> tag or even WebGL 3D accelerated environment (but those are not part of HbbTV specifications). In such cases, it enables the usage of Lightning vendor but this implies that your application will only work properly on those specific devices.

HbbTV with ES5 core#

Most HbbTV devices are running inside an embedded browser which provides the HbbTV environment as a foundation and defined by the consortium specifications. Therefore, it has to be compliant (at least) with EcmaScript 5 standard programming language:

“es5”: true

EcmaScript polyfills#

As your application code (or external libraries) might use ES6+ functions, the following polyfills are strongly recommended (by adding this into your above base-hbbtv profile):

    "polyfills": [
        "es.promise",
        "es.string.ends-with",
        "es.string.includes",
        "es.string.pad-start",
        "es.string.pad-end",
        "es.string.starts-with",
        "es.string.trim",
        "es.array.fill",
        "es.array.find",
        "es.array.find-index",
        "es.array.from",
        "es.array.includes",
        "es.array.iterator",
        "es.number.is-finite",
        "es.number.is-integer",
        "es.number.is-nan",
        "es.function.bind",
        "es.math.sign",
        "es.math.trunc",
        "es.map",
        "es.set",
        "es.symbol"
    ]

Please note that using those polyfills, your application code will grow in size. This might cause an issue in broadcast mode where size does matter (i.e. fairly expensive).

Template configuration#

Grunt setup#

To include specific polyfills for HbbTV in the project, you must copy the polyfill files into the destination output directory. You need to modify your Gruntfile.js by adding those lines:

grunt.config.merge(
    {
        copy: {
            polyfill: {
                files: [
                    {
                        expand: true,
                        flatten: true,
                        cwd: './',
                        src: ['wtv_modules/wtv-vendor-hbbtv/scripts/vendors/hbbtv/utils/myPolyFill.js'],
                        dest: '<%= global.options.generatedDir %>/<%= global.options.srcDir %>/'
                    }
                ]
            }
        }
    }
);

And finally under _dev and _package tasks, just add those lines:

if (profile.isHbbtv) {
    tasks.splice(tasks.indexOf("bundle") + 1, 0, 'copy:polyfill');
}

Setup template#

To include specific polyfills or libraries for HbbTV, you have to include the wanted file declaration inside your project under templates/index.html.tpl:

<% if (profile.isHbbtv) { %>
    <script type="text/javascript" src="<%= globalOptions.srcDir %>/dash.js"></script>
<% } %>

⚠ WARNING: This line should be put as the first top script to be loaded in this HTML document.

You can also add specific OIPF or HbbTV object tags in your HTML body:

<body>
<object id="oipfAppMan" type="application/oipfApplicationManager" style="width:0; height:0;"></object>
<object id="oipfConfig" type="application/oipfConfiguration" style="width:0; height:0;"></object>
<object id="hbbtvCSManager" type="application/hbbtvCSManager" style="width:0; height:0;"></object>
<object id="hbbtvMediaSynchroniser" type="application/hbbtvMediaSynchroniser" style="width:0; height:0;"></object>
...

The two top ones will be detected by our HbbTV vendor and used internally. Here the style notation is important in order to force native C/C++ object containers not being shown (as many HbbTV devices will show them by default with a predefined size which will bring DOM layout changes and also trigger reflows at startup. Note that the other notation known as “display:none” is not working at all on all devices)

Debugging environment#

You might need to add weinre one-liner script tag in such previous template:

<script src="http://vpn.wiztivi.com:{PORT}/target/target-script-min.js#{ALIAS}"></script>

ℹ️ NOTE: Don’t forget to replace those fields PORT and ALIAS with proper values.

Check weinre’s documentation for more info on how to use this remote debugger.

Broadcast environment#

If you want to test your HbbTV broadcast/broadband application on your HbbTV device connected to a DTT/Sat/Cable coax cable, you will need a local broadcasting server using a DVB modulator outputting RF signal on this cable at a defined frequency (see below examples)

We strongly recommend the Dektec manufacturer which is a US company offering a catalog of various modulators on PCIe and also USB3. The wonderful modulator named DTU-315 is easy to plug and can be controlled using the broadcasting command DtPlay on Linux and StreamXpress under Windows™.

• Playout example for DVB-S: (on PCI card DTA-107 at 1930Mhz using 33Mbps i.e. without stuffing)

DtPlay Astra_19.2E_10744H_22000_AIT.ts -r 33790000 -t 107 -mt DVBS -mf 1930.0 -mc 5/6 -l 0

• Another example for DVB-T: (on DTU-215 USB2 modulator at 586Mhz)

DtPlay test_MR5.ts -t 215 -mt DVBT -mf 586 -mc 2/3 -mG 1/32 -l 0 -n 1

And those commands are using captured signal stored in TS format (i.e. Transport Stream container) which includes ISO/IEC 13818-1 PSI tables such as AIT ones to include HbbTV application definitions (i.e. broadcast or/and broadband apps).

ℹ️ NOTE: By typing such DtPlay command-lines, you can keep them running in the background using the wonderful GNU screen terminal multiplexer.