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