// 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 * as Hlsjs from 'hls.js/dist/hls.light.js'
+import Hlsjs, { ErrorData, HlsConfig, Level, LevelSwitchingData, ManifestParsedData } from 'hls.js'
import videojs from 'video.js'
-import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
+import { HlsjsConfigHandlerOptions, PeerTubeResolution, VideoJSTechHLS } from '../peertube-videojs-typings'
type ErrorCounts = {
[ type: string ]: number
}
type Metadata = {
- levels: Hlsjs.Level[]
+ levels: Level[]
}
-type CustomAudioTrack = Hlsjs.HlsAudioTrack & { name?: string, lang?: string }
+type HookFn = (player: videojs.Player, hljs: Hlsjs) => void
const registerSourceHandler = function (vjs: typeof videojs) {
if (!Hlsjs.isSupported()) {
player.srOptions_.hlsjsConfig = options.hlsjsConfig
}
- if (!player.srOptions_.captionConfig) {
- player.srOptions_.captionConfig = options.captionConfig
- }
-
if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
player.srOptions_.levelLabelHandler = options.levelLabelHandler
}
}
class Html5Hlsjs {
- private static readonly hooks: { [id: string]: Function[] } = {}
+ private static readonly hooks: { [id: string]: HookFn[] } = {}
private readonly videoElement: HTMLVideoElement
private readonly errorCounts: ErrorCounts = {}
private readonly source: videojs.Tech.SourceObject
private readonly vjs: typeof videojs
- private hls: Hlsjs & { manualLevel?: number, audioTrack?: any, audioTracks?: CustomAudioTrack[] } // FIXME: typings
- private hlsjsConfig: Partial<Hlsjs.Config & { cueHandler: any }> = null
+ private maxNetworkErrorRecovery = 5
+
+ private hls: Hlsjs
+ private hlsjsConfig: Partial<HlsConfig & { cueHandler: any }> = null
private _duration: number = null
private metadata: Metadata = null
private dvrDuration: number = null
private edgeMargin: number = null
- private handlers: { [ id in 'play' | 'addtrack' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = {
- play: null,
- addtrack: null,
- playing: null,
- textTracksChange: null,
- audioTracksChange: null
+ private handlers: { [ id in 'play' ]: EventListener } = {
+ play: null
}
- private uiTextTrackHandled = false
-
constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
this.vjs = vjs
this.source = source
this.videoElement.addEventListener('error', event => {
let errorTxt: string
- const mediaError = (event.currentTarget as HTMLVideoElement).error
+ const mediaError = ((event.currentTarget || event.target) as HTMLVideoElement).error
+ if (!mediaError) return
+
+ console.log(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'
+ 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:
}
duration () {
- return this._duration || this.videoElement.duration || 0
+ if (this._duration === Infinity) return Infinity
+ if (!isNaN(this.videoElement.duration)) return this.videoElement.duration
+
+ return this._duration || 0
}
seekable () {
// See comment for `initialize` method.
dispose () {
this.videoElement.removeEventListener('play', this.handlers.play)
- this.videoElement.textTracks.removeEventListener('addtrack', this.handlers.addtrack)
- this.videoElement.removeEventListener('playing', this.handlers.playing)
- this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
- this.uiTextTrackHandled = false
+ // 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: Function) {
- Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || []
- Html5Hlsjs.hooks[ type ].push(callback)
+ static addHook (type: string, callback: HookFn) {
+ Html5Hlsjs.hooks[type] = this.hooks[type] || []
+ Html5Hlsjs.hooks[type].push(callback)
}
- static removeHook (type: string, callback: Function) {
- if (Html5Hlsjs.hooks[ type ] === undefined) return false
+ static removeHook (type: string, callback: HookFn) {
+ if (Html5Hlsjs.hooks[type] === undefined) return false
- const index = Html5Hlsjs.hooks[ type ].indexOf(callback)
+ const index = Html5Hlsjs.hooks[type].indexOf(callback)
if (index === -1) return false
- Html5Hlsjs.hooks[ type ].splice(index, 1)
+ Html5Hlsjs.hooks[type].splice(index, 1)
return true
}
private _executeHooksFor (type: string) {
- if (Html5Hlsjs.hooks[ type ] === undefined) {
+ 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)
+ for (let i = 0; i < Html5Hlsjs.hooks[type].length; i++) {
+ Html5Hlsjs.hooks[type][i](this.player, this.hls)
}
}
private _handleMediaError (error: any) {
- if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) {
+ if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 1) {
console.info('trying to recover media error')
this.hls.recoverMediaError()
return
}
- if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) {
+ if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] === 2) {
console.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) {
+ if (this.errorCounts[Hlsjs.ErrorTypes.MEDIA_ERROR] > 2) {
console.info('bubbling media error up to VIDEOJS')
this.hls.destroy()
this.tech.error = () => error
this.tech.trigger('error')
+ }
+ }
+
+ private _handleNetworkError (error: any) {
+ if (this.errorCounts[Hlsjs.ErrorTypes.NETWORK_ERROR] <= this.maxNetworkErrorRecovery) {
+ console.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
}
+
+ console.info('bubbling network error up to VIDEOJS')
+ this.hls.destroy()
+ this.tech.error = () => error
+ this.tech.trigger('error')
}
- private _onError (_event: any, data: Hlsjs.errorData) {
+ private _onError (_event: any, data: ErrorData) {
const error: { message: string, code?: number } = {
message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
}
- console.error(error.message)
// increment/set error count
- if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1
- else this.errorCounts[ data.type ] = 1
+ if (this.errorCounts[data.type]) this.errorCounts[data.type] += 1
+ else this.errorCounts[data.type] = 1
- if (!data.fatal) return
+ if (data.fatal) console.warn(error.message)
+ else console.error(error.message, data)
if (data.type === Hlsjs.ErrorTypes.NETWORK_ERROR) {
- console.info('bubbling network error up to VIDEOJS')
error.code = 2
- this.tech.error = () => error as any
- this.tech.trigger('error')
- } else if (data.type === Hlsjs.ErrorTypes.MEDIA_ERROR && data.details !== 'manifestIncompatibleCodecsError') {
+ this._handleNetworkError(error)
+ } else if (data.fatal && data.type === Hlsjs.ErrorTypes.MEDIA_ERROR && data.details !== 'manifestIncompatibleCodecsError') {
error.code = 3
this._handleMediaError(error)
- } else {
+ } else if (data.fatal) {
this.hls.destroy()
console.info('bubbling error up to VIDEOJS')
this.tech.error = () => error as any
}
}
- private switchQuality (qualityId: number) {
- this.hls.nextLevel = qualityId
- }
-
- private _levelLabel (level: Hlsjs.Level) {
+ private buildLevelLabel (level: Level) {
if (this.player.srOptions_.levelLabelHandler) {
- return this.player.srOptions_.levelLabelHandler(level)
+ 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 _relayQualityChange (qualityLevels: QualityLevels) {
- // Determine if it is "Auto" (all tracks enabled)
- let isAuto = true
-
- for (let i = 0; i < qualityLevels.length; i++) {
- if (!qualityLevels[ i ]._enabled) {
- isAuto = false
- break
- }
- }
-
- // Interact with ME
- if (isAuto) {
- this.hls.currentLevel = -1
- return
- }
-
- // Find ID of highest enabled track
- let selectedTrack: number
-
- for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
- if (qualityLevels[ selectedTrack ]._enabled) {
- break
- }
- }
-
- this.hls.currentLevel = selectedTrack
- }
-
- private _handleQualityLevels () {
- if (!this.metadata) return
-
- const qualityLevels = this.player.qualityLevels && this.player.qualityLevels()
- if (!qualityLevels) return
-
- for (let i = 0; i < this.metadata.levels.length; i++) {
- const details = this.metadata.levels[ i ]
- const representation: QualityLevelRepresentation = {
- id: i,
- width: details.width,
- height: details.height,
- bandwidth: details.bitrate,
- bitrate: details.bitrate,
- _enabled: true
- }
-
- const self = this
- representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) {
- // Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on)
- if (typeof toggle === 'boolean') {
- this[ level ]._enabled = toggle
- self._relayQualityChange(this)
- }
-
- return this[ level ]._enabled
- }
-
- qualityLevels.addQualityLevel(representation)
- }
+ return '0'
}
private _notifyVideoQualities () {
if (!this.metadata) return
- const cleanTracklist = []
- if (this.metadata.levels.length > 1) {
- const autoLevel = {
- id: -1,
- label: 'auto',
- selected: this.hls.manualLevel === -1
- }
- cleanTracklist.push(autoLevel)
- }
+ const resolutions: PeerTubeResolution[] = []
this.metadata.levels.forEach((level, index) => {
- // Don't write in level (shared reference with Hls.js)
- const quality = {
+ resolutions.push({
id: index,
- selected: index === this.hls.manualLevel,
- label: this._levelLabel(level)
- }
-
- cleanTracklist.push(quality)
+ height: level.height,
+ width: level.width,
+ bitrate: level.bitrate,
+ label: this.buildLevelLabel(level),
+ selected: level.id === this.hls.manualLevel,
+
+ selectCallback: () => {
+ this.hls.currentLevel = index
+ }
+ })
})
- const payload = {
- qualityData: { video: cleanTracklist },
- qualitySwitchCallback: this.switchQuality.bind(this)
- }
-
- this.tech.trigger('loadedqualitydata', payload)
-
- // Self-de-register so we don't raise the payload multiple times
- this.videoElement.removeEventListener('playing', this.handlers.playing)
- }
-
- private _updateSelectedAudioTrack () {
- const playerAudioTracks = this.tech.audioTracks()
- for (let j = 0; j < playerAudioTracks.length; j++) {
- // FIXME: typings
- if ((playerAudioTracks[ j ] as any).enabled) {
- this.hls.audioTrack = j
- break
- }
- }
- }
-
- private _onAudioTracks () {
- const hlsAudioTracks = this.hls.audioTracks
- const playerAudioTracks = this.tech.audioTracks()
-
- if (hlsAudioTracks.length > 1 && playerAudioTracks.length === 0) {
- // Add Hls.js audio tracks if not added yet
- for (let i = 0; i < hlsAudioTracks.length; i++) {
- playerAudioTracks.addTrack(new this.vjs.AudioTrack({
- id: i.toString(),
- kind: 'alternative',
- label: hlsAudioTracks[ i ].name || hlsAudioTracks[ i ].lang,
- language: hlsAudioTracks[ i ].lang,
- enabled: i === this.hls.audioTrack
- }))
- }
-
- // Handle audio track change event
- this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this)
- playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange)
- }
- }
-
- private _getTextTrackLabel (textTrack: TextTrack) {
- // Label here is readable label and is optional (used in the UI so if it is there it should be different)
- return textTrack.label ? textTrack.label : textTrack.language
- }
-
- private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
- return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2)
- && track1.kind === track2.kind
- }
-
- private _updateSelectedTextTrack () {
- const playerTextTracks = this.player.textTracks()
- let activeTrack: TextTrack = null
-
- for (let j = 0; j < playerTextTracks.length; j++) {
- if (playerTextTracks[ j ].mode === 'showing') {
- activeTrack = playerTextTracks[ j ]
- break
- }
- }
+ resolutions.push({
+ id: -1,
+ label: this.player.localize('Auto'),
+ selected: true,
+ selectCallback: () => this.hls.currentLevel = -1
+ })
- const hlsjsTracks = this.videoElement.textTracks
- for (let k = 0; k < hlsjsTracks.length; k++) {
- if (hlsjsTracks[ k ].kind === 'subtitles' || hlsjsTracks[ k ].kind === 'captions') {
- hlsjsTracks[ k ].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[ k ], activeTrack)
- ? 'showing'
- : 'disabled'
- }
- }
+ this.player.peertubeResolutions().add(resolutions)
}
private _startLoad () {
this.videoElement.removeEventListener('play', this.handlers.play)
}
- private _oneLevelObjClone (obj: object) {
+ private _oneLevelObjClone (obj: { [ id: string ]: any }) {
const result = {}
const objKeys = Object.keys(obj)
for (let i = 0; i < objKeys.length; i++) {
- result[ objKeys[ i ] ] = obj[ objKeys[ i ] ]
+ result[objKeys[i]] = obj[objKeys[i]]
}
return result
}
- private _filterDisplayableTextTracks (textTracks: TextTrackList) {
- const displayableTracks = []
-
- // Filter out tracks that is displayable (captions or subtitles)
- for (let idx = 0; idx < textTracks.length; idx++) {
- if (textTracks[ idx ].kind === 'subtitles' || textTracks[ idx ].kind === 'captions') {
- displayableTracks.push(textTracks[ idx ])
- }
- }
-
- return displayableTracks
- }
-
- private _updateTextTrackList () {
- const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks)
- const playerTextTracks = this.player.textTracks()
-
- // Add stubs to make the caption switcher shows up
- // Adding the Hls.js text track in will make us have double captions
- for (let idx = 0; idx < displayableTracks.length; idx++) {
- let isAdded = false
-
- for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
- if (this._isSameTextTrack(displayableTracks[ idx ], playerTextTracks[ jdx ])) {
- isAdded = true
- break
- }
- }
-
- if (!isAdded) {
- const hlsjsTextTrack = displayableTracks[ idx ]
- this.player.addRemoteTextTrack({
- kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind,
- label: this._getTextTrackLabel(hlsjsTextTrack),
- language: hlsjsTextTrack.language,
- srclang: hlsjsTextTrack.language
- }, false)
- }
- }
-
- // Handle UI switching
- this._updateSelectedTextTrack()
-
- if (!this.uiTextTrackHandled) {
- this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this)
- playerTextTracks.addEventListener('change', this.handlers.textTracksChange)
-
- this.uiTextTrackHandled = true
- }
- }
-
- private _onMetaData (_event: any, data: Hlsjs.manifestLoadedData) {
+ 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 as any
- this._handleQualityLevels()
- }
-
- private _createCueHandler (captionConfig: any) {
- return {
- newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => {
- let row: any
- let cue: VTTCue
- let text: string
- const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
-
- for (let r = 0; r < captionScreen.rows.length; r++) {
- row = captionScreen.rows[ r ]
- text = ''
-
- if (!row.isEmpty()) {
- for (let c = 0; c < row.chars.length; c++) {
- text += row.chars[ c ].ucharj
- }
-
- cue = new VTTCue(startTime, endTime, text.trim())
-
- // typeof null === 'object'
- if (captionConfig != null && typeof captionConfig === 'object') {
- // Copy client overridden property into the cue object
- const configKeys = Object.keys(captionConfig)
-
- for (let k = 0; k < configKeys.length; k++) {
- cue[ configKeys[ k ] ] = captionConfig[ configKeys[ k ] ]
- }
- }
- track.addCue(cue)
- if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, ''))
- }
- }
- }
- }
+ this.metadata = data
+ this._notifyVideoQualities()
}
private _initHlsjs () {
const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
const srOptions_ = this.player.srOptions_
- const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig
+ 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) : {}
this.hlsjsConfig.autoStartLoad = false
}
- const captionConfig = srOptions_ && srOptions_.captionConfig || techOptions.captionConfig
- if (captionConfig) {
- this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
- }
-
// 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.videoElement.addEventListener('play', this.handlers.play)
}
- // _notifyVideoQualities sometimes runs before the quality picker event handler is registered -> no video switcher
- this.handlers.playing = this._notifyVideoQualities.bind(this)
- this.videoElement.addEventListener('playing', this.handlers.playing)
-
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.AUDIO_TRACKS_UPDATED, () => this._onAudioTracks())
- this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data as any)) // FIXME: typings
+ 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.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 = 300
})
+
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.attachMedia(this.videoElement)
+ 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.handlers.addtrack = this._updateTextTrackList.bind(this)
- this.videoElement.textTracks.addEventListener('addtrack', this.handlers.addtrack)
+ this.player.peertubeResolutions().select({ id: resolutionId, autoResolutionChosenId, byEngine: true })
+ })
+
+ this.hls.attachMedia(this.videoElement)
this.hls.loadSource(this.source.src)
}
projects / github / Chocobozzz / PeerTube.git / blobdiff