MPEG-5 Part 2 LCEVC example

MPEG-5 Part 2 LCEVC Decoding with SEI carriage

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.

00:00:00

Source code

<script src="../../dist/modern/umd/dash.all.debug.js"></script>
<script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
<script>
    /**
     * 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>
<div class="dash-video-player ">
    <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>