diff options
author | Chocobozzz <me@florianbigard.com> | 2021-08-03 11:51:49 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-08-05 10:57:49 +0200 |
commit | 3e254de8bef59e4e25b74d1b0fde07de29654ada (patch) | |
tree | 9496e386f499701e53b531f92994045f0eea93da /client/src/assets/player | |
parent | ff4de38385049bf8f6e1d76d8511854fcfabc71c (diff) | |
download | PeerTube-3e254de8bef59e4e25b74d1b0fde07de29654ada.tar.gz PeerTube-3e254de8bef59e4e25b74d1b0fde07de29654ada.tar.zst PeerTube-3e254de8bef59e4e25b74d1b0fde07de29654ada.zip |
HLS v1 support
Diffstat (limited to 'client/src/assets/player')
7 files changed, 58 insertions, 46 deletions
diff --git a/client/src/assets/player/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/p2p-media-loader/hls-plugin.ts index 53969a5a5..3050110cd 100644 --- a/client/src/assets/player/p2p-media-loader/hls-plugin.ts +++ b/client/src/assets/player/p2p-media-loader/hls-plugin.ts | |||
@@ -264,20 +264,16 @@ class Html5Hlsjs { | |||
264 | if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1 | 264 | if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1 |
265 | else this.errorCounts[ data.type ] = 1 | 265 | else this.errorCounts[ data.type ] = 1 |
266 | 266 | ||
267 | if (!data.fatal) { | 267 | if (data.fatal) console.warn(error.message) |
268 | console.warn(error.message) | 268 | else console.error(error.message, data) |
269 | return | ||
270 | } | ||
271 | |||
272 | console.error(error.message) | ||
273 | 269 | ||
274 | if (data.type === Hlsjs.ErrorTypes.NETWORK_ERROR) { | 270 | if (data.type === Hlsjs.ErrorTypes.NETWORK_ERROR) { |
275 | error.code = 2 | 271 | error.code = 2 |
276 | this._handleNetworkError(error) | 272 | this._handleNetworkError(error) |
277 | } else if (data.type === Hlsjs.ErrorTypes.MEDIA_ERROR && data.details !== 'manifestIncompatibleCodecsError') { | 273 | } else if (data.fatal && data.type === Hlsjs.ErrorTypes.MEDIA_ERROR && data.details !== 'manifestIncompatibleCodecsError') { |
278 | error.code = 3 | 274 | error.code = 3 |
279 | this._handleMediaError(error) | 275 | this._handleMediaError(error) |
280 | } else { | 276 | } else if (data.fatal) { |
281 | this.hls.destroy() | 277 | this.hls.destroy() |
282 | console.info('bubbling error up to VIDEOJS') | 278 | console.info('bubbling error up to VIDEOJS') |
283 | this.tech.error = () => error as any | 279 | this.tech.error = () => error as any |
@@ -286,12 +282,12 @@ class Html5Hlsjs { | |||
286 | } | 282 | } |
287 | 283 | ||
288 | private switchQuality (qualityId: number) { | 284 | private switchQuality (qualityId: number) { |
289 | this.hls.nextLevel = qualityId | 285 | this.hls.currentLevel = qualityId |
290 | } | 286 | } |
291 | 287 | ||
292 | private _levelLabel (level: Hlsjs.Level) { | 288 | private _levelLabel (level: Hlsjs.Level) { |
293 | if (this.player.srOptions_.levelLabelHandler) { | 289 | if (this.player.srOptions_.levelLabelHandler) { |
294 | return this.player.srOptions_.levelLabelHandler(level) | 290 | return this.player.srOptions_.levelLabelHandler(level as any) |
295 | } | 291 | } |
296 | 292 | ||
297 | if (level.height) return level.height + 'p' | 293 | if (level.height) return level.height + 'p' |
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts index 2eb849d2b..093795e48 100644 --- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts +++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts | |||
@@ -1,7 +1,7 @@ | |||
1 | import * as Hlsjs from 'hls.js/dist/hls.light.js' | 1 | import * as Hlsjs from 'hls.js/dist/hls.light.js' |
2 | import { Events, Segment } from 'p2p-media-loader-core' | ||
3 | import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs' | ||
4 | import videojs from 'video.js' | 2 | import videojs from 'video.js' |
3 | import { Events, Segment } from '@peertube/p2p-media-loader-core' | ||
4 | import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from '@peertube/p2p-media-loader-hlsjs' | ||
5 | import { timeToInt } from '@shared/core-utils' | 5 | import { timeToInt } from '@shared/core-utils' |
6 | import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings' | 6 | import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings' |
7 | import { registerConfigPlugin, registerSourceHandler } from './hls-plugin' | 7 | import { registerConfigPlugin, registerSourceHandler } from './hls-plugin' |
@@ -36,9 +36,6 @@ class P2pMediaLoaderPlugin extends Plugin { | |||
36 | 36 | ||
37 | private networkInfoInterval: any | 37 | private networkInfoInterval: any |
38 | 38 | ||
39 | private hlsjsCurrentLevel: number | ||
40 | private hlsjsLevels: Hlsjs.Level[] | ||
41 | |||
42 | constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) { | 39 | constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) { |
43 | super(player) | 40 | super(player) |
44 | 41 | ||
@@ -88,13 +85,12 @@ class P2pMediaLoaderPlugin extends Plugin { | |||
88 | } | 85 | } |
89 | 86 | ||
90 | getCurrentLevel () { | 87 | getCurrentLevel () { |
91 | return this.hlsjsLevels.find(l => l.level === this.hlsjsCurrentLevel) | 88 | return this.hlsjs.levels[this.hlsjs.currentLevel] |
92 | } | 89 | } |
93 | 90 | ||
94 | getLiveLatency () { | 91 | getLiveLatency () { |
95 | return undefined as number | 92 | // FIXME: typings |
96 | // FIXME: Use latency when hls >= V1 | 93 | return Math.round((this.hlsjs as any).latency) |
97 | // return this.hlsjs.latency | ||
98 | } | 94 | } |
99 | 95 | ||
100 | getHLSJS () { | 96 | getHLSJS () { |
@@ -140,31 +136,23 @@ class P2pMediaLoaderPlugin extends Plugin { | |||
140 | } | 136 | } |
141 | 137 | ||
142 | private runStats () { | 138 | private runStats () { |
143 | this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => { | 139 | this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, _segment, bytes: number) => { |
144 | const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes | 140 | const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes |
145 | 141 | ||
146 | elem.pendingDownload.push(size) | 142 | elem.pendingDownload.push(bytes) |
147 | elem.totalDownload += size | 143 | elem.totalDownload += bytes |
148 | }) | 144 | }) |
149 | 145 | ||
150 | this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => { | 146 | this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, _segment, bytes: number) => { |
151 | const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes | 147 | const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes |
152 | 148 | ||
153 | elem.pendingUpload.push(size) | 149 | elem.pendingUpload.push(bytes) |
154 | elem.totalUpload += size | 150 | elem.totalUpload += bytes |
155 | }) | 151 | }) |
156 | 152 | ||
157 | this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++) | 153 | this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++) |
158 | this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--) | 154 | this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--) |
159 | 155 | ||
160 | this.hlsjs.on(Hlsjs.Events.MANIFEST_PARSED, (_e, manifest) => { | ||
161 | this.hlsjsCurrentLevel = manifest.firstLevel | ||
162 | this.hlsjsLevels = manifest.levels | ||
163 | }) | ||
164 | this.hlsjs.on(Hlsjs.Events.LEVEL_LOADED, (_e, level) => { | ||
165 | this.hlsjsCurrentLevel = level.levelId || (level as any).id | ||
166 | }) | ||
167 | |||
168 | this.networkInfoInterval = setInterval(() => { | 156 | this.networkInfoInterval = setInterval(() => { |
169 | const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload) | 157 | const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload) |
170 | const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload) | 158 | const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload) |
diff --git a/client/src/assets/player/p2p-media-loader/segment-url-builder.ts b/client/src/assets/player/p2p-media-loader/segment-url-builder.ts index 039777cea..ad0e460ae 100644 --- a/client/src/assets/player/p2p-media-loader/segment-url-builder.ts +++ b/client/src/assets/player/p2p-media-loader/segment-url-builder.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { Segment } from 'p2p-media-loader-core' | 1 | import { Segment } from '@peertube/p2p-media-loader-core' |
2 | import { RedundancyUrlManager } from './redundancy-url-manager' | 2 | import { RedundancyUrlManager } from './redundancy-url-manager' |
3 | 3 | ||
4 | function segmentUrlBuilderFactory (redundancyUrlManager: RedundancyUrlManager) { | 4 | function segmentUrlBuilderFactory (redundancyUrlManager: RedundancyUrlManager) { |
diff --git a/client/src/assets/player/p2p-media-loader/segment-validator.ts b/client/src/assets/player/p2p-media-loader/segment-validator.ts index 4a0caec5e..a28474793 100644 --- a/client/src/assets/player/p2p-media-loader/segment-validator.ts +++ b/client/src/assets/player/p2p-media-loader/segment-validator.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import { wait } from '@root-helpers/utils' | 1 | import { wait } from '@root-helpers/utils' |
2 | import { Segment } from 'p2p-media-loader-core' | 2 | import { Segment } from '@peertube/p2p-media-loader-core' |
3 | import { basename } from 'path' | 3 | import { basename } from 'path' |
4 | 4 | ||
5 | type SegmentsJSON = { [filename: string]: string | { [byterange: string]: string } } | 5 | type SegmentsJSON = { [filename: string]: string | { [byterange: string]: string } } |
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 766ad203e..c45e8f53e 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts | |||
@@ -22,6 +22,7 @@ import './videojs-components/settings-panel-child' | |||
22 | import './videojs-components/theater-button' | 22 | import './videojs-components/theater-button' |
23 | import './playlist/playlist-plugin' | 23 | import './playlist/playlist-plugin' |
24 | import videojs from 'video.js' | 24 | import videojs from 'video.js' |
25 | import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs' | ||
25 | import { PluginsManager } from '@root-helpers/plugins-manager' | 26 | import { PluginsManager } from '@root-helpers/plugins-manager' |
26 | import { buildVideoLink, decorateVideoLink } from '@shared/core-utils' | 27 | import { buildVideoLink, decorateVideoLink } from '@shared/core-utils' |
27 | import { isDefaultLocale } from '@shared/core-utils/i18n' | 28 | import { isDefaultLocale } from '@shared/core-utils/i18n' |
@@ -30,11 +31,12 @@ import { copyToClipboard } from '../../root-helpers/utils' | |||
30 | import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' | 31 | import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' |
31 | import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder' | 32 | import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder' |
32 | import { segmentValidatorFactory } from './p2p-media-loader/segment-validator' | 33 | import { segmentValidatorFactory } from './p2p-media-loader/segment-validator' |
33 | import { getStoredP2PEnabled } from './peertube-player-local-storage' | 34 | import { getAverageBandwidthInStore, getStoredP2PEnabled, saveAverageBandwidth } from './peertube-player-local-storage' |
34 | import { | 35 | import { |
35 | NextPreviousVideoButtonOptions, | 36 | NextPreviousVideoButtonOptions, |
36 | P2PMediaLoaderPluginOptions, | 37 | P2PMediaLoaderPluginOptions, |
37 | PeerTubeLinkButtonOptions, | 38 | PeerTubeLinkButtonOptions, |
39 | PlayerNetworkInfo, | ||
38 | PlaylistPluginOptions, | 40 | PlaylistPluginOptions, |
39 | UserWatching, | 41 | UserWatching, |
40 | VideoJSCaption, | 42 | VideoJSCaption, |
@@ -148,7 +150,7 @@ export class PeertubePlayerManager { | |||
148 | if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin') | 150 | if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin') |
149 | if (mode === 'p2p-media-loader') { | 151 | if (mode === 'p2p-media-loader') { |
150 | [ p2pMediaLoader ] = await Promise.all([ | 152 | [ p2pMediaLoader ] = await Promise.all([ |
151 | import('p2p-media-loader-hlsjs'), | 153 | import('@peertube/p2p-media-loader-hlsjs'), |
152 | import('./p2p-media-loader/p2p-media-loader-plugin') | 154 | import('./p2p-media-loader/p2p-media-loader-plugin') |
153 | ]) | 155 | ]) |
154 | } | 156 | } |
@@ -193,6 +195,12 @@ export class PeertubePlayerManager { | |||
193 | mode | 195 | mode |
194 | }) | 196 | }) |
195 | 197 | ||
198 | player.on('p2pInfo', (_, data: PlayerNetworkInfo) => { | ||
199 | if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return | ||
200 | |||
201 | saveAverageBandwidth(data.bandwidthEstimate) | ||
202 | }) | ||
203 | |||
196 | return res(player) | 204 | return res(player) |
197 | }) | 205 | }) |
198 | }) | 206 | }) |
@@ -359,12 +367,13 @@ export class PeertubePlayerManager { | |||
359 | consumeOnly = true | 367 | consumeOnly = true |
360 | } | 368 | } |
361 | 369 | ||
362 | const p2pMediaLoaderConfig = { | 370 | const p2pMediaLoaderConfig: HlsJsEngineSettings = { |
363 | loader: { | 371 | loader: { |
364 | trackerAnnounce, | 372 | trackerAnnounce, |
365 | segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url, options.common.isLive), | 373 | segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url, options.common.isLive), |
366 | rtcConfig: getRtcConfig(), | 374 | rtcConfig: getRtcConfig(), |
367 | requiredSegmentsPriority: 1, | 375 | requiredSegmentsPriority: 1, |
376 | simultaneousHttpDownloads: 1, | ||
368 | segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager), | 377 | segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager), |
369 | useP2P: getStoredP2PEnabled(), | 378 | useP2P: getStoredP2PEnabled(), |
370 | consumeOnly | 379 | consumeOnly |
@@ -373,6 +382,7 @@ export class PeertubePlayerManager { | |||
373 | swarmId: p2pMediaLoaderOptions.playlistUrl | 382 | swarmId: p2pMediaLoaderOptions.playlistUrl |
374 | } | 383 | } |
375 | } | 384 | } |
385 | |||
376 | const hlsjs = { | 386 | const hlsjs = { |
377 | levelLabelHandler: (level: { height: number, width: number }) => { | 387 | levelLabelHandler: (level: { height: number, width: number }) => { |
378 | const resolution = Math.min(level.height || 0, level.width || 0) | 388 | const resolution = Math.min(level.height || 0, level.width || 0) |
@@ -387,12 +397,7 @@ export class PeertubePlayerManager { | |||
387 | return label | 397 | return label |
388 | }, | 398 | }, |
389 | html5: { | 399 | html5: { |
390 | hlsjsConfig: { | 400 | hlsjsConfig: this.getHLSOptions(p2pMediaLoaderModule, p2pMediaLoaderConfig) |
391 | capLevelToPlayerSize: true, | ||
392 | autoStartLoad: false, | ||
393 | liveSyncDurationCount: 5, | ||
394 | loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass() | ||
395 | } | ||
396 | } | 401 | } |
397 | } | 402 | } |
398 | 403 | ||
@@ -402,6 +407,28 @@ export class PeertubePlayerManager { | |||
402 | return toAssign | 407 | return toAssign |
403 | } | 408 | } |
404 | 409 | ||
410 | private static getHLSOptions (p2pMediaLoaderModule: any, p2pMediaLoaderConfig: HlsJsEngineSettings) { | ||
411 | const base = { | ||
412 | capLevelToPlayerSize: true, | ||
413 | autoStartLoad: false, | ||
414 | liveSyncDurationCount: 5, | ||
415 | |||
416 | loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass() | ||
417 | } | ||
418 | |||
419 | const averageBandwidth = getAverageBandwidthInStore() | ||
420 | if (!averageBandwidth) return base | ||
421 | |||
422 | return { | ||
423 | ...base, | ||
424 | |||
425 | abrEwmaDefaultEstimate: averageBandwidth * 8, // We want bit/s | ||
426 | startLevel: -1, | ||
427 | testBandwidth: false, | ||
428 | debug: false | ||
429 | } | ||
430 | } | ||
431 | |||
405 | private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) { | 432 | private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) { |
406 | const commonOptions = options.common | 433 | const commonOptions = options.common |
407 | const webtorrentOptions = options.webtorrent | 434 | const webtorrentOptions = options.webtorrent |
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts index 919b7c239..ade8e2ee4 100644 --- a/client/src/assets/player/peertube-plugin.ts +++ b/client/src/assets/player/peertube-plugin.ts | |||
@@ -228,6 +228,7 @@ class PeerTubePlugin extends Plugin { | |||
228 | } | 228 | } |
229 | } | 229 | } |
230 | 230 | ||
231 | console.log('Resolution changed.', data) | ||
231 | this.trigger('resolutionChange', data) | 232 | this.trigger('resolutionChange', data) |
232 | } | 233 | } |
233 | 234 | ||
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts index d3c75990b..f0eb129d4 100644 --- a/client/src/assets/player/peertube-videojs-typings.ts +++ b/client/src/assets/player/peertube-videojs-typings.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { Config, Level } from 'hls.js' | 1 | import { HlsConfig, Level } from 'hls.js' |
2 | import videojs from 'video.js' | 2 | import videojs from 'video.js' |
3 | import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models' | 3 | import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models' |
4 | import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin' | 4 | import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin' |
@@ -60,7 +60,7 @@ export interface VideoJSTechHLS extends videojs.Tech { | |||
60 | } | 60 | } |
61 | 61 | ||
62 | export interface HlsjsConfigHandlerOptions { | 62 | export interface HlsjsConfigHandlerOptions { |
63 | hlsjsConfig?: Config & { cueHandler: any }// FIXME: typings | 63 | hlsjsConfig?: HlsConfig & { cueHandler: any }// FIXME: typings |
64 | captionConfig?: any // FIXME: typings | 64 | captionConfig?: any // FIXME: typings |
65 | 65 | ||
66 | levelLabelHandler?: (level: Level) => string | 66 | levelLabelHandler?: (level: Level) => string |