Shaka Player

Shaka Player version 4.3 and after

LCEVC decoding is supported in Google’s web player project Shaka Player since version 4.3.

By visiting shaka-player-demo, you can easily try out LCEVC stream playback by enabling the following configurations:

How to enable LCEVC in Shaka Player has been documented in the official project github, here:

https://github.com/shaka-project/shaka-player/blob/main/docs/design/current/lcevc-integration.md

Shaka Player legacy versions (before 4.3)

You can also add LCEVC support to an older version of Shaka Player by adding a patch, which you can download from our portal: https://download.v-nova.com/.

The remainder of this page describes the steps required to integrate the LCEVC decoder modifications..

Reference integration package

The reference integration packages contains a zip file with the following :

1. js/libs : These are all the files related to the player Eg: hls.js , shaka_player.js.

2. js/VNova-LCEVC : All DIL.js Libraries need for LCEVC Enhancements. (dil.min.js, liblcevc_dpi.wasm) and patch file based on player to bridge the api calls to the player library.

3. js/app.js : This is the UI based operations with the demo UI that comes with the package.

4. index.html : Default demo page that showcases the decoding capabilities with LCEVC manifests in HLS and DASH based on the player, and provides a field to specify different stream manifest links for testing.

5. simple.html : The bare minimum integration that handles everything inside the patch.

6. integration.html : This explains a basic integration with a video, canvas and config passed to the dil libraries.

How to integrate LCEVC into an existing Shaka player

Step 1: To integrate LCEVC into an existing Shaka player, you need to include all the scripts under the "demo/js/VNova-LCEVC" folder.

Your HTML page should include the following scripts in the header:

<!-- a version mux js for TS compatibility (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mux.min.js"></script>
<!-- a version of shaka player -->
<script type="text/javascript" src="js/shaka/shaka-player.compiled.debug.js"></script>

<!-- vnova lcevc -->
<script type="text/javascript" src="js/VNova-LCEVC/lcevc_dil.min.js"></script>
<script type="text/javascript" src="js/VNova-LCEVC/lcevc_dil_patch_shaka.js"></script>

Notes:

• A version of "Shaka player" will need to be included.

• The file "lcevc_dil_patch_shaka.js" should be included last, as this needs the other scripts to be loaded first.

• All the VNova-LCEVC scripts must be present in the same folder, including "liblcevc_dpi.wasm".

Step 2: In the HTML, the code used to load the shaka player must be modified slightly from its normal usage, to integrate the LCEVC enhancement decoding capabilities, as follows:

Code Changes

To check if shaka is supported or not and install polyfills:

shaka.polyfill.installAll();

if (!shaka.Player.isBrowserSupported()) {
  if (player) {
        if (player.lcevcDil) {
          player.lcevcDil.close();
        }
        player.destroy();
        player = null;
      }
} else {
	console.log('Playback is not supported');
}

To create a new instantiation of shaka player:

var video = document.createElement('video');
// create a new shaka player instance
player = new shaka.Player(video);
// force safari on mac and ipad to use Media Source Extensions (MSE). (Optional)
player.configure('streaming.useNativeHlsOnSafari', false);

To initialise LCEVC within the hls player:

var canvas = document.createElement('canvas');
var lcevcDilConfig = {
    // optional settings here
};

player.attachLcevc(video, canvas, lcevcDilConfig);

The parameters are defined as follows:

canvas

This is an HTMLCanvasElement object and is used to display the rendered frames / output of the video after V-Nova LCEVC has been applied.

Its visibility, and pixel size are both controlled automatically by the player. Please note that the dimensions (in pixels) are set based on the size of the initial video and of the LCEVC-enhanced content being rendered. It is not guaranteed to always be a fixed size and may change dynamically.

The canvas element should mimic the screen size and page position of the video element, via the user’s CSS pixel size, however, this should not be forced, as it is controlled by the player.

The canvas element will be a WebGL canvas, and therefore it is not possible to use any of the HTML5 2D drawing context methods.

lcevcDilConfig

This is an object block containing settings with which V-Nova LCEVC is initialised. It is automatically configured with optimal settings.