clappr/clappr-level-selector-plugin

Double levels

katsar0v opened this issue · 4 comments

Somehow I get the list of qualities doubled:

image

and I get this error:

[error][dash_shaka_playback] error on event playback:levels:available trigger - TypeError: Cannot read property 'height' of undefined
    at labelCallback ((index):29)
    at e.configureLevelsLabels (level-selector.min.js:1)
    at e.fillLevels (level-selector.min.js:1)
    at n (clappr.min.js:1)
    at n (clappr.min.js:1)
    at y (clappr.min.js:1)
    at DashShakaPlayback.t.trigger (clappr.min.js:1)
    at DashShakaPlayback._fillLevels (dash-shaka-playback.js:388)
    at DashShakaPlayback._loaded (dash-shaka-playback.js:378)
    at dash-shaka-playback.js:352

Source code:

<script type="text/javascript">
  const options = {
    source: "/dash/vid,360p.mp4,480p.mp4,720p.mp4,1080p.mp4,.urlset/manifest.mpd",
    plugins: [DashShakaPlayback, LevelSelector],
    autoPlay: true,
    shakaConfiguration: {
      preferredAudioLanguage: "de",
      streaming: {
        rebufferingGoal: 15
      }
    },
    levelSelectorConfig: {
      title: 'Quality',
      labelCallback: function(playbackLevel, customLabel) {
        return customLabel + playbackLevel.level.height+'p'; // High 720p
      }
    },
    parentId: "#player",
    width: 800,
    height: 600
  }
  let player = new Clappr.Player(options);
</script>

can you post the mpd xml here?

<?xml version="1.0"?>
<MPD
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="urn:mpeg:dash:schema:mpd:2011"
    xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 http://standards.iso.org/ittf/PubliclyAvailableStandards/MPEG-DASH_schema_files/DASH-MPD.xsd"
    type="static"
    mediaPresentationDuration="PT323.675S"
    minBufferTime="PT9S"
    profiles="urn:mpeg:dash:profile:isoff-main:2011">
  <Period>
    <AdaptationSet
        id="1"
        segmentAlignment="true"
        maxWidth="1920"
        maxHeight="1080"
        maxFrameRate="25">
        <SegmentTemplate
            timescale="1000"
            media="https://localhost/dash/daw/kapitel-01/1_V01_willkommen,_360p.mp4,_480p.mp4,_720p.mp4,_1080p.mp4,.urlset/segment-$Number$-$RepresentationID$.m4s"
            initialization="https://localhost/dash/daw/kapitel-01/1_V01_willkommen,_360p.mp4,_480p.mp4,_720p.mp4,_1080p.mp4,.urlset/init-$RepresentationID$.mp4"
            startNumber="1">
            <SegmentTimeline>
                <S d="10000" r="3"/>
                <S d="11480"/>
                <S d="10000" r="1"/>
                <S d="1280"/>
                <S d="9920"/>
                <S d="10000"/>
                <S d="9120"/>
                <S d="8560"/>
                <S d="10000" r="6"/>
                <S d="0"/>
                <S d="18480"/>
                <S d="0"/>
                <S d="10000" r="3"/>
                <S d="5960"/>
                <S d="10000" r="6"/>
                <S d="8840"/>
            </SegmentTimeline>
        </SegmentTemplate>
      <Representation
          id="f1-v1-x3"
          mimeType="video/mp4"
          codecs="avc1.64001e"
          width="640"
          height="360"
          frameRate="25"
          sar="1:1"
          startWithSAP="1"
          bandwidth="177119">
      </Representation>
      <Representation
          id="f2-v1-x3"
          mimeType="video/mp4"
          codecs="avc1.64001e"
          width="854"
          height="480"
          frameRate="25"
          sar="1:1"
          startWithSAP="1"
          bandwidth="265437">
      </Representation>
      <Representation
          id="f3-v1-x3"
          mimeType="video/mp4"
          codecs="avc1.64001f"
          width="1280"
          height="720"
          frameRate="25"
          sar="1:1"
          startWithSAP="1"
          bandwidth="508238">
      </Representation>
      <Representation
          id="f4-v1-x3"
          mimeType="video/mp4"
          codecs="avc1.640028"
          width="1920"
          height="1080"
          frameRate="25"
          sar="1:1"
          startWithSAP="1"
          bandwidth="1260898">
      </Representation>
    </AdaptationSet>
    <AdaptationSet
        id="2"
        segmentAlignment="true">
      <AudioChannelConfiguration
          schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011"
          value="1"/>
        <SegmentTemplate
            timescale="1000"
            media="https://localhost/dash/daw/kapitel-01/1_V01_willkommen,_360p.mp4,_480p.mp4,_720p.mp4,_1080p.mp4,.urlset/segment-$Number$-$RepresentationID$.m4s"
            initialization="https://localhost/dash/daw/kapitel-01/1_V01_willkommen,_360p.mp4,_480p.mp4,_720p.mp4,_1080p.mp4,.urlset/init-$RepresentationID$.mp4"
            startNumber="1">
            <SegmentTimeline>
                <S d="9003" r="6"/>
                <S d="8981"/>
                <S d="9003" r="6"/>
                <S d="8981"/>
                <S d="9003" r="6"/>
                <S d="8981"/>
                <S d="9003" r="6"/>
                <S d="8981"/>
                <S d="9003" r="2"/>
                <S d="8667"/>
            </SegmentTimeline>
        </SegmentTemplate>
      <Representation
          id="f1-a1-x3"
          mimeType="audio/mp4"
          codecs="mp4a.40.2"
          audioSamplingRate="48000"
          startWithSAP="1"
          bandwidth="132724">
      </Representation>
    </AdaptationSet>
  </Period>
</MPD>

I have the same double quality list with latest current Clappr+Shaka, xml generating by kaltura/nginx-vod-module.

i confirm the issue with some manifest (does not happen with all sources).
I am gonna investigate and propose a fix.

EDIT: it seems an issue with shaka playback. Because levels are already duplicated when provided to level selector plugin by PLAYBACK_LEVELS_AVAILABLEevent. Anyway i will push some minor fixes with event binding and backward compatibility with Clappr 0.2.x (and hopefully a fix in dash playback plugin)

EDIT 2: i confirm that i think the issue is not related to this plugin. The level "label formatting" has been delegated to playback plugins (ie: Dash Shaka plugin) and my tests are pointing out an issue where manifest can expose video stream in different language for the same video "height" which result in duplicated labels (but different streams) leading to confusion.