@gcorevideo/player 0.0.1

package/src/plugins/dash-playback/_DashPlayback.js

@@ -0,0 +1,688 @@
+// Copyright 2014 Globo.com Player authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import { Events, HTML5Video, Log, Playback, PlayerError, Utils } from '@clappr/core';
+import DASHJS from 'dashjs';
+
+const AUTO = -1;
+
+const { now } = Utils;
+
+export default class DashPlayback extends HTML5Video {
+  get name() {
+    return 'dash';
+  }
+
+  get levels() {
+    return this._levels || [];
+  }
+
+  get currentLevel() {
+    if (this._currentLevel === null || this._currentLevel === undefined) {
+      return AUTO;
+    } else {
+      return this._currentLevel;
+    } //0 is a valid level ID
+  }
+
+  get isReady() {
+    return this._isReadyState;
+  }
+
+  set currentLevel(id) {
+    this._currentLevel = id;
+
+    this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START);
+    const cfg = {
+      streaming: {
+        abr: {
+          autoSwitchBitrate: {
+            video: id === -1,
+          },
+          ABRStrategy: 'abrL2A'
+        }
+      },
+    };
+
+    this.options.dash && this._dash.updateSettings({ ...this.options.dash, ...cfg });
+    if (id !== -1) {
+      this._dash.setQualityFor('video', id);
+    }
+    if (this._playbackType === Playback.VOD) {
+      const curr_time = this._dash.time();
+
+      this.startChangeQuality = true;
+      this._dash.seek(0);
+      setTimeout(() => {
+        this._dash.seek(curr_time);
+        this._dash.play();
+        this.startChangeQuality = false;
+      }, 100);
+    }
+  }
+
+  get _startTime() {
+    if (this._playbackType === Playback.LIVE && this._playlistType !== 'EVENT') {
+      return this._extrapolatedStartTime;
+    }
+
+    return this._playableRegionStartTime;
+  }
+
+  get _now() {
+    return now();
+  }
+
+  // the time in the video element which should represent the start of the sliding window
+  // extrapolated to increase in real time (instead of jumping as the early segments are removed)
+  get _extrapolatedStartTime() {
+    if (!this._localStartTimeCorrelation) {
+      return this._playableRegionStartTime;
+    }
+
+    const corr = this._localStartTimeCorrelation;
+    const timePassed = this._now - corr.local;
+    const extrapolatedWindowStartTime = (corr.remote + timePassed) / 1000;
+
+    // cap at the end of the extrapolated window duration
+    return Math.min(extrapolatedWindowStartTime, this._playableRegionStartTime + this._extrapolatedWindowDuration);
+  }
+
+  // the time in the video element which should represent the end of the content
+  // extrapolated to increase in real time (instead of jumping as segments are added)
+  get _extrapolatedEndTime() {
+    const actualEndTime = this._playableRegionStartTime + this._playableRegionDuration;
+
+    if (!this._localEndTimeCorrelation) {
+      return actualEndTime;
+    }
+
+    const corr = this._localEndTimeCorrelation;
+    const timePassed = this._now - corr.local;
+    const extrapolatedEndTime = (corr.remote + timePassed) / 1000;
+
+    return Math.max(actualEndTime - this._extrapolatedWindowDuration, Math.min(extrapolatedEndTime, actualEndTime));
+  }
+
+  get _duration() {
+    if (!this._dash) {
+      return null;
+    }
+
+    return this._dash.duration();
+  }
+
+  constructor(...args) {
+    super(...args);
+    // backwards compatibility (TODO: remove on 0.3.0)
+    this.options.playback || (this.options.playback = this.options);
+    // The size of the start time extrapolation window measured as a multiple of segments.
+    // Should be 2 or higher, or 0 to disable. Should only need to be increased above 2 if more than one segment is
+    // removed from the start of the playlist at a time. E.g if the playlist is cached for 10 seconds and new chunks are
+    // added/removed every 5.
+    this._extrapolatedWindowNumSegments = this.options.playback?.extrapolatedWindowNumSegments ?? 2;
+
+    this._playbackType = this.options.playbackType || Playback.VOD;
+    this._lastTimeUpdate = { current: 0, total: 0 };
+    this._lastDuration = null;
+    // for hls streams which have dvr with a sliding window,
+    // the content at the start of the playlist is removed as new
+    // content is appended at the end.
+    // this means the actual playable start time will increase as the
+    // start content is deleted
+    // For streams with dvr where the entire recording is kept from the
+    // beginning this should stay as 0
+    this._playableRegionStartTime = 0;
+    // {local, remote} remote is the time in the video element that should represent 0
+    //                 local is the system time when the 'remote' measurment took place
+    this._localStartTimeCorrelation = null;
+    // {local, remote} remote is the time in the video element that should represents the end
+    //                 local is the system time when the 'remote' measurment took place
+    this._localEndTimeCorrelation = null;
+    // if content is removed from the beginning then this empty area should
+    // be ignored. "playableRegionDuration" excludes the empty area
+    this._playableRegionDuration = 0;
+    // #EXT-X-PROGRAM-DATE-TIME
+    this._programDateTime = 0;
+
+    this.manifestInfo = null;
+    // true when the actual duration is longer than hlsjs's live sync point
+    // when this is false playableRegionDuration will be the actual duration
+    // when this is true playableRegionDuration will exclude the time after the sync point
+    this._durationExcludesAfterLiveSyncPoint = false;
+    // #EXT-X-TARGETDURATION
+    this._segmentTargetDuration = null;
+    // #EXT-X-PLAYLIST-TYPE
+    this._playlistType = null;
+    this._recoverAttemptsRemaining = this.options.hlsRecoverAttempts || 16;
+  }
+
+  _setup() {
+    this._dash = DASHJS.MediaPlayer().create();
+    this._dash.initialize();
+
+    const cfg = this.options.dash ?? {};
+
+    cfg.streaming = cfg.streaming || {};
+    cfg.streaming.text = cfg.streaming.text || { defaultEnabled: false };
+
+    this.options.dash && this._dash.updateSettings(cfg);
+
+    this._dash.attachView(this.el);
+
+    this._dash.setAutoPlay(false);
+    this._dash.attachSource(this.options.src);
+
+    this._dash.on(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError.bind(this));
+    this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_ERROR, this._onDASHJSSError.bind(this));
+
+    this._dash.on(DASHJS.MediaPlayer.events.STREAM_INITIALIZED, () => {
+      const bitrates = this._dash.getBitrateInfoListFor('video');
+
+      this._updatePlaybackType();
+      this._fillLevels(bitrates);
+      this._dash.on(DASHJS.MediaPlayer.events.QUALITY_CHANGE_REQUESTED, (evt) => {
+        this._onLevelSwitch({ ...this._levels[evt.newQuality] });
+      });
+    });
+
+    this._dash.on(DASHJS.MediaPlayer.events.METRIC_ADDED, (e) => {
+      // Listen for the first manifest request in order to update player UI
+      if (e.metric === 'DVRInfo') {
+        // Extract time info
+        this.manifestInfo = e.value.manifestInfo;
+      }
+    });
+
+    this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, () => {
+      this.trigger('dash:playback-rate-changed');
+    });
+  }
+
+  render() {
+    this._ready();
+
+    return super.render();
+  }
+
+  _ready() {
+    this._isReadyState = true;
+    this.trigger(Events.PLAYBACK_READY, this.name);
+  }
+
+  _recover(evt, data, error) {
+    console.warn('recover', evt, data, error);
+    if (!this._recoveredDecodingError) {
+      this._recoveredDecodingError = true;
+      this._dash.recoverMediaError();
+    } else if (!this._recoveredAudioCodecError) {
+      this._recoveredAudioCodecError = true;
+      this._dash.swapAudioCodec();
+      this._dash.recoverMediaError();
+    } else {
+      Log.error('hlsjs: failed to recover', { evt, data });
+      error.level = PlayerError.Levels.FATAL;
+      const formattedError = this.createError(error);
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      this.stop();
+    }
+  }
+
+  // override
+  _setupSrc() {
+    // this playback manages the src on the video element itself
+  }
+
+  _startTimeUpdateTimer() {
+    this._stopTimeUpdateTimer();
+    this._timeUpdateTimer = setInterval(() => {
+      this._onDurationChange();
+      this._onTimeUpdate();
+    }, 100);
+  }
+
+  _stopTimeUpdateTimer() {
+    clearInterval(this._timeUpdateTimer);
+  }
+
+  getProgramDateTime() {
+    return this._programDateTime;
+  }
+
+  // the duration on the video element itself should not be used
+  // as this does not necesarily represent the duration of the stream
+  // https://github.com/clappr/clappr/issues/668#issuecomment-157036678
+  getDuration() {
+    return this._duration;
+  }
+
+  getCurrentTime() {
+    // e.g. can be < 0 if user pauses near the start
+    // eventually they will then be kicked to the end by hlsjs if they run out of buffer
+    // before the official start time
+    return this._dash ? this._dash.time() : 0;
+  }
+
+  // the time that "0" now represents relative to when playback started
+  // for a stream with a sliding window this will increase as content is
+  // removed from the beginning
+  getStartTimeOffset() {
+    return this._startTime;
+  }
+
+  seekPercentage(percentage) {
+    let seekTo = this._duration;
+
+    if (percentage > 0) {
+      seekTo = this._duration * (percentage / 100);
+    }
+
+    this.seek(seekTo);
+  }
+
+  seek(time) {
+    if (time < 0) {
+      // eslint-disable-next-line max-len
+      Log.warn('Attempt to seek to a negative time. Resetting to live point. Use seekToLivePoint() to seek to the live point.');
+      time = this.getDuration();
+    }
+    this.dvrEnabled && this._updateDvr(time < this.getDuration() - 10);
+    this._dash.seek(time);
+  }
+
+  seekToLivePoint() {
+    this.seek(this.getDuration());
+  }
+
+  _updateDvr(status) {
+    this.trigger(Events.PLAYBACK_DVR, status);
+    this.trigger(Events.PLAYBACK_STATS_ADD, { 'dvr': status });
+  }
+
+  _updateSettings() {
+    if (this._playbackType === Playback.VOD) {
+      this.settings.left = ['playpause', 'position', 'duration'];
+    } else if (this.dvrEnabled) {
+      this.settings.left = ['playpause'];
+    } else {
+      this.settings.left = ['playstop'];
+    }
+
+    this.settings.seekEnabled = this.isSeekEnabled();
+    this.trigger(Events.PLAYBACK_SETTINGSUPDATE);
+  }
+
+  _onDASHJSSError(event) {
+    // only report/handle errors if they are fatal
+    // hlsjs should automatically handle non fatal errors
+    this._stopTimeUpdateTimer();
+    if (event.error === 'capability' && event.event === 'mediasource') {
+      // No support for MSE
+      const formattedError = this.createError(event.error);
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      Log.error('The media cannot be played because it requires a feature ' +
+        'that your browser does not support.');
+    } else if (event.error === 'manifestError' && (
+      // Manifest type not supported
+      (event.event.id === 'createParser') ||
+      // Codec(s) not supported
+      (event.event.id === 'codec') ||
+      // No streams available to stream
+      (event.event.id === 'nostreams') ||
+      // Error creating Stream object
+      (event.event.id === 'nostreamscomposed') ||
+      // syntax error parsing the manifest
+      (event.event.id === 'parse') ||
+      // a stream has multiplexed audio+video
+      (event.event.id === 'multiplexedrep')
+    )) {
+      // These errors have useful error messages, so we forward it on
+      const formattedError = this.createError(event.error);
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      if (event.error) {
+        Log.error(event.error.message);
+      }
+    } else if (event.error === 'mediasource') {
+      // This error happens when dash.js fails to allocate a SourceBuffer
+      // OR the underlying video element throws a `MediaError`.
+      // If it's a buffer allocation fail, the message states which buffer
+      // (audio/video/text) failed allocation.
+      // If it's a `MediaError`, dash.js inspects the error object for
+      // additional information to append to the error type.
+      const formattedError = this.createError(event.error);
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      if (event.error) {
+        Log.error(event.error.message);
+      }
+    } else if (event.error === 'capability' && event.event === 'encryptedmedia') {
+      // Browser doesn't support EME
+
+      const formattedError = this.createError(event.error);
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      Log.error('The media cannot be played because it requires encryption ' +
+        'that your browser does not support.');
+    } else if (event.error === 'key_session') {
+      // This block handles pretty much all errors thrown by the
+      // encryption subsystem
+      const formattedError = this.createError(event.error);
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      if (event.error) {
+        Log.error(event.error.message);
+      }
+    } else if (event.error === 'download') {
+      const formattedError = this.createError(event.error);
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      Log.error('The media playback was aborted because too many consecutive ' +
+        'download errors occurred.');
+    } else if (event.error === 'mssError') {
+      const formattedError = this.createError(event.error);
+
+      this.trigger(Events.PLAYBACK_ERROR, formattedError);
+      if (event.error) {
+        Log.error(event.error.message);
+      }
+    } else {
+      // ignore the error
+      if (event.error) {
+        const formattedError = this.createError(event.error);
+
+        this.trigger(Events.PLAYBACK_ERROR, formattedError);
+        Log.error(event.error.message);
+      }
+
+      return;
+    }
+
+    // only reset the dash player in 10ms async, so that the rest of the
+    // calling function finishes
+    setTimeout(() => {
+      this._dash.reset();
+    }, 10);
+  }
+
+  _onTimeUpdate() {
+    if (this.startChangeQuality) {
+      return;
+    }
+    const update = {
+      current: this.getCurrentTime(),
+      total: this.getDuration(),
+      firstFragDateTime: this.getProgramDateTime()
+    };
+    const isSame = this._lastTimeUpdate && (
+      update.current === this._lastTimeUpdate.current &&
+      update.total === this._lastTimeUpdate.total);
+
+    if (isSame) {
+      return;
+    }
+    this._lastTimeUpdate = update;
+    this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name);
+  }
+
+  _onDurationChange() {
+    const duration = this.getDuration();
+
+    if (this._lastDuration === duration) {
+      return;
+    }
+
+    this._lastDuration = duration;
+    super._onDurationChange();
+  }
+
+  get dvrEnabled() {
+    return this._dash?.getDVRWindowSize() >= this._minDvrSize && this.getPlaybackType() === Playback.LIVE;
+  }
+
+  _onProgress() {
+    if (!this._dash) {
+      return;
+    }
+
+    let buffer = this._dash.getDashMetrics().getCurrentBufferLevel('video', true);
+
+    if (!buffer) {
+      buffer = this._dash.getDashMetrics().getCurrentBufferLevel('audio', true);
+    }
+    const progress = {
+      start: this.getCurrentTime(),
+      current: this.getCurrentTime() + buffer,
+      total: this.getDuration()
+    };
+
+    this.trigger(Events.PLAYBACK_PROGRESS, progress, {});
+  }
+
+  play() {
+    if (!this._dash) {
+      this._setup();
+    }
+
+    super.play();
+    this._startTimeUpdateTimer();
+  }
+
+  pause() {
+    if (!this._dash) {
+      return;
+    }
+
+    super.pause();
+    if (this.dvrEnabled) {
+      this._updateDvr(true);
+    }
+  }
+
+  stop() {
+    if (this._dash) {
+      this._stopTimeUpdateTimer();
+      this._dash.reset();
+      super.stop();
+      delete this._dash;
+    }
+  }
+
+  destroy() {
+    this._stopTimeUpdateTimer();
+    if (this._dash) {
+      this._dash.off(DASHJS.MediaPlayer.events.ERROR, this._onDASHJSSError);
+      this._dash.off(DASHJS.MediaPlayer.events.MANIFEST_LOADED, this.getDuration);
+      this._dash.reset();
+    }
+    delete this._dash;
+    super.destroy();
+  }
+
+  _updatePlaybackType() {
+    this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD;
+  }
+
+  _fillLevels(levels) {
+    this._levels = levels.map((level) => {
+      return { id: level.qualityIndex, level: level };
+    });
+    this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this._levels);
+  }
+
+  _onLevelUpdated(evt, data) {
+    this._segmentTargetDuration = data.details.targetduration;
+    this._playlistType = data.details.type || null;
+
+    let startTimeChanged = false;
+    let durationChanged = false;
+    const fragments = data.details.fragments;
+    const previousPlayableRegionStartTime = this._playableRegionStartTime;
+    const previousPlayableRegionDuration = this._playableRegionDuration;
+
+    if (fragments.length === 0) {
+      return;
+    }
+
+    // #EXT-X-PROGRAM-DATE-TIME
+    if (fragments[0].rawProgramDateTime) {
+      this._programDateTime = fragments[0].rawProgramDateTime;
+    }
+
+    if (this._playableRegionStartTime !== fragments[0].start) {
+      startTimeChanged = true;
+      this._playableRegionStartTime = fragments[0].start;
+    }
+
+    if (startTimeChanged) {
+      if (!this._localStartTimeCorrelation) {
+        // set the correlation to map to middle of the extrapolation window
+        this._localStartTimeCorrelation = {
+          local: this._now,
+          remote: (fragments[0].start + (this._extrapolatedWindowDuration / 2)) * 1000
+        };
+      } else {
+        // check if the correlation still works
+        const corr = this._localStartTimeCorrelation;
+        const timePassed = this._now - corr.local;
+        // this should point to a time within the extrapolation window
+        const startTime = (corr.remote + timePassed) / 1000;
+
+        if (startTime < fragments[0].start) {
+          // our start time is now earlier than the first chunk
+          // (maybe the chunk was removed early)
+          // reset correlation so that it sits at the beginning of the first available chunk
+          this._localStartTimeCorrelation = {
+            local: this._now,
+            remote: fragments[0].start * 1000
+          };
+        } else if (startTime > previousPlayableRegionStartTime + this._extrapolatedWindowDuration) {
+          // start time was past the end of the old extrapolation window (so would have been capped)
+          // see if now that time would be inside the window, and if it would be set the correlation
+          // so that it resumes from the time it was at at the end of the old window
+          // update the correlation so that the time starts counting again from the value it's on now
+          this._localStartTimeCorrelation = {
+            local: this._now,
+            remote: Math.max(
+              fragments[0].start,
+              previousPlayableRegionStartTime + this._extrapolatedWindowDuration
+            ) * 1000
+          };
+        }
+      }
+    }
+
+    let newDuration = data.details.totalduration;
+
+    // if it's a live stream then shorten the duration to remove access
+    // to the area after hlsjs's live sync point
+    // seeks to areas after this point sometimes have issues
+    if (this._playbackType === Playback.LIVE) {
+      const fragmentTargetDuration = data.details.targetduration;
+      const hlsjsConfig = this.options.playback.hlsjsConfig || {};
+      // eslint-disable-next-line no-undef
+      const liveSyncDurationCount = hlsjsConfig.liveSyncDurationCount || HLSJS.DefaultConfig.liveSyncDurationCount;
+      const hiddenAreaDuration = fragmentTargetDuration * liveSyncDurationCount;
+
+      if (hiddenAreaDuration <= newDuration) {
+        newDuration -= hiddenAreaDuration;
+        this._durationExcludesAfterLiveSyncPoint = true;
+      } else {
+        this._durationExcludesAfterLiveSyncPoint = false;
+      }
+    }
+
+    if (newDuration !== this._playableRegionDuration) {
+      durationChanged = true;
+      this._playableRegionDuration = newDuration;
+    }
+
+    // Note the end time is not the playableRegionDuration
+    // The end time will always increase even if content is removed from the beginning
+    const endTime = fragments[0].start + newDuration;
+    const previousEndTime = previousPlayableRegionStartTime + previousPlayableRegionDuration;
+    const endTimeChanged = endTime !== previousEndTime;
+
+    if (endTimeChanged) {
+      if (!this._localEndTimeCorrelation) {
+        // set the correlation to map to the end
+        this._localEndTimeCorrelation = {
+          local: this._now,
+          remote: endTime * 1000
+        };
+      } else {
+        // check if the correlation still works
+        const corr = this._localEndTimeCorrelation;
+        const timePassed = this._now - corr.local;
+        // this should point to a time within the extrapolation window from the end
+        const extrapolatedEndTime = (corr.remote + timePassed) / 1000;
+
+        if (extrapolatedEndTime > endTime) {
+          this._localEndTimeCorrelation = {
+            local: this._now,
+            remote: endTime * 1000
+          };
+        } else if (extrapolatedEndTime < endTime - this._extrapolatedWindowDuration) {
+          // our extrapolated end time is now earlier than the extrapolation window from the actual end time
+          // (maybe a chunk became available early)
+          // reset correlation so that it sits at the beginning of the extrapolation window from the end time
+          this._localEndTimeCorrelation = {
+            local: this._now,
+            remote: (endTime - this._extrapolatedWindowDuration) * 1000
+          };
+        } else if (extrapolatedEndTime > previousEndTime) {
+          // end time was past the old end time (so would have been capped)
+          // set the correlation so that it resumes from the time it was at at the end of the old window
+          this._localEndTimeCorrelation = {
+            local: this._now,
+            remote: previousEndTime * 1000
+          };
+        }
+      }
+    }
+
+    // now that the values have been updated call any methods that use on them so they get the updated values
+    // immediately
+    durationChanged && this._onDurationChange();
+    startTimeChanged && this._onProgress();
+  }
+
+  _onFragmentLoaded(evt, data) {
+    this.trigger(Events.PLAYBACK_FRAGMENT_LOADED, data);
+  }
+
+  _onLevelSwitch(evt) {
+    const currentLevel = evt;
+
+    if (currentLevel.level) {
+      if (currentLevel) {
+        this.trigger(Events.PLAYBACK_BITRATE, {
+          height: currentLevel.level.height,
+          width: currentLevel.level.width,
+          bitrate: currentLevel.level.bitrate,
+          level: currentLevel.level.qualityIndex
+        });
+      }
+    }
+  }
+
+  getPlaybackType() {
+    return this._playbackType;
+  }
+
+  isSeekEnabled() {
+    return (this._playbackType === Playback.VOD || this.dvrEnabled);
+  }
+}
+
+DashPlayback.canPlay = function (resource, mimeType) {
+  const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
+  const isDash = ((resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'mpd') ||
+    mimeType === 'application/dash+xml' || mimeType === 'video/mp4');
+  const isSupportByBrowser = typeof (window.MediaSource || window.WebKitMediaSource) === 'function';
+
+  return !!(isSupportByBrowser && isDash);
+};