Fraunhofer FOKUS FAMIUM GreenView Library

fhg fokus

FAMIUM GreenView is a JavaScript library using a HTTP REST API that enables energy savings for web-based video playback. This is achieved by reducing the luminance (brightness) in not perceivable ways. Additionally users can opt into an Eco mode for yet more energy savings.

When enabled the library will put a layer over the application or player to lower the luminance. This layer will use an opacity percentage to control brightness.

The GreenView JavaScript currently supports the following plattforms and players:

  • HbbTV
  • dash.js
  • Bitmovin Player

To use reference the library in your HTML:

<script type="text/javascript" src="/v1/greenview.js"></script>

Then in your application code, to enable the fullscreen layer use:

var greenView = new GreenView(player, meta); // player and meta are optional

This will initialize the library and setup up GreenView. The player argument should be used to provide a reference to the used video player. This could be either a reference to the <video> object or the JavaScript object for e.g. dash.js or Bitmoving. This will be used to monitor when events related to playback events like start, pause, stop current playback position occure. Once enabled, GreenView will adapt and handle accordingly with regard to these events.

The meta argument can be used to provide detailed information about the current device and its technical properties.

For example for use with HbbTV it could look like:

{
  "device": {
    "userAgent": "HbbTV/1.5.1 (+DRM;Panasonic;SmartTV2020mid;3.362;4701-0003 0002-0000;com.panasonic.SmartTV2020mid;)",
    "manufacturer": "Panasonic",
    "model": "TX-40HXX889",
    "type": "tv", // stb, mobile, desktop
    "screen": {
      "size": "55", // inch
      "resolution": "3840x2160",
      "type": "oled" // amoled, lcd, lcdled, qled
    }
  }
}

For settop-box like device it could look like:

{
  "device": {
    "userAgent": "Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; AFTB Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
    "manufacturer": "Amazon",
    "model": "FireTV",
    "type": "stb" // stb, mobile, desktop
  }
}

Any of these properties are optional. GreenView will use as many of these properties as possible to provide the best matching results in brightness adjustments.

GreenView mode

To enable GreenView mode and start adjusting the brightness, use:

greenView.useGreenView(true);

To disable GreenView mode and remove any brightness adjustments, use:

greenView.useGreenView(false);

GreenView Eco mode

This mode is meant as an opt-in for the user to enable even more enery savings if desired. GreenView Eco mode will noticably adjust the brightness lower to achieve an increased amount of energy saving.

A client should not enable this mode by itself without confirming with the user in order to not cause any unexpected quality of experience issues.

To enable GreenView Eco mode and start adjusting the brightness, use:

greenView.useGreenViewEco(true);

To disable GreenView Eco mode and remove any brightness adjustments, use:

greenView.useGreenViewEco(false);

Content description

GreenView will adapt brightness based on the given content description.

Content description and its properties are optional. It is recommended to provide GreenView with a description of the video content that will be used for playback.

Before starting playback describe your content using:

greenView.describeContent(content);

Example object to describe video content, i.e. a movie:

{
  "title": "Matrix",
  "type": "movie",
  "duration": 8169, // in seconds
  "characteristics": "action, dark",
  "playback": "vod"
}

Example object to describe video content, i.e. a sports live stream:

{
  "title": "Soccer EM 2024 final",
  "type": "sports",
  "characteristics": "fast, bright",
  "url": "...",
  "playback": "live"
}

Backend

The library comes with a backend server that hosts the JavaScript file that applications should reference.

The library will use the HTTP REST API to communicate device specific attributes (platform type, platform version, screen size and resolution, User Agent string, etc) to the backend. The backend will then respond back the optimal settings for the client.

The server will use a default opacity level which can be configured on the backend.

Refer to the full API documentation for more details.