Shaka Player with LCEVC

LCEVC decoding support is included within the Shaka Player project from version 4.3 onwards. Therefore, if you are building Shaka Player, LCEVC support can be easily enabled. Please visit the main project for more details.

However, if you want to manually patch an older version of Shaka Player to add LCEVC decoding support, the remainder of this page outlines the steps needed 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/mux.js@5.9.1/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.