2020-01-28 16:29:50 +00:00
|
|
|
import videojs, { VideoJsPlayer } from 'video.js'
|
|
|
|
import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
|
2019-01-29 07:37:25 +00:00
|
|
|
import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
|
2019-08-23 08:19:44 +00:00
|
|
|
import { Events, Segment } from 'p2p-media-loader-core'
|
2019-03-13 13:18:58 +00:00
|
|
|
import { timeToInt } from '../utils'
|
2020-01-31 10:39:50 +00:00
|
|
|
import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
|
|
|
|
import * as Hlsjs from 'hls.js'
|
2019-01-23 14:36:45 +00:00
|
|
|
|
2020-01-31 10:39:50 +00:00
|
|
|
registerConfigPlugin(videojs)
|
|
|
|
registerSourceHandler(videojs)
|
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-24 09:16:30 +00:00
|
|
|
private readonly CONSTANTS = {
|
|
|
|
INFO_SCHEDULER: 1000 // Don't change this
|
|
|
|
}
|
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[],
|
|
|
|
numPeers: 0,
|
|
|
|
totalDownload: 0,
|
|
|
|
totalUpload: 0
|
|
|
|
}
|
2019-01-29 07:37:25 +00:00
|
|
|
private statsHTTPBytes = {
|
|
|
|
pendingDownload: [] as number[],
|
|
|
|
pendingUpload: [] as number[],
|
|
|
|
totalDownload: 0,
|
|
|
|
totalUpload: 0
|
|
|
|
}
|
2019-03-13 13:18:58 +00:00
|
|
|
private startTime: number
|
2019-01-24 09:16:30 +00:00
|
|
|
|
|
|
|
private networkInfoInterval: any
|
|
|
|
|
2020-01-28 16:29:50 +00:00
|
|
|
constructor (player: VideoJsPlayer, options?: P2PMediaLoaderPluginOptions) {
|
|
|
|
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) {
|
2019-02-20 10:26:14 +00:00
|
|
|
const message = 'HLS.js does not seem to be supported.'
|
|
|
|
console.warn(message)
|
|
|
|
|
|
|
|
player.ready(() => player.trigger('error', new Error(message)))
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2020-01-28 16:29:50 +00:00
|
|
|
// FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
|
|
|
|
(videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
|
2019-01-24 09:16:30 +00:00
|
|
|
this.hlsjs = hlsjs
|
|
|
|
})
|
|
|
|
|
|
|
|
initVideoJsContribHlsJsPlayer(player)
|
2019-01-23 14:36:45 +00:00
|
|
|
|
2019-03-13 13:18:58 +00:00
|
|
|
this.startTime = timeToInt(options.startTime)
|
|
|
|
|
2019-01-23 14:36:45 +00:00
|
|
|
player.src({
|
|
|
|
type: options.type,
|
|
|
|
src: options.src
|
|
|
|
})
|
2019-01-29 07:37:25 +00:00
|
|
|
|
2019-03-13 13:18:58 +00:00
|
|
|
player.one('play', () => {
|
2019-02-06 09:39:50 +00:00
|
|
|
player.addClass('vjs-has-big-play-button-clicked')
|
|
|
|
})
|
|
|
|
|
2019-01-29 07:37:25 +00:00
|
|
|
player.ready(() => this.initialize())
|
2019-01-23 14:36:45 +00:00
|
|
|
}
|
|
|
|
|
2019-01-24 09:16:30 +00:00
|
|
|
dispose () {
|
2019-02-06 09:39:50 +00:00
|
|
|
if (this.hlsjs) this.hlsjs.destroy()
|
|
|
|
if (this.p2pEngine) this.p2pEngine.destroy()
|
|
|
|
|
2019-01-24 09:16:30 +00:00
|
|
|
clearInterval(this.networkInfoInterval)
|
|
|
|
}
|
|
|
|
|
2019-12-17 13:20:43 +00:00
|
|
|
getHLSJS () {
|
|
|
|
return this.hlsjs
|
|
|
|
}
|
|
|
|
|
2019-01-24 09:16:30 +00:00
|
|
|
private initialize () {
|
2019-01-29 07:37:25 +00:00
|
|
|
initHlsJsPlayer(this.hlsjs)
|
|
|
|
|
2020-01-28 16:29:50 +00:00
|
|
|
// FIXME: typings
|
|
|
|
const options = this.player.tech(true).options_ as any
|
|
|
|
this.p2pEngine = options.hlsjsConfig.loader.getEngine()
|
2019-01-24 09:16:30 +00:00
|
|
|
|
2020-01-31 10:39:50 +00:00
|
|
|
this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => {
|
2019-01-24 09:16:30 +00:00
|
|
|
this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
|
|
|
|
})
|
|
|
|
|
2019-08-23 08:19:44 +00:00
|
|
|
this.p2pEngine.on(Events.SegmentError, (segment: Segment, err) => {
|
2019-01-29 07:37:25 +00:00
|
|
|
console.error('Segment error.', segment, 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
|
|
|
})
|
|
|
|
|
2019-08-23 08:19:44 +00:00
|
|
|
this.statsP2PBytes.numPeers = 1 + this.options.redundancyUrlManager.countBaseUrls()
|
2019-01-29 07:37:25 +00:00
|
|
|
|
2019-01-24 09:16:30 +00:00
|
|
|
this.runStats()
|
2019-03-13 13:18:58 +00:00
|
|
|
|
2019-08-13 09:08:36 +00:00
|
|
|
this.player.one('canplay', () => {
|
2019-08-13 09:04:27 +00:00
|
|
|
if (this.startTime) {
|
|
|
|
this.player.currentTime(this.startTime)
|
|
|
|
}
|
|
|
|
})
|
2019-01-24 09:16:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
private runStats () {
|
|
|
|
this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => {
|
2019-01-29 07:37:25 +00:00
|
|
|
const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
|
|
|
|
|
|
|
|
elem.pendingDownload.push(size)
|
|
|
|
elem.totalDownload += size
|
2019-01-24 09:16:30 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => {
|
2019-01-29 07:37:25 +00:00
|
|
|
const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
|
|
|
|
|
|
|
|
elem.pendingUpload.push(size)
|
|
|
|
elem.totalUpload += size
|
2019-01-24 09:16:30 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
|
|
|
|
this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
|
|
|
|
|
|
|
|
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)
|
|
|
|
const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
|
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 = []
|
|
|
|
this.statsHTTPBytes.pendingUpload = []
|
2019-01-24 09:16:30 +00:00
|
|
|
|
|
|
|
return this.player.trigger('p2pInfo', {
|
2019-01-29 07:37:25 +00:00
|
|
|
http: {
|
|
|
|
downloadSpeed: httpDownloadSpeed,
|
|
|
|
uploadSpeed: httpUploadSpeed,
|
|
|
|
downloaded: this.statsHTTPBytes.totalDownload,
|
|
|
|
uploaded: this.statsHTTPBytes.totalUpload
|
|
|
|
},
|
2019-01-24 09:16:30 +00:00
|
|
|
p2p: {
|
2019-01-29 07:37:25 +00:00
|
|
|
downloadSpeed: p2pDownloadSpeed,
|
|
|
|
uploadSpeed: p2pUploadSpeed,
|
2019-01-24 09:16:30 +00:00
|
|
|
numPeers: this.statsP2PBytes.numPeers,
|
|
|
|
downloaded: this.statsP2PBytes.totalDownload,
|
|
|
|
uploaded: this.statsP2PBytes.totalUpload
|
|
|
|
}
|
|
|
|
} as PlayerNetworkInfo)
|
|
|
|
}, this.CONSTANTS.INFO_SCHEDULER)
|
|
|
|
}
|
2019-01-29 07:37:25 +00:00
|
|
|
|
|
|
|
private arraySum (data: number[]) {
|
|
|
|
return data.reduce((a: number, b: number) => a + b, 0)
|
|
|
|
}
|
2019-01-23 14:36:45 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
|
|
|
|
export { P2pMediaLoaderPlugin }
|