2021-08-06 14:41:08 +00:00
|
|
|
import Hlsjs from 'hls.js'
|
2020-04-21 09:02:28 +00:00
|
|
|
import videojs from 'video.js'
|
2021-08-03 09:51:49 +00:00
|
|
|
import { Events, Segment } from '@peertube/p2p-media-loader-core'
|
|
|
|
import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from '@peertube/p2p-media-loader-hlsjs'
|
2022-08-12 14:41:29 +00:00
|
|
|
import { logger } from '@root-helpers/logger'
|
2023-06-29 13:55:00 +00:00
|
|
|
import { addQueryParams } from '@shared/core-utils'
|
2022-03-14 13:28:20 +00:00
|
|
|
import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../../types'
|
2023-06-29 13:55:00 +00:00
|
|
|
import { SettingsButton } from '../settings/settings-menu-button'
|
2019-01-23 14:36:45 +00:00
|
|
|
|
2020-01-28 16:29:50 +00:00
|
|
|
const Plugin = videojs.getPlugin('plugin')
|
2019-01-23 14:36:45 +00:00
|
|
|
class P2pMediaLoaderPlugin extends Plugin {
|
2019-01-29 07:37:25 +00:00
|
|
|
private readonly options: P2PMediaLoaderPluginOptions
|
2019-01-24 09:16:30 +00:00
|
|
|
|
2020-01-31 10:39:50 +00:00
|
|
|
private hlsjs: Hlsjs
|
2019-01-24 09:16:30 +00:00
|
|
|
private p2pEngine: Engine
|
|
|
|
private statsP2PBytes = {
|
|
|
|
pendingDownload: [] as number[],
|
|
|
|
pendingUpload: [] as number[],
|
2023-07-21 09:42:52 +00:00
|
|
|
peersWithWebSeed: 0,
|
|
|
|
peersP2POnly: 0,
|
2019-01-24 09:16:30 +00:00
|
|
|
totalDownload: 0,
|
|
|
|
totalUpload: 0
|
|
|
|
}
|
2019-01-29 07:37:25 +00:00
|
|
|
private statsHTTPBytes = {
|
|
|
|
pendingDownload: [] as number[],
|
2022-08-12 14:41:29 +00:00
|
|
|
totalDownload: 0
|
2019-01-29 07:37:25 +00:00
|
|
|
}
|
2019-01-24 09:16:30 +00:00
|
|
|
|
|
|
|
private networkInfoInterval: any
|
|
|
|
|
2020-04-17 09:20:12 +00:00
|
|
|
constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) {
|
2020-01-28 16:29:50 +00:00
|
|
|
super(player)
|
2019-01-23 14:36:45 +00:00
|
|
|
|
2019-01-29 07:37:25 +00:00
|
|
|
this.options = options
|
|
|
|
|
2020-01-28 16:29:50 +00:00
|
|
|
// FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
|
|
|
|
if (!(videojs as any).Html5Hlsjs) {
|
2022-12-02 13:47:21 +00:00
|
|
|
if (player.canPlayType('application/vnd.apple.mpegurl')) {
|
|
|
|
this.fallbackToBuiltInIOS()
|
|
|
|
return
|
2022-10-21 09:27:39 +00:00
|
|
|
}
|
|
|
|
|
2022-12-02 13:47:21 +00:00
|
|
|
const message = 'HLS.js does not seem to be supported. Cannot fallback to built-in HLS'
|
|
|
|
logger.warn(message)
|
2019-02-20 10:26:14 +00:00
|
|
|
|
2022-12-02 13:47:21 +00:00
|
|
|
const error: MediaError = {
|
|
|
|
code: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
|
|
|
|
message,
|
|
|
|
MEDIA_ERR_ABORTED: MediaError.MEDIA_ERR_ABORTED,
|
|
|
|
MEDIA_ERR_DECODE: MediaError.MEDIA_ERR_DECODE,
|
|
|
|
MEDIA_ERR_NETWORK: MediaError.MEDIA_ERR_NETWORK,
|
|
|
|
MEDIA_ERR_SRC_NOT_SUPPORTED: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
|
2020-07-20 08:13:56 +00:00
|
|
|
}
|
2022-11-14 08:50:20 +00:00
|
|
|
|
2022-12-02 13:47:21 +00:00
|
|
|
player.ready(() => player.error(error))
|
|
|
|
return
|
2020-07-20 08:13:56 +00:00
|
|
|
}
|
2019-01-23 14:36:45 +00:00
|
|
|
|
2022-12-02 13:47:21 +00:00
|
|
|
// FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
|
|
|
|
(videojs as any).Html5Hlsjs.addHook('beforeinitialize', (_videojsPlayer: any, hlsjs: any) => {
|
|
|
|
this.hlsjs = hlsjs
|
|
|
|
})
|
|
|
|
|
|
|
|
initVideoJsContribHlsJsPlayer(player)
|
2019-03-13 13:18:58 +00:00
|
|
|
|
2019-01-23 14:36:45 +00:00
|
|
|
player.src({
|
|
|
|
type: options.type,
|
|
|
|
src: options.src
|
|
|
|
})
|
2019-01-29 07:37:25 +00:00
|
|
|
|
2020-07-20 08:13:56 +00:00
|
|
|
player.ready(() => {
|
2022-12-02 13:47:21 +00:00
|
|
|
this.initializePlugin()
|
2020-07-20 08:13:56 +00:00
|
|
|
})
|
2019-01-23 14:36:45 +00:00
|
|
|
}
|
|
|
|
|
2019-01-24 09:16:30 +00:00
|
|
|
dispose () {
|
2023-06-29 13:55:00 +00:00
|
|
|
this.p2pEngine?.removeAllListeners()
|
|
|
|
this.p2pEngine?.destroy()
|
|
|
|
|
|
|
|
this.hlsjs?.destroy()
|
|
|
|
this.options.segmentValidator?.destroy();
|
|
|
|
|
|
|
|
(videojs as any).Html5Hlsjs?.removeAllHooks()
|
2019-02-06 09:39:50 +00:00
|
|
|
|
2019-01-24 09:16:30 +00:00
|
|
|
clearInterval(this.networkInfoInterval)
|
2023-06-29 13:55:00 +00:00
|
|
|
|
|
|
|
super.dispose()
|
2019-01-24 09:16:30 +00:00
|
|
|
}
|
|
|
|
|
2021-04-27 13:50:29 +00:00
|
|
|
getCurrentLevel () {
|
2022-09-08 09:10:01 +00:00
|
|
|
if (!this.hlsjs) return undefined
|
|
|
|
|
2021-08-03 09:51:49 +00:00
|
|
|
return this.hlsjs.levels[this.hlsjs.currentLevel]
|
2021-04-27 13:50:29 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
getLiveLatency () {
|
2021-10-22 14:18:00 +00:00
|
|
|
return Math.round(this.hlsjs.latency)
|
2021-04-27 13:50:29 +00:00
|
|
|
}
|
|
|
|
|
2019-12-17 13:20:43 +00:00
|
|
|
getHLSJS () {
|
|
|
|
return this.hlsjs
|
|
|
|
}
|
|
|
|
|
2020-07-20 08:13:56 +00:00
|
|
|
private initializePlugin () {
|
2019-01-29 07:37:25 +00:00
|
|
|
initHlsJsPlayer(this.hlsjs)
|
|
|
|
|
2022-03-14 10:16:54 +00:00
|
|
|
this.p2pEngine = this.options.loader.getEngine()
|
2019-01-24 09:16:30 +00:00
|
|
|
|
2019-08-23 08:19:44 +00:00
|
|
|
this.p2pEngine.on(Events.SegmentError, (segment: Segment, err) => {
|
2022-09-28 09:52:23 +00:00
|
|
|
if (navigator.onLine === false) return
|
|
|
|
|
2022-07-15 13:30:14 +00:00
|
|
|
logger.error(`Segment ${segment.id} error.`, err)
|
2019-08-23 08:19:44 +00:00
|
|
|
|
2019-09-05 15:21:44 +00:00
|
|
|
this.options.redundancyUrlManager.removeBySegmentUrl(segment.requestUrl)
|
2019-01-29 07:37:25 +00:00
|
|
|
})
|
|
|
|
|
2023-07-21 09:42:52 +00:00
|
|
|
this.statsP2PBytes.peersWithWebSeed = 1 + this.options.redundancyUrlManager.countBaseUrls()
|
2019-01-29 07:37:25 +00:00
|
|
|
|
2019-01-24 09:16:30 +00:00
|
|
|
this.runStats()
|
2022-08-12 14:41:29 +00:00
|
|
|
|
2023-06-29 13:55:00 +00:00
|
|
|
this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engine-resolution-change'))
|
2019-01-24 09:16:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
private runStats () {
|
2021-08-03 09:51:49 +00:00
|
|
|
this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, _segment, bytes: number) => {
|
2019-01-29 07:37:25 +00:00
|
|
|
const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
|
|
|
|
|
2021-08-03 09:51:49 +00:00
|
|
|
elem.pendingDownload.push(bytes)
|
|
|
|
elem.totalDownload += bytes
|
2019-01-24 09:16:30 +00:00
|
|
|
})
|
|
|
|
|
2021-08-03 09:51:49 +00:00
|
|
|
this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, _segment, bytes: number) => {
|
2022-08-12 14:41:29 +00:00
|
|
|
if (method !== 'p2p') {
|
|
|
|
logger.error(`Received upload from unknown method ${method}`)
|
|
|
|
return
|
|
|
|
}
|
2019-01-29 07:37:25 +00:00
|
|
|
|
2022-08-12 14:41:29 +00:00
|
|
|
this.statsP2PBytes.pendingUpload.push(bytes)
|
|
|
|
this.statsP2PBytes.totalUpload += bytes
|
2019-01-24 09:16:30 +00:00
|
|
|
})
|
|
|
|
|
2023-07-21 09:42:52 +00:00
|
|
|
this.p2pEngine.on(Events.PeerConnect, () => {
|
|
|
|
this.statsP2PBytes.peersWithWebSeed++
|
|
|
|
this.statsP2PBytes.peersP2POnly++
|
|
|
|
})
|
|
|
|
this.p2pEngine.on(Events.PeerClose, () => {
|
|
|
|
this.statsP2PBytes.peersWithWebSeed--
|
|
|
|
this.statsP2PBytes.peersP2POnly--
|
|
|
|
})
|
2019-01-24 09:16:30 +00:00
|
|
|
|
|
|
|
this.networkInfoInterval = setInterval(() => {
|
2019-01-29 07:37:25 +00:00
|
|
|
const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
|
|
|
|
const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
|
|
|
|
|
|
|
|
const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
|
2019-01-24 09:16:30 +00:00
|
|
|
|
|
|
|
this.statsP2PBytes.pendingDownload = []
|
|
|
|
this.statsP2PBytes.pendingUpload = []
|
2019-01-29 07:37:25 +00:00
|
|
|
this.statsHTTPBytes.pendingDownload = []
|
2019-01-24 09:16:30 +00:00
|
|
|
|
2023-07-21 09:42:52 +00:00
|
|
|
return this.player.trigger('network-info', {
|
2020-12-04 15:30:01 +00:00
|
|
|
source: 'p2p-media-loader',
|
2023-07-21 09:42:52 +00:00
|
|
|
bandwidthEstimate: (this.hlsjs as any).bandwidthEstimate / 8,
|
2019-01-29 07:37:25 +00:00
|
|
|
http: {
|
|
|
|
downloadSpeed: httpDownloadSpeed,
|
2022-08-12 14:41:29 +00:00
|
|
|
downloaded: this.statsHTTPBytes.totalDownload
|
2019-01-29 07:37:25 +00:00
|
|
|
},
|
2023-07-21 09:42:52 +00:00
|
|
|
p2p: this.options.p2pEnabled
|
|
|
|
? {
|
|
|
|
downloadSpeed: p2pDownloadSpeed,
|
|
|
|
uploadSpeed: p2pUploadSpeed,
|
|
|
|
peersWithWebSeed: this.statsP2PBytes.peersWithWebSeed,
|
|
|
|
peersP2POnly: this.statsP2PBytes.peersP2POnly,
|
|
|
|
downloaded: this.statsP2PBytes.totalDownload,
|
|
|
|
uploaded: this.statsP2PBytes.totalUpload
|
|
|
|
}
|
|
|
|
: undefined
|
2019-01-24 09:16:30 +00:00
|
|
|
} as PlayerNetworkInfo)
|
2023-06-29 13:55:00 +00:00
|
|
|
}, 1000)
|
2019-01-24 09:16:30 +00:00
|
|
|
}
|
2019-01-29 07:37:25 +00:00
|
|
|
|
|
|
|
private arraySum (data: number[]) {
|
|
|
|
return data.reduce((a: number, b: number) => a + b, 0)
|
|
|
|
}
|
2022-12-02 13:47:21 +00:00
|
|
|
|
|
|
|
private fallbackToBuiltInIOS () {
|
2023-06-29 13:55:00 +00:00
|
|
|
logger.info('HLS.js does not seem to be supported. Fallback to built-in HLS.')
|
2022-12-02 13:47:21 +00:00
|
|
|
|
|
|
|
this.player.src({
|
|
|
|
type: this.options.type,
|
|
|
|
src: addQueryParams(this.options.src, {
|
|
|
|
videoFileToken: this.options.videoFileToken(),
|
|
|
|
reinjectVideoFileToken: 'true'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
2023-06-29 13:55:00 +00:00
|
|
|
// Resolution button is not supported in built-in HLS player
|
|
|
|
this.getResolutionButton().hide()
|
|
|
|
}
|
|
|
|
|
|
|
|
private getResolutionButton () {
|
|
|
|
const settingsButton = this.player.controlBar.getDescendant([ 'settingsButton' ]) as SettingsButton
|
|
|
|
|
|
|
|
return settingsButton.menu.getChild('resolutionMenuButton')
|
2022-12-02 13:47:21 +00:00
|
|
|
}
|
2019-01-23 14:36:45 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
|
|
|
|
export { P2pMediaLoaderPlugin }
|