client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts

   1 // Thanks https://github.com/streamroot/videojs-hlsjs-plugin
   2 // We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file
   3
   4 import Hlsjs, { ErrorData, HlsConfig, Level, LevelSwitchingData, ManifestParsedData } from 'hls.js'
   5 import videojs from 'video.js'
   6 import { logger } from '@root-helpers/logger'
   7 import { HlsjsConfigHandlerOptions, PeerTubeResolution, VideoJSTechHLS } from '../../types'
   8
   9 type ErrorCounts = {
  10   [ type: string ]: number
  11 }
  12
  13 type Metadata = {
  14   levels: Level[]
  15 }
  16
  17 type HookFn = (player: videojs.Player, hljs: Hlsjs) => void
  18
  19 const registerSourceHandler = function (vjs: typeof videojs) {
  20   if (!Hlsjs.isSupported()) {
  21     logger.warn('Hls.js is not supported in this browser!')
  22     return
  23   }
  24
  25   const html5 = vjs.getTech('Html5')
  26
  27   if (!html5) {
  28     logger.error('No Hml5 tech found in videojs')
  29     return
  30   }
  31
  32   // FIXME: typings
  33   (html5 as any).registerSourceHandler({
  34     canHandleSource: function (source: videojs.Tech.SourceObject) {
  35       const hlsTypeRE = /^application\/x-mpegURL|application\/vnd\.apple\.mpegurl$/i
  36       const hlsExtRE = /\.m3u8/i
  37
  38       if (hlsTypeRE.test(source.type)) return 'probably'
  39       if (hlsExtRE.test(source.src)) return 'maybe'
  40
  41       return ''
  42     },
  43
  44     handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) {
  45       if (tech.hlsProvider) {
  46         tech.hlsProvider.dispose()
  47       }
  48
  49       tech.hlsProvider = new Html5Hlsjs(vjs, source, tech)
  50
  51       return tech.hlsProvider
  52     }
  53   }, 0);
  54
  55   // FIXME: typings
  56   (vjs as any).Html5Hlsjs = Html5Hlsjs
  57 }
  58
  59 function hlsjsConfigHandler (this: videojs.Player, options: HlsjsConfigHandlerOptions) {
  60   const player = this
  61
  62   if (!options) return
  63
  64   if (!player.srOptions_) {
  65     player.srOptions_ = {}
  66   }
  67
  68   if (!player.srOptions_.hlsjsConfig) {
  69     player.srOptions_.hlsjsConfig = options.hlsjsConfig
  70   }
  71
  72   if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
  73     player.srOptions_.levelLabelHandler = options.levelLabelHandler
  74   }
  75 }
  76
  77 const registerConfigPlugin = function (vjs: typeof videojs) {
  78   // Used in Brightcove since we don't pass options directly there
  79   const registerVjsPlugin = vjs.registerPlugin || vjs.plugin
  80   registerVjsPlugin('hlsjs', hlsjsConfigHandler)
  81 }
  82
  83 class Html5Hlsjs {
  84   private static readonly hooks: { [id: string]: HookFn[] } = {}
  85
  86   private readonly videoElement: HTMLVideoElement
  87   private readonly errorCounts: ErrorCounts = {}
  88   private readonly player: videojs.Player
  89   private readonly tech: videojs.Tech
  90   private readonly source: videojs.Tech.SourceObject
  91   private readonly vjs: typeof videojs
  92
  93   private maxNetworkErrorRecovery = 5
  94
  95   private hls: Hlsjs
  96   private hlsjsConfig: Partial<HlsConfig & { cueHandler: any }> = null
  97
  98   private _duration: number = null
  99   private metadata: Metadata = null
 100   private isLive: boolean = null
 101   private dvrDuration: number = null
 102   private edgeMargin: number = null
 103
 104   private handlers: { [ id in 'play' ]: EventListener } = {
 105     play: null
 106   }
 107
 108   constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
 109     this.vjs = vjs
 110     this.source = source
 111
 112     this.tech = tech;
 113     (this.tech as any).name_ = 'Hlsjs'
 114
 115     this.videoElement = tech.el() as HTMLVideoElement
 116     this.player = vjs((tech.options_ as any).playerId)
 117
 118     this.videoElement.addEventListener('error', event => {
 119       let errorTxt: string
 120       const mediaError = ((event.currentTarget || event.target) as HTMLVideoElement).error
 121
 122       if (!mediaError) return
 123
 124       logger.info(mediaError)
 125       switch (mediaError.code) {
 126         case mediaError.MEDIA_ERR_ABORTED:
 127           errorTxt = 'You aborted the video playback'
 128           break
 129         case mediaError.MEDIA_ERR_DECODE:
 130           errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features ' +
 131                      'your browser did not support'
 132           this._handleMediaError(mediaError)
 133           break
 134         case mediaError.MEDIA_ERR_NETWORK:
 135           errorTxt = 'A network error caused the video download to fail part-way'
 136           break
 137         case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
 138           errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported'
 139           break
 140
 141         default:
 142           errorTxt = mediaError.message
 143       }
 144
 145       logger.error(`MEDIA_ERROR: ${errorTxt}`)
 146     })
 147
 148     this.initialize()
 149   }
 150
 151   duration () {
 152     if (this._duration === Infinity) return Infinity
 153     if (!isNaN(this.videoElement.duration)) return this.videoElement.duration
 154
 155     return this._duration || 0
 156   }
 157
 158   seekable () {
 159     if (this.hls.media) {
 160       if (!this.isLive) {
 161         return this.vjs.createTimeRanges(0, this.hls.media.duration)
 162       }
 163
 164       // Video.js doesn't seem to like floating point timeranges
 165       const startTime = Math.round(this.hls.media.duration - this.dvrDuration)
 166       const endTime = Math.round(this.hls.media.duration - this.edgeMargin)
 167
 168       return this.vjs.createTimeRanges(startTime, endTime)
 169     }
 170
 171     return this.vjs.createTimeRanges()
 172   }
 173
 174   // See comment for `initialize` method.
 175   dispose () {
 176     this.videoElement.removeEventListener('play', this.handlers.play)
 177
 178     // FIXME: https://github.com/video-dev/hls.js/issues/4092
 179     const untypedHLS = this.hls as any
 180     untypedHLS.log = untypedHLS.warn = () => {
 181       // empty
 182     }
 183
 184     this.hls.destroy()
 185   }
 186
 187   static addHook (type: string, callback: HookFn) {
 188     Html5Hlsjs.hooks[type] = this.hooks[type] || []
 189     Html5Hlsjs.hooks[type].push(callback)
 190   }
 191
 192   static removeHook (type: string, callback: HookFn) {
 193     if (Html5Hlsjs.hooks[type] === undefined) return false
 194
 195     const index = Html5Hlsjs.hooks[type].indexOf(callback)
 196     if (index === -1) return false
 197
 198     Html5Hlsjs.hooks[type].splice(index, 1)
 199
 200     return true
 201   }
 202
 203   private _executeHooksFor (type: string) {
 204     if (Html5Hlsjs.hooks[type] === undefined) {
 205       return
 206     }
 207
 208     // ES3 and IE < 9
 209     for (let i = 0; i < Html5Hlsjs.hooks[type].length; i++) {
 210       Html5Hlsjs.hooks[type][i](this.player, this.hls)
 211     }
 212   }
 213
 214   private _getHumanErrorMsg (error: { message: string, code?: number }) {
 215     switch (error.code) {
 216       default:
 217         return error.message
 218     }
 219   }
 220
 221   private _handleUnrecovarableError (error: any) {
 222     if (this.hls.levels.filter(l => l.id > -1).length > 1) {
 223       this._removeQuality(this.hls.loadLevel)
 224       return
 225     }
 226
 227     this.hls.destroy()
 228     logger.info('bubbling error up to VIDEOJS')
 229     this.tech.error = () => ({
 230       ...error,
 231       message: this._getHumanErrorMsg(error)
 232     })
 233     this.tech.trigger('error')
 234   }
 235
 236   private _handleMediaError (error: any) {
 237     if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 1) {
 238       logger.info('trying to recover media error')
 239       this.hls.recoverMediaError()
 240       return
 241     }
 242
 243     if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 2) {
 244       logger.info('2nd try to recover media error (by swapping audio codec')
 245       this.hls.swapAudioCodec()
 246       this.hls.recoverMediaError()
 247       return
 248     }
 249
 250     if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] > 2) {
 251       this._handleUnrecovarableError(error)
 252     }
 253   }
 254
 255   private _handleNetworkError (error: any) {
 256     if (navigator.onLine === false) return
 257
 258     if (this.errorCounts[Hlsjs.ErrorTypes.NETWORK_ERROR] <= this.maxNetworkErrorRecovery) {
 259       logger.info('trying to recover network error')
 260
 261       // Wait 1 second and retry
 262       setTimeout(() => this.hls.startLoad(), 1000)
 263
 264       // Reset error count on success
 265       this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
 266         this.errorCounts[Hlsjs.ErrorTypes.NETWORK_ERROR] = 0
 267       })
 268
 269       return
 270     }
 271
 272     this._handleUnrecovarableError(error)
 273   }
 274
 275   private _onError (_event: any, data: ErrorData) {
 276     const error: { message: string, code?: number } = {
 277       message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
 278     }
 279
 280     // increment/set error count
 281     if (this.errorCounts[data.type]) this.errorCounts[data.type] += 1
 282     else this.errorCounts[data.type] = 1
 283
 284     if (data.fatal) logger.error(error.message, { currentTime: this.player.currentTime(), data })
 285     else logger.warn(error.message)
 286
 287     if (data.type === Hlsjs.ErrorTypes.NETWORK_ERROR) {
 288       error.code = 2
 289       this._handleNetworkError(error)
 290     } else if (data.fatal && data.type === Hlsjs.ErrorTypes.MEDIA_ERROR && data.details !== 'manifestIncompatibleCodecsError') {
 291       error.code = 3
 292       this._handleMediaError(error)
 293     } else if (data.fatal) {
 294       this._handleUnrecovarableError(error)
 295     }
 296   }
 297
 298   private buildLevelLabel (level: Level) {
 299     if (this.player.srOptions_.levelLabelHandler) {
 300       return this.player.srOptions_.levelLabelHandler(level as any)
 301     }
 302
 303     if (level.height) return level.height + 'p'
 304     if (level.width) return Math.round(level.width * 9 / 16) + 'p'
 305     if (level.bitrate) return (level.bitrate / 1000) + 'kbps'
 306
 307     return '0'
 308   }
 309
 310   private _removeQuality (index: number) {
 311     this.hls.removeLevel(index)
 312     this.player.peertubeResolutions().remove(index)
 313     this.hls.currentLevel = -1
 314   }
 315
 316   private _notifyVideoQualities () {
 317     if (!this.metadata) return
 318
 319     const resolutions: PeerTubeResolution[] = []
 320
 321     this.metadata.levels.forEach((level, index) => {
 322       resolutions.push({
 323         id: index,
 324         height: level.height,
 325         width: level.width,
 326         bitrate: level.bitrate,
 327         label: this.buildLevelLabel(level),
 328         selected: level.id === this.hls.manualLevel,
 329
 330         selectCallback: () => {
 331           this.hls.currentLevel = index
 332         }
 333       })
 334     })
 335
 336     resolutions.push({
 337       id: -1,
 338       label: this.player.localize('Auto'),
 339       selected: true,
 340       selectCallback: () => this.hls.currentLevel = -1
 341     })
 342
 343     this.player.peertubeResolutions().add(resolutions)
 344   }
 345
 346   private _startLoad () {
 347     this.hls.startLoad(-1)
 348     this.videoElement.removeEventListener('play', this.handlers.play)
 349   }
 350
 351   private _oneLevelObjClone (obj: { [ id: string ]: any }) {
 352     const result = {}
 353     const objKeys = Object.keys(obj)
 354     for (let i = 0; i < objKeys.length; i++) {
 355       result[objKeys[i]] = obj[objKeys[i]]
 356     }
 357
 358     return result
 359   }
 360
 361   private _onMetaData (_event: any, data: ManifestParsedData) {
 362     // This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later
 363     this.metadata = data
 364     this._notifyVideoQualities()
 365   }
 366
 367   private _initHlsjs () {
 368     const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
 369     const srOptions_ = this.player.srOptions_
 370
 371     const hlsjsConfigRef = srOptions_?.hlsjsConfig || techOptions.hlsjsConfig
 372     // Hls.js will write to the reference thus change the object for later streams
 373     this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {}
 374
 375     if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) {
 376       this.hlsjsConfig.autoStartLoad = false
 377     }
 378
 379     // If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above
 380     // That's why we have a separate if block here to set the 'play' listener
 381     if (this.hlsjsConfig.autoStartLoad === false) {
 382       this.handlers.play = this._startLoad.bind(this)
 383       this.videoElement.addEventListener('play', this.handlers.play)
 384     }
 385
 386     this.hls = new Hlsjs(this.hlsjsConfig)
 387
 388     this._executeHooksFor('beforeinitialize')
 389
 390     this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data))
 391     this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data))
 392     this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => {
 393       // The DVR plugin will auto seek to "live edge" on start up
 394       if (this.hlsjsConfig.liveSyncDuration) {
 395         this.edgeMargin = this.hlsjsConfig.liveSyncDuration
 396       } else if (this.hlsjsConfig.liveSyncDurationCount) {
 397         this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration
 398       }
 399
 400       this.isLive = data.details.live
 401       this.dvrDuration = data.details.totalduration
 402
 403       this._duration = this.isLive ? Infinity : data.details.totalduration
 404
 405       // Increase network error recovery for lives since they can be broken (server restart, stream interruption etc)
 406       if (this.isLive) this.maxNetworkErrorRecovery = 300
 407     })
 408
 409     this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
 410       // Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls`
 411       // Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata
 412       this.tech.trigger('loadedmetadata')
 413     })
 414
 415     this.hls.on(Hlsjs.Events.LEVEL_SWITCHING, (_e, data: LevelSwitchingData) => {
 416       const resolutionId = this.hls.autoLevelEnabled
 417         ? -1
 418         : data.level
 419
 420       const autoResolutionChosenId = this.hls.autoLevelEnabled
 421         ? data.level
 422         : -1
 423
 424       this.player.peertubeResolutions().select({ id: resolutionId, autoResolutionChosenId, byEngine: true })
 425     })
 426
 427     this.hls.attachMedia(this.videoElement)
 428
 429     this.hls.loadSource(this.source.src)
 430   }
 431
 432   private initialize () {
 433     this._initHlsjs()
 434   }
 435 }
 436
 437 export {
 438   Html5Hlsjs,
 439   registerSourceHandler,
 440   registerConfigPlugin
 441 }