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