// Thanks https://github.com/streamroot/videojs-hlsjs-plugin // We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file import Hlsjs, { ErrorData, HlsConfig, Level, LevelSwitchingData, ManifestParsedData } from 'hls.js' import videojs from 'video.js' import { logger } from '@root-helpers/logger' import { HlsjsConfigHandlerOptions, PeerTubeResolution, VideoJSTechHLS } from '../../types' type ErrorCounts = { [ type: string ]: number } type Metadata = { levels: Level[] } type HookFn = (player: videojs.Player, hljs: Hlsjs) => void const registerSourceHandler = function (vjs: typeof videojs) { if (!Hlsjs.isSupported()) { logger.warn('Hls.js is not supported in this browser!') return } const html5 = vjs.getTech('Html5') if (!html5) { logger.error('No Hml5 tech found in videojs') return } // FIXME: typings (html5 as any).registerSourceHandler({ canHandleSource: function (source: videojs.Tech.SourceObject) { const hlsTypeRE = /^application\/x-mpegURL|application\/vnd\.apple\.mpegurl$/i const hlsExtRE = /\.m3u8/i if (hlsTypeRE.test(source.type)) return 'probably' if (hlsExtRE.test(source.src)) return 'maybe' return '' }, handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) { if (tech.hlsProvider) { tech.hlsProvider.dispose() } tech.hlsProvider = new Html5Hlsjs(vjs, source, tech) return tech.hlsProvider } }, 0); // FIXME: typings (vjs as any).Html5Hlsjs = Html5Hlsjs } function hlsjsConfigHandler (this: videojs.Player, options: HlsjsConfigHandlerOptions) { const player = this if (!options) return if (!player.srOptions_) { player.srOptions_ = {} } if (!player.srOptions_.hlsjsConfig) { player.srOptions_.hlsjsConfig = options.hlsjsConfig } if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) { player.srOptions_.levelLabelHandler = options.levelLabelHandler } } const registerConfigPlugin = function (vjs: typeof videojs) { // Used in Brightcove since we don't pass options directly there const registerVjsPlugin = vjs.registerPlugin || vjs.plugin registerVjsPlugin('hlsjs', hlsjsConfigHandler) } class Html5Hlsjs { private static readonly hooks: { [id: string]: HookFn[] } = {} private readonly videoElement: HTMLVideoElement private readonly errorCounts: ErrorCounts = {} private readonly player: videojs.Player private readonly tech: videojs.Tech private readonly source: videojs.Tech.SourceObject private readonly vjs: typeof videojs private maxNetworkErrorRecovery = 5 private hls: Hlsjs private hlsjsConfig: Partial = null private _duration: number = null private metadata: Metadata = null private isLive: boolean = null private dvrDuration: number = null private edgeMargin: number = null private handlers: { [ id in 'play' ]: EventListener } = { play: null } constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) { this.vjs = vjs this.source = source this.tech = tech; (this.tech as any).name_ = 'Hlsjs' this.videoElement = tech.el() as HTMLVideoElement this.player = vjs((tech.options_ as any).playerId) this.videoElement.addEventListener('error', event => { let errorTxt: string const mediaError = ((event.currentTarget || event.target) as HTMLVideoElement).error if (!mediaError) return logger.info(mediaError) switch (mediaError.code) { case mediaError.MEDIA_ERR_ABORTED: errorTxt = 'You aborted the video playback' break case mediaError.MEDIA_ERR_DECODE: errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features ' + 'your browser did not support' this._handleMediaError(mediaError) break case mediaError.MEDIA_ERR_NETWORK: errorTxt = 'A network error caused the video download to fail part-way' break case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED: errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported' break default: errorTxt = mediaError.message } logger.error(`MEDIA_ERROR: ${errorTxt}`) }) this.initialize() } duration () { if (this._duration === Infinity) return Infinity if (!isNaN(this.videoElement.duration)) return this.videoElement.duration return this._duration || 0 } seekable () { if (this.hls.media) { if (!this.isLive) { return this.vjs.createTimeRanges(0, this.hls.media.duration) } // Video.js doesn't seem to like floating point timeranges const startTime = Math.round(this.hls.media.duration - this.dvrDuration) const endTime = Math.round(this.hls.media.duration - this.edgeMargin) return this.vjs.createTimeRanges(startTime, endTime) } return this.vjs.createTimeRanges() } // See comment for `initialize` method. dispose () { this.videoElement.removeEventListener('play', this.handlers.play) // FIXME: https://github.com/video-dev/hls.js/issues/4092 const untypedHLS = this.hls as any untypedHLS.log = untypedHLS.warn = () => { // empty } this.hls.destroy() } static addHook (type: string, callback: HookFn) { Html5Hlsjs.hooks[type] = this.hooks[type] || [] Html5Hlsjs.hooks[type].push(callback) } static removeHook (type: string, callback: HookFn) { if (Html5Hlsjs.hooks[type] === undefined) return false const index = Html5Hlsjs.hooks[type].indexOf(callback) if (index === -1) return false Html5Hlsjs.hooks[type].splice(index, 1) return true } private _executeHooksFor (type: string) { if (Html5Hlsjs.hooks[type] === undefined) { return } // ES3 and IE < 9 for (let i = 0; i < Html5Hlsjs.hooks[type].length; i++) { Html5Hlsjs.hooks[type][i](this.player, this.hls) } } private _getHumanErrorMsg (error: { message: string, code?: number }) { switch (error.code) { default: return error.message } } private _handleUnrecovarableError (error: any) { if (this.hls.levels.filter(l => l.id > -1).length > 1) { this._removeQuality(this.hls.loadLevel) return } this.hls.destroy() logger.info('bubbling error up to VIDEOJS') this.tech.error = () => ({ ...error, message: this._getHumanErrorMsg(error) }) this.tech.trigger('error') } private _handleMediaError (error: any) { if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 1) { logger.info('trying to recover media error') this.hls.recoverMediaError() return } if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 2) { logger.info('2nd try to recover media error (by swapping audio codec') this.hls.swapAudioCodec() this.hls.recoverMediaError() return } if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] > 2) { this._handleUnrecovarableError(error) } } private _handleNetworkError (error: any) { if (navigator.onLine === false) return if (this.errorCounts[Hlsjs.ErrorTypes.NETWORK_ERROR] <= this.maxNetworkErrorRecovery) { logger.info('trying to recover network error') // Wait 1 second and retry setTimeout(() => this.hls.startLoad(), 1000) // Reset error count on success this.hls.once(Hlsjs.Events.FRAG_LOADED, () => { this.errorCounts[Hlsjs.ErrorTypes.NETWORK_ERROR] = 0 }) return } this._handleUnrecovarableError(error) } private _onError (_event: any, data: ErrorData) { const error: { message: string, code?: number } = { message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}` } // increment/set error count if (this.errorCounts[data.type]) this.errorCounts[data.type] += 1 else this.errorCounts[data.type] = 1 if (data.fatal) logger.error(error.message, { currentTime: this.player.currentTime(), data }) else logger.warn(error.message) if (data.type === Hlsjs.ErrorTypes.NETWORK_ERROR) { error.code = 2 this._handleNetworkError(error) } else if (data.fatal && data.type === Hlsjs.ErrorTypes.MEDIA_ERROR && data.details !== 'manifestIncompatibleCodecsError') { error.code = 3 this._handleMediaError(error) } else if (data.fatal) { this._handleUnrecovarableError(error) } } private buildLevelLabel (level: Level) { if (this.player.srOptions_.levelLabelHandler) { return this.player.srOptions_.levelLabelHandler(level as any) } if (level.height) return level.height + 'p' if (level.width) return Math.round(level.width * 9 / 16) + 'p' if (level.bitrate) return (level.bitrate / 1000) + 'kbps' return '0' } private _removeQuality (index: number) { this.hls.removeLevel(index) this.player.peertubeResolutions().remove(index) this.hls.currentLevel = -1 } private _notifyVideoQualities () { if (!this.metadata) return const resolutions: PeerTubeResolution[] = [] this.metadata.levels.forEach((level, index) => { resolutions.push({ id: index, height: level.height, width: level.width, bitrate: level.bitrate, label: this.buildLevelLabel(level), selected: level.id === this.hls.manualLevel, selectCallback: () => { this.hls.currentLevel = index } }) }) resolutions.push({ id: -1, label: this.player.localize('Auto'), selected: true, selectCallback: () => this.hls.currentLevel = -1 }) this.player.peertubeResolutions().add(resolutions) } private _startLoad () { this.hls.startLoad(-1) this.videoElement.removeEventListener('play', this.handlers.play) } private _oneLevelObjClone (obj: { [ id: string ]: any }) { const result: { [id: string]: any } = {} const objKeys = Object.keys(obj) for (let i = 0; i < objKeys.length; i++) { result[objKeys[i]] = obj[objKeys[i]] } return result } private _onMetaData (_event: any, data: ManifestParsedData) { // This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later this.metadata = data this._notifyVideoQualities() } private _initHlsjs () { const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions const srOptions_ = this.player.srOptions_ const hlsjsConfigRef = srOptions_?.hlsjsConfig || techOptions.hlsjsConfig // Hls.js will write to the reference thus change the object for later streams this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {} if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) { this.hlsjsConfig.autoStartLoad = false } // If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above // That's why we have a separate if block here to set the 'play' listener if (this.hlsjsConfig.autoStartLoad === false) { this.handlers.play = this._startLoad.bind(this) this.videoElement.addEventListener('play', this.handlers.play) } this.hls = new Hlsjs(this.hlsjsConfig) this._executeHooksFor('beforeinitialize') this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data)) this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data)) this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => { // The DVR plugin will auto seek to "live edge" on start up if (this.hlsjsConfig.liveSyncDuration) { this.edgeMargin = this.hlsjsConfig.liveSyncDuration } else if (this.hlsjsConfig.liveSyncDurationCount) { this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration } this.isLive = data.details.live this.dvrDuration = data.details.totalduration this._duration = this.isLive ? Infinity : data.details.totalduration // Increase network error recovery for lives since they can be broken (server restart, stream interruption etc) if (this.isLive) this.maxNetworkErrorRecovery = 30 }) this.hls.once(Hlsjs.Events.FRAG_LOADED, () => { // Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls` // Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata this.tech.trigger('loadedmetadata') }) this.hls.on(Hlsjs.Events.LEVEL_SWITCHING, (_e, data: LevelSwitchingData) => { const resolutionId = this.hls.autoLevelEnabled ? -1 : data.level const autoResolutionChosenId = this.hls.autoLevelEnabled ? data.level : -1 this.player.peertubeResolutions().select({ id: resolutionId, autoResolutionChosenId, byEngine: true }) }) this.hls.attachMedia(this.videoElement) this.hls.loadSource(this.source.src) } private initialize () { this._initHlsjs() } } export { Html5Hlsjs, registerSourceHandler, registerConfigPlugin }