Skip to content

HowTo

Jump to bottom
Karl Rousseau edited this page Sep 8, 2019 · 12 revisions

Installation (development mode)

Under CHROME or OPERA or BRAVE or VIVALDI browser, you can enter this URL:

chrome://extensions    opera://extensions    brave://extensions    vivaldi://extensions

where you have a "developer mode" button which can provide a way to load an extension.

  1. You have to download the source ZIP archive from GITHUB and extract it on your PC.
  2. Then you have to rename the manifest_chrome.json to manifest.json
  3. To upload this extension, you have a button option called "Load unpacked".
  4. You need to select the main extension directory with the file dialog box.

Example handling HbbTV 2.0

Here this skeleton example can be used to grab the colored remote control keys if for example, this code will be used as an invitation popup on a dedicated TV service.

<!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>My 1st HbbTV popup</title>
<meta http-equiv="Content-Type" content="application/vnd.hbbtv.xhtml+xml; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<style>* { margin:0; padding:0; background-repeat:no-repeat; font-family:Tiresias,sans-serif; }
#broadcast { position:absolute; top:0; left:0; width:1280px; height:720px; }
#title { position:absolute; top:134px; left:820px; width:200px; height:99px; font-size:32px; color:blue; background-color:white; }</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
  var app = document.getElementById('oipfAppMan');
  if (app && app.getOwnerApplication) app = app.getOwnerApplication(document);
  if (app && app.show) app.show(); // needed to show the HbbTV app on screen
  if (app && app.activate) app.activate();
  if (app && app.privateData) app.privateData.keyset.setValue(0x11f);

  window.addEventListener('keydown', function() { // needed for HbbTV 2.0+
    if (!this._done && /HbbTV\/1\.([3-9])\.1/.test(navigator.userAgent)) {
      this._done=true;
      app.privateData.keyset.setValue(0x11f);
      console.log('HbbTV2 special colored keys activated');
    }
  }.bind(this), false);

  // Here is you app code ...
  document.getElementById('title').textContent = 'Press OK to launch the game ...';
};
//]]>
</script>
</head><body>
<object id="broadcast" type="video/broadcast"></object>
<object id="oipfAppMan" type="application/oipfApplicationManager" style="width:0; height:0;"></object>
<object id="oipfConfig" type="application/oipfConfiguration" style="width:0; height:0;"></object>

<div id="title"></div>
</body></html>

Here the addEventListener is checking if the device is compliant HbbTV 2.0+ and if so, it will unlock the colored keys management when receiving the first remote control user event. This is now part of HbbTV 2.0 specifications and it has been tested on some devices like an HiSense Smart TV or a Strong STB, both embedding Seraphic's browser.

Detection and usage

In order to automatically activate the extension on a given web page, you need to follow standard implementation as seen for example on SAMSUNG iDTV devices that are looking for this HTTP header field:

Content-Type: application/vnd.hbbtv.xhtml+xml

This HTTP header response is coming from the server side where the page is hosted as you can see with such UNIX command:

curl -I http://www.arte.tv/redbutton/index.html

HTTP/1.1 200 OK
Server: nginx
+Content-Type: application/vnd.hbbtv.xhtml+xml
...

You can also add a defined META tag inside your page:

Technology META tag
HbbTV <meta http-equiv="content-type" content="application/vnd.hbbtv.xhtml+xml; charset=UTF-8" />
CE-HTML <meta http-equiv="content-type" content="application/ce-html+xml; charset=UTF-8" />

and sometime with the addition of a given DOCTYPE:

Technology DOCTYPE tag
HbbTV <!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd" >
BML <!DOCTYPE BML PUBLIC "+//ARIB STD-B24:1999//DTD BML Document//JA" "http://www.arib.or.jp/B24/DTD/BML_1_0.dtd" >

In other cases, you can also manually click on the extension icon inside the browser's bar to show a popup then by clicking on a power icon button, you can force the page to be interpreted as an Hybrid iTV page. (this action is saved in local storage for further visits)

Status

  • removing CHROME warning popups for various undefined mime-types
  • currently only as a prototype stage but the proof of concept has been validated and many features have been put in the options page.
  • 💀 SUN MHP technology has been put aside as it will need to have a JVM installed with its associated plugin (a mess to install and moreover this technology is now replaced by the brand new one called HbbTV) I know [GINGA](https://en.wikipedia.org/wiki/Ginga_(middleware) is MHP based and still present in South America but for how long ...
  • A dedicated tab is added in the Web Inspector for user debugging purpose
  • 📼 MP4 Transport Stream video (without DRM) is supported using an external library:
    • Integration of Dash.JS library handling Mpeg-DASH.
    • Chrome V55+ can handle HEVC with HTML5 video tag but it need to be recompiled with a proper FFmpeg
    • will have to investigate 🔍 upipe Chrome NaCl rendering plugin or VLC v3 Asm.js release
  • 📡 DVB-SI/PSI tables (such as EIT & AIT) extraction inside MPEG-TS files, will be handle by an external application (using NodeJS or WebAssembly)
  • ✂️ OIPF technology will not be fully implemented (only the HbbTV subset will be done)
  • HbbTV V2.0 might be present (with an exposed WebSocket server) when V1.5 implementation will be done
    • for the meantime, look at node-hbbtv from the well-known Fraunhofer
  • CI+ HbbTV implementation is hereby emulated with a default code (can be customized)

Browsers codecs

Browser: Mozilla Firefox Google Chrome Apple Safari Android Chrome
Codec H.264: ✅ embedded plugin by Cisco ✅ present ✅ present ✅ present
Codec H.265: ❌ no free license ✅ here (win10) ✅ in MacOS 10.13+ ☑️ device-dependent

Tracks (to investigate)

Browser: Mozilla Firefox Google Chrome Apple Safari
App support: ☑️ WebAssembly
+ UDP sockets?		 ❌ App (only ChromeOS)
+ modulator with WebUSB?		 ☑️ native App extension
(limited features)

ps: it might also be possible to convert on PC the ENIGMA2 light browser or the future embedded one called Coyote.

Opencaster stream information signalling

  • Inside the PMT (Program Map Table) described in ISO/IEC 13818-1, you have some descriptors to fill with proper stream type values:
OpenCaster field name (in PMT) Value Description
stream_type 0x04 audio type for MPEG-2
stream_type 0x11 audio type for MPEG-4 (HE-)AAC
stream_type 0x0f audio type for DTS®
stream_type 0x86 audio type for DOLBY AC-3
stream_type 0x87 audio type for DOLBY E-AC-3
stream_type 0x06 audio type for DOLBY AC-4 (PES private data)
stream_type 0x02 video type for MPEG-2
stream_type 0x1b video type for MPEG-4 AVC / H.264
stream_type 0x24 video type for H.265 / HEVC

HybridTvViewer code architecture

🚧 TODO (diagram)

Clone this wiki locally