HbbTV : Introduction to HbbTV

Publié le

France Televisions has been involved in HbbTV since 2010, and our frontend developers learned its limitations "the hard way" over the past 5 years. Today we are proud to share with you an "hitchhikers guide to hbbtv".

What is HbbTV?

The first HbbTV compatible TV sets appeared in 2011, the first demo was performed ​​with LG in 2010, despite this relatively recent age most HbbTV devices have characteristics that do not belong to the current times. You can read all about the standard on the HbbTV website: hbbtv.org.

However besides the official standard, actual implementations vary, TV hardware capabilities are limited, with slow CPU, limited RAM, very slow network components:

  • On the CPU side we can compare the performance to a 1Ghz Pentium III (if we are feeling generous).
  • On the RAM side it is difficult to evaluate the performance but it fluctuates between 512MB and 2GB for more recent models
  • On the network interface side, besided very slow network components the embedded browser tends to limit performances but also security:
    • Maximum of 5 simultaneous connections compared to over 30 on a traditional PC
    • Most javacript files are downloaded sequentially and not in parallel
    • No browser cache, as there is no storage space on most TV sets
    • Only recent models support cross domain policies for XHR

A web developer wishing to start developing an HbbTV app should first learn the rules of the road.

Basic tools to develop on HbbTV

1FireHbbTV

Installing FireHbbTV is a must to develop HbbTV apps. For this you need to install the latest version of firefox and access the firehbbtv addon repository.
Install the latest version. To enable HbbTV on a website, click on the icon FireHbbTV located inside the Firefox menu .

2User Agent

To change the firefox user agent using FireHbbTV it is necessary to download the following modules in Firefox:

3Firebug

No need to introduce this tool to web developers.

4StreamGuru

Not directly related to the development of an HbbTV app but to the DVB-T stream compression (TNT in France). It must be installed on a PC (version 2.41) with a proper license (299€ for a one user license).

To use you need either to play a TS feed or directly receive a live broadcast feed through a DVB-T receiver (as described below). First select DVB-T, then select the last option below (BDA). In the MPEG Analyzer interface, you need to select the DVB-T frequency to be analyzed, in France:

  • R1 (France 2 SD, France3, France 5, France O) : 586Mhz
  • R2 (France 4) : 506Mhz
  • R5 (France 2 HD) : 530Mhz
screenshot of the screen guru interface

screenshot of the screen guru interface

5Digital bitrate

You can get the digitial bitrate information on the Digital bitrate website.

6Debugging on TVs

Debugging on a TV is possible but it does not work everywhere. For recent TVs you can use jsconsole. Using it is simple and allows step by step Javascript debugging. The main drawback is that you cannot display the DOM and especially it does not work on 2011 TV models, while these models represent the main problems.

How to improve performance

1To address issues related to slow CPUs

Overall as the computing power of a TV is limited, it is better to process a maximum of data through a backend and thus limit the intelligence of the frontend. The full frontend JS approach is not the right solution even if it may have advantages in terms of technical architecture.

  • Avoid gzipped elements because decompression is resource consuming
  • Avoid JS frameworks like jQuery (300ms of processing on a 2013 TV, 30ms on a regular PC)

2To address issues related to network interfaces

It is important on a device like aTV to "take care" of network communication, and all good "webperf" practices must be applied. But above all browser security is very strong, it is thus impossible to perform requests on a different domain than the current page (cross domain policy). We also note that recent technologies such as WebSockets are not broadly supported and that the downgrade to long polling does not work on many TVs that close network connections automatically.

  • Minify and concatenate JS and CSS files
  • Use CSS sprited
  • Reduce external webservices requests
  • Do not use cross domain requests
  • Do not rely on recent technologies (websockets)

In the next post we will talk about bugs and limitations we have encountered over time.

---------------------------------------------------

Depuis que France Télévisions s'est engagé dans la voie du HbbTV depuis 2010, nos développeurs "front" ont rencontré et surmonté un certain nombre de problématiques. Aujourd'hui nous sommes heureux de vous présenter ce blog qui a pour but de partager avec vos nos connaissances sur le sujet.

Qu'est-ce que HbbTV?

Les téléviseurs HbbTV sont apparus en 2011, la première démo a été faite avec LG en 2010, malgré cet âge récent ces terminaux présentent des caractéristiques qui ne vont pas avec leur époque.
Les capacités matériels sont limitées, faible CPU, peu de RAM, mais surtout composant réseau beaucoup plus lent.

  • Concernant le CPU on évalue celui-ci à un équivalent de Pentium 3 à 1Ghz (en étant généreux).
  • Concernant la RAM il est difficile de l’évaluer mais on oscille entre 512Mo et 2Go pour des modèles haut de gamme très récent.
  • Concernant le réseau outre des composants physiques « lents » la gestion de ceux-ci par le navigateur a également tendance à limiter les performances mais aussi la sécurité :
    • 5 connexions simultanées contre plus de 30 sur un PC traditionnel
    • Téléchargement des JS les uns après les autres et non en parallèle
    • Pas de cache navigateur, car pas d’espace de stockage sur la plupart des modèles
    • Pas d’appel cross domain possible

 

Outils de base

 

1FireHbbTV

L’installation de FireHbbTV est obligatoire pour travailler en HbbTV. Pour cela installer la dernière version de firefox et se rendre à cette adresse : *https://addons.mozilla.org/fr/firefox/addon/firehbbtv/versions/
Installer la dernière version. Pour l’activer sur un site HbbTV, cliquer dans la barre de menu de firefox sur l’icône de FireHbbTV .

 

2User Agent

Pour changer le user agent de firefox en utilisant FireHbbTV il est nécessaire d’utiliser les modules suivants sous Firefox :

3Firebug

4StreamGuru

Pas directement lié au développement HbbTV mais plus à la compression des flux DVB (la TNT). Il faut l’installer sur son PC (version 2.41) avec la clé : License_streaguru_mpeg_analyzer.dat
Pour l’utiliser soit lire un flux ts soit avec une clé TNT comme suit, au lancement choisir (DVB-T), puis sur l’écran suivant la dernière option en bas (BDA). Dans l’interface de mpeg analyzer, il faut alors sélectionner la fréquence TNT à analyser :

  • R1 (France 2 SD, France3, France 5, France O) : 586Mhz
  • R2 (France 4) : 506Mhz
  • R5 (France 2 HD) : 530Mhz

5Digital bitrate

http://digitalbitrate.com/dtv.php?mux=R5&pid=1282&live=1&lang=fr

6Debugger sur les téléviseurs

Débugger sur un téléviseur c’est possible, mais ça ne fonctionne pas chez tout le monde. Pour les télés récentes vous pouvez utiliser jsconsole (http://jsconsole.com/). L’utilisation est simple est permet de débugger pas à pas du JS. Point faible vous n’avez pas de visualisation du DOM et surtout ça ne fonctionne pas sur les téléviseurs 2011, bien que ce soient eux le problème.

Comment améliorer les performances

1Pour remédier aux problèmes de CPU

Globalement la puissance de calcul d’un téléviseur étant limitée il est préférable de faire traiter un maximum de données par un backend et de limiter ainsi l’intelligence en front. L’approche full JS en front n’est donc pas la bonne solution même si elle peut présenter des avantages en termes d’architecture technique.

  • Eviter les éléments gzipées car la décompression est consommatrice de ressource
  • Eviter les framework JS type jQuery (300ms de traitement sur TV 2013, 30ms sur un PC)

2Pour remédier aux problèmes réseaux

Il est important sur un périphérique comme les téléviseurs de « prendre soin » des échanges réseaux, à ce titre toutes les bonnes pratiques de « webperformance » doivent être appliquées. Mais surtout la sécurité des navigateurs est très forte, il est ainsi impossible de faire des appels sur un domaine différent que celui de la page courante (cross domain policy). On note également que les technologies récentes comme les websockets ne sont globalement pas supportées et que la dégradation en long polling ne fonctionne pas sur bon nombre de téléviseurs qui ferment la connexion d’eux-mêmes.

  • Minifier et concaténer les JS et CSS
  • Utilisation des sprites CSS
  • Limiter les appels au webservices externes
  • Ne pas utiliser de requêtes cross domain
  • Ne pas compter sur des technologies récentes (websocket)
Posted by Fernando / Categories : hbbtv