mirror of https://github.com/shaka-project/shaka-player.git synced 2026-06-15 16:06:41 +03:00

Files

T

Vinod Balakrishnan 7b717e513d feat: Update for LCEVC Integration with new features added. (#6263 )

Features for LCEVC Decoder integration into Shaka player:

Initially in this PR we had changes to shaka player to accommodate
changes for iOS fullscreen functionality. But now we have a way to do
that inside the scope of lcevc decoder. So the only change in this PR is
the version bump of the lcevc decoder library.

2024-04-12 09:03:44 +02:00

3.5 KiB

Raw Blame History

LCEVC Quick Start

Requirements

Only supported on browsers with Media Source Extensions SourceBuffer support
MPEG-5 Part2 LCEVC decoding support (decoding provided by lcevc_dec.js, must be separately included)

Integration documentation : docs

Configure LCEVC

LCEVC Decoder library needs to be included in the HTML page:

Local npm install lcevc_dec.js

<script src="../node_modules/lcevc_dec.js/dist/lcevc_dec.min.js"></script>

Or use unpkg.com for latest LCEVC Decoder libraries.

<script src="https://unpkg.com/lcevc_dec.js@1.1.3/dist/lcevc_dec.min.js"></script>

Configuration to enable LCEVC enhancement:

player.configure('lcevc.enabled', true);

LCEVC setup via UI library

Sample setup using the Shaka Player UI library:

<!DOCTYPE html> 
<html> 
  <head> 
    <!-- Shaka Player UI compiled library and default CSS for player controls: --> 
    <script src="dist/shaka-player.ui.js"></script> 
    <link rel="stylesheet" href="dist/controls.css" /> 
 
    <!-- LCEVC decoder compiled library --> 
    <script src="https://unpkg.com/lcevc_dec.js@1.1.3/dist/lcevc_dec.min.js"></script>
 
    <!-- Application source: --> 
    <script src="app.js"></script> 
  </head> 
 
  <body> 
    <!-- The data-shaka-player-container tag will make the UI library place the controls in this div. --> 
    <div data-shaka-player-container style="max-width:40em"> 
      <!-- The data-shaka-player tag will make the UI library use this video element. --> 
      <video data-shaka-player id="video" style="width:100%;height:100%"></video> 
    </div> 
  </body> 
</html>

// app.js 
 
const manifestUri = 'https://dyctis843rxh5.cloudfront.net/vnIAZIaowG1K7qOt/master.m3u8'; 
 
// Initialise Shaka Player with LCEVC enhancement. 
async function init() { 
  // When using the UI, the player is made automatically by the UI object. 
  const video = document.getElementById('video'); 
  const ui = video['ui']; 
  const controls = ui.getControls(); 
  const player = controls.getPlayer(); 
 
  // Enable the LCEVC enhancement. 
  player.configure('lcevc.enabled', true); 
 
  // Listen for error events. 
  player.addEventListener('error', onError); 
  controls.addEventListener('error', onError); 
 
  // Try to load a manifest. 
  // This is an asynchronous process. 
  try { 
    await player.load(manifestUri); 
    // This runs if the asynchronous load is successful. 
    console.log('The video has now been loaded!'); 
  } catch (error) { 
    onError(error); 
  } 
} 
 
// Handle errors. 
function onError(error) { 
  console.error('Error', error); 
} 
 
// Listen to the custom shaka-ui-loaded event, to wait until the UI is loaded. 
document.addEventListener('shaka-ui-loaded', init); 
// Listen to the custom shaka-ui-load-failed event, in case Shaka Player fails 
// to load (e.g. due to lack of browser support). 
document.addEventListener('shaka-ui-load-failed', onError);

User provided canvas

User can also provide a canvas to the player though attachCanvas function:

player.attachCanvas(canvas);

Note: If external canvas is used, user is responsible for managing the canvas. If no canvas is provided for Shaka UI library, the player will generate and manage the canvas.

3.5 KiB Raw Blame History