# Shaka Player

## Shaka Player version 4.3 and after

LCEVC decoding is supported in Google’s web player project [Shaka Player](https://github.com/shaka-project/shaka-player/) since version 4.3.

By visiting [shaka-player-demo](https://shaka-player-demo.appspot.com/demo/#audiolang=en-GB;textlang=en-GB;lcevc.enabled=true;drawLogo=true;uilang=en-GB;panel=ALL_CONTENT;panelData=LCEVC;build=uncompiled), you can easily try out LCEVC stream playback by enabling the following configurations:

<figure><img src="/files/2grqZjNb7hRakSRTWS3t" alt=""><figcaption></figcaption></figure>

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

<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/>.&#x20;

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 :&#x20;

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:

```markup
<!-- 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:

```javascript
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:

```javascript
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:

```javascript
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.v-nova.com/technologies/mpeg-5.lcevc/integrations/integrations/shaka-player.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.