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, ManifestLoadedData } from 'hls.js'
   5 import videojs from 'video.js'
   6 import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, 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 (!player.srOptions_.captionConfig) {
  72     player.srOptions_.captionConfig = options.captionConfig
  73   }
  74
  75   if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
  76     player.srOptions_.levelLabelHandler = options.levelLabelHandler
  77   }
  78 }
  79
  80 const registerConfigPlugin = function (vjs: typeof videojs) {
  81   // Used in Brightcove since we don't pass options directly there
  82   const registerVjsPlugin = vjs.registerPlugin || vjs.plugin
  83   registerVjsPlugin('hlsjs', hlsjsConfigHandler)
  84 }
  85
  86 class Html5Hlsjs {
  87   private static readonly hooks: { [id: string]: HookFn[] } = {}
  88
  89   private readonly videoElement: HTMLVideoElement
  90   private readonly errorCounts: ErrorCounts = {}
  91   private readonly player: videojs.Player
  92   private readonly tech: videojs.Tech
  93   private readonly source: videojs.Tech.SourceObject
  94   private readonly vjs: typeof videojs
  95
  96   private hls: Hlsjs
  97   private hlsjsConfig: Partial<HlsConfig & { cueHandler: any }> = null
  98
  99   private _duration: number = null
 100   private metadata: Metadata = null
 101   private isLive: boolean = null
 102   private dvrDuration: number = null
 103   private edgeMargin: number = null
 104
 105   private handlers: { [ id in 'play' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = {
 106     play: null,
 107     playing: null,
 108     textTracksChange: null,
 109     audioTracksChange: null
 110   }
 111
 112   private uiTextTrackHandled = false
 113
 114   constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
 115     this.vjs = vjs
 116     this.source = source
 117
 118     this.tech = tech;
 119     (this.tech as any).name_ = 'Hlsjs'
 120
 121     this.videoElement = tech.el() as HTMLVideoElement
 122     this.player = vjs((tech.options_ as any).playerId)
 123
 124     this.videoElement.addEventListener('error', event => {
 125       let errorTxt: string
 126       const mediaError = ((event.currentTarget || event.target) as HTMLVideoElement).error
 127
 128       if (!mediaError) return
 129
 130       console.log(mediaError)
 131       switch (mediaError.code) {
 132         case mediaError.MEDIA_ERR_ABORTED:
 133           errorTxt = 'You aborted the video playback'
 134           break
 135         case mediaError.MEDIA_ERR_DECODE:
 136           errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features ' +
 137                      'your browser did not support'
 138           this._handleMediaError(mediaError)
 139           break
 140         case mediaError.MEDIA_ERR_NETWORK:
 141           errorTxt = 'A network error caused the video download to fail part-way'
 142           break
 143         case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
 144           errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported'
 145           break
 146
 147         default:
 148           errorTxt = mediaError.message
 149       }
 150
 151       console.error('MEDIA_ERROR: ', errorTxt)
 152     })
 153
 154     this.initialize()
 155   }
 156
 157   duration () {
 158     return this._duration || this.videoElement.duration || 0
 159   }
 160
 161   seekable () {
 162     if (this.hls.media) {
 163       if (!this.isLive) {
 164         return this.vjs.createTimeRanges(0, this.hls.media.duration)
 165       }
 166
 167       // Video.js doesn't seem to like floating point timeranges
 168       const startTime = Math.round(this.hls.media.duration - this.dvrDuration)
 169       const endTime = Math.round(this.hls.media.duration - this.edgeMargin)
 170
 171       return this.vjs.createTimeRanges(startTime, endTime)
 172     }
 173
 174     return this.vjs.createTimeRanges()
 175   }
 176
 177   // See comment for `initialize` method.
 178   dispose () {
 179     this.videoElement.removeEventListener('play', this.handlers.play)
 180     this.videoElement.removeEventListener('playing', this.handlers.playing)
 181
 182     this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
 183     this.uiTextTrackHandled = false
 184
 185     this.hls.destroy()
 186   }
 187
 188   static addHook (type: string, callback: HookFn) {
 189     Html5Hlsjs.hooks[type] = this.hooks[type] || []
 190     Html5Hlsjs.hooks[type].push(callback)
 191   }
 192
 193   static removeHook (type: string, callback: HookFn) {
 194     if (Html5Hlsjs.hooks[type] === undefined) return false
 195
 196     const index = Html5Hlsjs.hooks[type].indexOf(callback)
 197     if (index === -1) return false
 198
 199     Html5Hlsjs.hooks[type].splice(index, 1)
 200
 201     return true
 202   }
 203
 204   private _executeHooksFor (type: string) {
 205     if (Html5Hlsjs.hooks[type] === undefined) {
 206       return
 207     }
 208
 209     // ES3 and IE < 9
 210     for (let i = 0; i < Html5Hlsjs.hooks[type].length; i++) {
 211       Html5Hlsjs.hooks[type][i](this.player, this.hls)
 212     }
 213   }
 214
 215   private _handleMediaError (error: any) {
 216     if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 1) {
 217       console.info('trying to recover media error')
 218       this.hls.recoverMediaError()
 219       return
 220     }
 221
 222     if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 2) {
 223       console.info('2nd try to recover media error (by swapping audio codec')
 224       this.hls.swapAudioCodec()
 225       this.hls.recoverMediaError()
 226       return
 227     }
 228
 229     if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] > 2) {
 230       console.info('bubbling media error up to VIDEOJS')
 231       this.hls.destroy()
 232       this.tech.error = () => error
 233       this.tech.trigger('error')
 234     }
 235   }
 236
 237   private _handleNetworkError (error: any) {
 238     if (this.errorCounts[Hlsjs.ErrorTypes.NETWORK_ERROR] <= 5) {
 239       console.info('trying to recover network error')
 240
 241       // Wait 1 second and retry
 242       setTimeout(() => this.hls.startLoad(), 1000)
 243
 244       // Reset error count on success
 245       this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
 246         this.errorCounts[Hlsjs.ErrorTypes.NETWORK_ERROR] = 0
 247       })
 248
 249       return
 250     }
 251
 252     console.info('bubbling network error up to VIDEOJS')
 253     this.hls.destroy()
 254     this.tech.error = () => error
 255     this.tech.trigger('error')
 256   }
 257
 258   private _onError (_event: any, data: ErrorData) {
 259     const error: { message: string, code?: number } = {
 260       message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
 261     }
 262
 263     // increment/set error count
 264     if (this.errorCounts[data.type]) this.errorCounts[data.type] += 1
 265     else this.errorCounts[data.type] = 1
 266
 267     if (data.fatal) console.warn(error.message)
 268     else console.error(error.message, data)
 269
 270     if (data.type === Hlsjs.ErrorTypes.NETWORK_ERROR) {
 271       error.code = 2
 272       this._handleNetworkError(error)
 273     } else if (data.fatal && data.type === Hlsjs.ErrorTypes.MEDIA_ERROR && data.details !== 'manifestIncompatibleCodecsError') {
 274       error.code = 3
 275       this._handleMediaError(error)
 276     } else if (data.fatal) {
 277       this.hls.destroy()
 278       console.info('bubbling error up to VIDEOJS')
 279       this.tech.error = () => error as any
 280       this.tech.trigger('error')
 281     }
 282   }
 283
 284   private switchQuality (qualityId: number) {
 285     this.hls.currentLevel = qualityId
 286   }
 287
 288   private _levelLabel (level: Level) {
 289     if (this.player.srOptions_.levelLabelHandler) {
 290       return this.player.srOptions_.levelLabelHandler(level as any)
 291     }
 292
 293     if (level.height) return level.height + 'p'
 294     if (level.width) return Math.round(level.width * 9 / 16) + 'p'
 295     if (level.bitrate) return (level.bitrate / 1000) + 'kbps'
 296
 297     return 0
 298   }
 299
 300   private _relayQualityChange (qualityLevels: QualityLevels) {
 301     // Determine if it is "Auto" (all tracks enabled)
 302     let isAuto = true
 303
 304     for (let i = 0; i < qualityLevels.length; i++) {
 305       if (!qualityLevels[i]._enabled) {
 306         isAuto = false
 307         break
 308       }
 309     }
 310
 311     // Interact with ME
 312     if (isAuto) {
 313       this.hls.currentLevel = -1
 314       return
 315     }
 316
 317     // Find ID of highest enabled track
 318     let selectedTrack: number
 319
 320     for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
 321       if (qualityLevels[selectedTrack]._enabled) {
 322         break
 323       }
 324     }
 325
 326     this.hls.currentLevel = selectedTrack
 327   }
 328
 329   private _handleQualityLevels () {
 330     if (!this.metadata) return
 331
 332     const qualityLevels = this.player.qualityLevels?.()
 333     if (!qualityLevels) return
 334
 335     for (let i = 0; i < this.metadata.levels.length; i++) {
 336       const details = this.metadata.levels[i]
 337       const representation: QualityLevelRepresentation = {
 338         id: i,
 339         width: details.width,
 340         height: details.height,
 341         bandwidth: details.bitrate,
 342         bitrate: details.bitrate,
 343         _enabled: true
 344       }
 345
 346       const self = this
 347       representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) {
 348         // Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on)
 349         if (typeof toggle === 'boolean') {
 350           this[level]._enabled = toggle
 351           self._relayQualityChange(this)
 352         }
 353
 354         return this[level]._enabled
 355       }
 356
 357       qualityLevels.addQualityLevel(representation)
 358     }
 359   }
 360
 361   private _notifyVideoQualities () {
 362     if (!this.metadata) return
 363     const cleanTracklist = []
 364
 365     if (this.metadata.levels.length > 1) {
 366       const autoLevel = {
 367         id: -1,
 368         label: 'auto',
 369         selected: this.hls.manualLevel === -1
 370       }
 371       cleanTracklist.push(autoLevel)
 372     }
 373
 374     this.metadata.levels.forEach((level, index) => {
 375       // Don't write in level (shared reference with Hls.js)
 376       const quality = {
 377         id: index,
 378         selected: index === this.hls.manualLevel,
 379         label: this._levelLabel(level)
 380       }
 381
 382       cleanTracklist.push(quality)
 383     })
 384
 385     const payload = {
 386       qualityData: { video: cleanTracklist },
 387       qualitySwitchCallback: this.switchQuality.bind(this)
 388     }
 389
 390     this.tech.trigger('loadedqualitydata', payload)
 391
 392     // Self-de-register so we don't raise the payload multiple times
 393     this.videoElement.removeEventListener('playing', this.handlers.playing)
 394   }
 395
 396   private _updateSelectedAudioTrack () {
 397     const playerAudioTracks = this.tech.audioTracks()
 398     for (let j = 0; j < playerAudioTracks.length; j++) {
 399       // FIXME: typings
 400       if ((playerAudioTracks[j] as any).enabled) {
 401         this.hls.audioTrack = j
 402         break
 403       }
 404     }
 405   }
 406
 407   private _onAudioTracks () {
 408     const hlsAudioTracks = this.hls.audioTracks
 409     const playerAudioTracks = this.tech.audioTracks()
 410
 411     if (hlsAudioTracks.length > 1 && playerAudioTracks.length === 0) {
 412       // Add Hls.js audio tracks if not added yet
 413       for (let i = 0; i < hlsAudioTracks.length; i++) {
 414         playerAudioTracks.addTrack(new this.vjs.AudioTrack({
 415           id: i.toString(),
 416           kind: 'alternative',
 417           label: hlsAudioTracks[i].name || hlsAudioTracks[i].lang,
 418           language: hlsAudioTracks[i].lang,
 419           enabled: i === this.hls.audioTrack
 420         }))
 421       }
 422
 423       // Handle audio track change event
 424       this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this)
 425       playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange)
 426     }
 427   }
 428
 429   private _getTextTrackLabel (textTrack: TextTrack) {
 430     // Label here is readable label and is optional (used in the UI so if it is there it should be different)
 431     return textTrack.label ? textTrack.label : textTrack.language
 432   }
 433
 434   private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
 435     return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2) &&
 436            track1.kind === track2.kind
 437   }
 438
 439   private _updateSelectedTextTrack () {
 440     const playerTextTracks = this.player.textTracks()
 441     let activeTrack: TextTrack = null
 442
 443     for (let j = 0; j < playerTextTracks.length; j++) {
 444       if (playerTextTracks[j].mode === 'showing') {
 445         activeTrack = playerTextTracks[j]
 446         break
 447       }
 448     }
 449
 450     const hlsjsTracks = this.videoElement.textTracks
 451     for (let k = 0; k < hlsjsTracks.length; k++) {
 452       if (hlsjsTracks[k].kind === 'subtitles' || hlsjsTracks[k].kind === 'captions') {
 453         hlsjsTracks[k].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[k], activeTrack)
 454           ? 'showing'
 455           : 'disabled'
 456       }
 457     }
 458   }
 459
 460   private _startLoad () {
 461     this.hls.startLoad(-1)
 462     this.videoElement.removeEventListener('play', this.handlers.play)
 463   }
 464
 465   private _oneLevelObjClone (obj: { [ id: string ]: any }) {
 466     const result = {}
 467     const objKeys = Object.keys(obj)
 468     for (let i = 0; i < objKeys.length; i++) {
 469       result[objKeys[i]] = obj[objKeys[i]]
 470     }
 471
 472     return result
 473   }
 474
 475   private _filterDisplayableTextTracks (textTracks: TextTrackList) {
 476     const displayableTracks = []
 477
 478     // Filter out tracks that is displayable (captions or subtitles)
 479     for (let idx = 0; idx < textTracks.length; idx++) {
 480       if (textTracks[idx].kind === 'subtitles' || textTracks[idx].kind === 'captions') {
 481         displayableTracks.push(textTracks[idx])
 482       }
 483     }
 484
 485     return displayableTracks
 486   }
 487
 488   private _updateTextTrackList () {
 489     const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks)
 490     const playerTextTracks = this.player.textTracks()
 491
 492     // Add stubs to make the caption switcher shows up
 493     // Adding the Hls.js text track in will make us have double captions
 494     for (let idx = 0; idx < displayableTracks.length; idx++) {
 495       let isAdded = false
 496
 497       for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
 498         if (this._isSameTextTrack(displayableTracks[idx], playerTextTracks[jdx])) {
 499           isAdded = true
 500           break
 501         }
 502       }
 503
 504       if (!isAdded) {
 505         const hlsjsTextTrack = displayableTracks[idx]
 506         this.player.addRemoteTextTrack({
 507           kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind,
 508           label: this._getTextTrackLabel(hlsjsTextTrack),
 509           language: hlsjsTextTrack.language,
 510           srclang: hlsjsTextTrack.language
 511         }, false)
 512       }
 513     }
 514
 515     // Handle UI switching
 516     this._updateSelectedTextTrack()
 517
 518     if (!this.uiTextTrackHandled) {
 519       this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this)
 520       playerTextTracks.addEventListener('change', this.handlers.textTracksChange)
 521
 522       this.uiTextTrackHandled = true
 523     }
 524   }
 525
 526   private _onMetaData (_event: any, data: ManifestLoadedData) {
 527     // This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later
 528     this.metadata = data as any
 529     this._handleQualityLevels()
 530   }
 531
 532   private _createCueHandler (captionConfig: any) {
 533     return {
 534       newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => {
 535         let row: any
 536         let cue: VTTCue
 537         let text: string
 538         const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
 539
 540         for (let r = 0; r < captionScreen.rows.length; r++) {
 541           row = captionScreen.rows[r]
 542           text = ''
 543
 544           if (!row.isEmpty()) {
 545             for (let c = 0; c < row.chars.length; c++) {
 546               text += row.chars[c].ucharj
 547             }
 548
 549             cue = new VTTCue(startTime, endTime, text.trim())
 550
 551             // typeof null === 'object'
 552             if (captionConfig != null && typeof captionConfig === 'object') {
 553               // Copy client overridden property into the cue object
 554               const configKeys = Object.keys(captionConfig)
 555
 556               for (let k = 0; k < configKeys.length; k++) {
 557                 cue[configKeys[k]] = captionConfig[configKeys[k]]
 558               }
 559             }
 560             track.addCue(cue)
 561             if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, ''))
 562           }
 563         }
 564       }
 565     }
 566   }
 567
 568   private _initHlsjs () {
 569     const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
 570     const srOptions_ = this.player.srOptions_
 571
 572     const hlsjsConfigRef = srOptions_?.hlsjsConfig || techOptions.hlsjsConfig
 573     // Hls.js will write to the reference thus change the object for later streams
 574     this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {}
 575
 576     if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) {
 577       this.hlsjsConfig.autoStartLoad = false
 578     }
 579
 580     const captionConfig = srOptions_?.captionConfig || techOptions.captionConfig
 581     if (captionConfig) {
 582       this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
 583     }
 584
 585     // If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above
 586     // That's why we have a separate if block here to set the 'play' listener
 587     if (this.hlsjsConfig.autoStartLoad === false) {
 588       this.handlers.play = this._startLoad.bind(this)
 589       this.videoElement.addEventListener('play', this.handlers.play)
 590     }
 591
 592     // _notifyVideoQualities sometimes runs before the quality picker event handler is registered -> no video switcher
 593     this.handlers.playing = this._notifyVideoQualities.bind(this)
 594     this.videoElement.addEventListener('playing', this.handlers.playing)
 595
 596     this.hls = new Hlsjs(this.hlsjsConfig)
 597
 598     this._executeHooksFor('beforeinitialize')
 599
 600     this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data))
 601     this.hls.on(Hlsjs.Events.AUDIO_TRACKS_UPDATED, () => this._onAudioTracks())
 602     this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data as any)) // FIXME: typings
 603     this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => {
 604       // The DVR plugin will auto seek to "live edge" on start up
 605       if (this.hlsjsConfig.liveSyncDuration) {
 606         this.edgeMargin = this.hlsjsConfig.liveSyncDuration
 607       } else if (this.hlsjsConfig.liveSyncDurationCount) {
 608         this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration
 609       }
 610
 611       this.isLive = data.details.live
 612       this.dvrDuration = data.details.totalduration
 613       this._duration = this.isLive ? Infinity : data.details.totalduration
 614     })
 615     this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
 616       // Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls`
 617       // Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata
 618       this.tech.trigger('loadedmetadata')
 619     })
 620
 621     this.hls.attachMedia(this.videoElement)
 622
 623     this.hls.loadSource(this.source.src)
 624   }
 625
 626   private initialize () {
 627     this._initHlsjs()
 628   }
 629 }
 630
 631 export {
 632   Html5Hlsjs,
 633   registerSourceHandler,
 634   registerConfigPlugin
 635 }