# 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](../design/lcevc-integration.md)
##### More on [MPEG-5 Part2 LCEVC][]
[lcevc_dec.js]: https://www.npmjs.com/package/lcevc_dec.js?activeTab=readme
[MPEG-5 Part2 LCEVC]: https://www.lcevc.org
#### Configure LCEVC
LCEVC Decoder library needs to be included in the HTML page:
- Local `npm install lcevc_dec.js`
```html
```
- Or use `unpkg.com` for latest LCEVC Decoder libraries.
```html
```
Configuration to enable LCEVC enhancement:
```js
player.configure('lcevc.enabled', true);
```
#### LCEVC setup via UI library
Sample setup using the Shaka Player UI library:
```html
```
```js
// 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:
```js
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.