forked from Dash-Industry-Forum/dash.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MPEG-5 Part 2 LCEVC SEI Integration (Dash-Industry-Forum#4491)
This feature adds MPEG-5 LCEVC Integration into Dash.js with SEI carriage mechanism to deliver LCEVC Enhancement and then its enhanced and rendered on HTML5Canvas Element.
- Loading branch information
1 parent
d6708a1
commit d6a428a
Showing
3 changed files
with
193 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>MPEG-5 Part 2 LCEVC example</title> | ||
|
|
||
| <script class="code" src="../../dist/dash.all.debug.js"></script> | ||
|
|
||
| <!-- MPEG-5 LCEVC Decoder Library --> | ||
| <script src="https://unpkg.com/lcevc_dec.js@latest/dist/lcevc_dec.min.js"></script> | ||
|
|
||
| <!-- Control bar --> | ||
| <script class="code" src="../../contrib/akamai/controlbar/ControlBar.js"></script> | ||
|
|
||
| <!-- Bootstrap core CSS --> | ||
| <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet"> | ||
| <link href="../lib/main.css" rel="stylesheet"> | ||
| <link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css"> | ||
|
|
||
|
|
||
| <style> | ||
| video { | ||
| display: none !important; /* Enhanced frames are rendered on a HTML5CanvasElement.*/ | ||
| } | ||
|
|
||
| .dash-video-player { | ||
| position: relative; /* This position relative is needed to position the menus */ | ||
| margin: 0 auto; | ||
| line-height: 1.0; | ||
| } | ||
| </style> | ||
|
|
||
| <script class="code"> | ||
| /** | ||
| * MPEG-5 LCEVC Integration for Dash.js Player. | ||
| * | ||
| * These are the changes needed for passing the correct data to lcevc_dec.js. | ||
| */ | ||
| dashjs.Extensions = { | ||
| ...dashjs.Extensions, | ||
| /** | ||
| * Attaches LCEVC functionality and methods to the provided Dash.js player instance. | ||
| * | ||
| * @param {object} player the Dash.js player instance to attach LCEVC | ||
| */ | ||
| useLcevc: function useLcevc(player) { | ||
| if (!player) { | ||
| throw new TypeError('The provided Dash.js player instance was null or undefined.'); | ||
| } | ||
| const { LCEVCdec } = window; | ||
| if (!LCEVCdec) { | ||
| throw new TypeError('LCEVC Decoder Libraries could not be loaded.'); | ||
| } | ||
|
|
||
| player.attachLcevc = function attachLcevc(media, canvas, LCEVCdecConfig) { | ||
| player.LCEVCdec = new LCEVCdec.LCEVCdec( | ||
| media, | ||
| canvas, | ||
| LCEVCdecConfig | ||
| ); | ||
| }; | ||
| /* Let the LCEVC Decoder Library make the decision as to when to switch, based on the currently rendered frame. | ||
| If disabled, the player needs to signal LCEVC when there is a render change after an ABR switch happens. | ||
| */ | ||
| const ENABLE_AUTO_RENDER_MODE = 1; | ||
|
|
||
| /* Intercept source buffers and pass video data to LCEVC */ | ||
| player.on(dashjs.MediaPlayer.events.FRAGMENT_LOADING_COMPLETED, (event) => { | ||
| if (player.LCEVCdec && event.mediaType === 'video') { | ||
| player.LCEVCdec.appendBuffer(event.response, 'video', event.request.representation.index); | ||
| player.LCEVCdec.setLevelSwitching(event.request.representation.index, ENABLE_AUTO_RENDER_MODE); | ||
| } | ||
| }); | ||
|
|
||
| } | ||
| }; | ||
| function init() { | ||
| var video, | ||
| canvas, | ||
| player, | ||
| url = 'https://d3mfda3gpj3dw1.cloudfront.net/vn9s0p86SVbJorX6/master.mpd'; | ||
|
|
||
| video = document.querySelector('video'); | ||
| canvas = document.querySelector('canvas'); | ||
| player = dashjs.MediaPlayer().create(); | ||
|
|
||
| /* Configuration for LCEVC Decoder */ | ||
| const LCEVCdecConfig = {}; | ||
| LCEVCdec.ready.then(() => { | ||
| /* Attach LCEVC to the Dash.js player instance */ | ||
| dashjs.Extensions.useLcevc(player); | ||
| player.attachLcevc(video, canvas, LCEVCdecConfig); | ||
| player.initialize(video, url, false); | ||
| var controlbar = new ControlBar(player); | ||
| controlbar.initialize(); | ||
| }); | ||
| } | ||
| </script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <main> | ||
| <div class="container py-4"> | ||
| <header class="pb-3 mb-4 border-bottom"> | ||
| <img class="" | ||
| src="../lib/img/dashjs-logo.png" | ||
| width="200"> | ||
| </header> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="h-100 p-5 bg-light border rounded-3"> | ||
| <h3>MPEG-5 Part 2 LCEVC Decoding with SEI carriage</h3> | ||
| <p>This example illustrates how MPEG-5 LCEVC-enhanced streams can be decoded in dash.js. | ||
| In this implementation, enhancements are carried as Supplemental Enhancement Information | ||
| within the same track as the base video. The base frames are decoded by the HTML5 Video | ||
| Tag, with the LCEVC Decoder libraries processing the enhancement and rendering it to | ||
| an HTML5 Canvas element. This example is a debug test stream, which will show moving | ||
| squares when the LCEVC enhancement is being decoded and displayed successfully. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-8"> | ||
| <div class="dash-video-player code"> | ||
| <div class="videoContainer" id="videoContainer"> | ||
| <video preload="auto" autoplay></video> | ||
| <canvas></canvas> | ||
| <div id="videoController" class="video-controller unselectable"> | ||
| <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause"> | ||
| <span id="iconPlayPause" class="icon-play"></span> | ||
| </div> | ||
| <span id="videoTime" class="time-display">00:00:00</span> | ||
| <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen"> | ||
| <span class="icon-fullscreen-enter"></span> | ||
| </div> | ||
| <div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List"> | ||
| <span class="icon-bitrate"></span> | ||
| </div> | ||
| <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/> | ||
| <div id="muteBtn" class="btn-mute control-icon-layout" title="Mute"> | ||
| <span id="iconMute" class="icon-mute-off"></span> | ||
| </div> | ||
| <div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks"> | ||
| <span class="icon-tracks"></span> | ||
| </div> | ||
| <div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption"> | ||
| <span class="icon-caption"></span> | ||
| </div> | ||
| <span id="videoDuration" class="duration-display">00:00:00</span> | ||
| <div class="seekContainer"> | ||
| <div id="seekbar" class="seekbar seekbar-complete"> | ||
| <div id="seekbar-buffer" class="seekbar seekbar-buffer"></div> | ||
| <div id="seekbar-play" class="seekbar seekbar-play"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <div id="code-output"></div> | ||
| </div> | ||
| </div> | ||
| <footer class="pt-3 mt-4 text-muted border-top"> | ||
| © DASH-IF | ||
| </footer> | ||
| </div> | ||
| </main> | ||
| <script> | ||
| document.addEventListener('DOMContentLoaded', function () { | ||
| init(); | ||
| }); | ||
| </script> | ||
| <script src="../highlighter.js"></script> | ||
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters