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