client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts

   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'
   5 import { timeToInt } from '@shared/core-utils'
   6 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
   7 import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
   8
   9 registerConfigPlugin(videojs)
  10 registerSourceHandler(videojs)
  11
  12 const Plugin = videojs.getPlugin('plugin')
  13 class P2pMediaLoaderPlugin extends Plugin {
  14
  15   private readonly CONSTANTS = {
  16     INFO_SCHEDULER: 1000 // Don't change this
  17   }
  18   private readonly options: P2PMediaLoaderPluginOptions
  19
  20   private hlsjs: Hlsjs
  21   private p2pEngine: Engine
  22   private statsP2PBytes = {
  23     pendingDownload: [] as number[],
  24     pendingUpload: [] as number[],
  25     numPeers: 0,
  26     totalDownload: 0,
  27     totalUpload: 0
  28   }
  29   private statsHTTPBytes = {
  30     pendingDownload: [] as number[],
  31     pendingUpload: [] as number[],
  32     totalDownload: 0,
  33     totalUpload: 0
  34   }
  35   private startTime: number
  36
  37   private networkInfoInterval: any
  38
  39   private hlsjsCurrentLevel: number
  40   private hlsjsLevels: Hlsjs.Level[]
  41
  42   constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) {
  43     super(player)
  44
  45     this.options = options
  46
  47     // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
  48     if (!(videojs as any).Html5Hlsjs) {
  49       console.warn('HLS.js does not seem to be supported. Try to fallback to built in HLS.')
  50
  51       if (!player.canPlayType('application/vnd.apple.mpegurl')) {
  52         const message = 'Cannot fallback to built-in HLS'
  53         console.warn(message)
  54
  55         player.ready(() => player.trigger('error', new Error(message)))
  56         return
  57       }
  58     } else {
  59       // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
  60       (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
  61         this.hlsjs = hlsjs
  62       })
  63
  64       initVideoJsContribHlsJsPlayer(player)
  65     }
  66
  67     this.startTime = timeToInt(options.startTime)
  68
  69     player.src({
  70       type: options.type,
  71       src: options.src
  72     })
  73
  74     player.ready(() => {
  75       this.initializeCore()
  76
  77       if ((videojs as any).Html5Hlsjs) {
  78         this.initializePlugin()
  79       }
  80     })
  81   }
  82
  83   dispose () {
  84     if (this.hlsjs) this.hlsjs.destroy()
  85     if (this.p2pEngine) this.p2pEngine.destroy()
  86
  87     clearInterval(this.networkInfoInterval)
  88   }
  89
  90   getCurrentLevel () {
  91     return this.hlsjsLevels.find(l => l.level === this.hlsjsCurrentLevel)
  92   }
  93
  94   getLiveLatency () {
  95     return undefined as number
  96     // FIXME: Use latency when hls >= V1
  97     // return this.hlsjs.latency
  98   }
  99
 100   getHLSJS () {
 101     return this.hlsjs
 102   }
 103
 104   private initializeCore () {
 105     this.player.one('play', () => {
 106       this.player.addClass('vjs-has-big-play-button-clicked')
 107     })
 108
 109     this.player.one('canplay', () => {
 110       if (this.startTime) {
 111         this.player.currentTime(this.startTime)
 112       }
 113     })
 114   }
 115
 116   private initializePlugin () {
 117     initHlsJsPlayer(this.hlsjs)
 118
 119     // FIXME: typings
 120     const options = this.player.tech(true).options_ as any
 121     this.p2pEngine = options.hlsjsConfig.loader.getEngine()
 122
 123     this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => {
 124       this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
 125     })
 126
 127     this.hlsjs.on(Hlsjs.Events.MANIFEST_LOADED, (_: any, data: any) => {
 128       this.trigger('resolutionsLoaded')
 129     })
 130
 131     this.p2pEngine.on(Events.SegmentError, (segment: Segment, err) => {
 132       console.error('Segment error.', segment, err)
 133
 134       this.options.redundancyUrlManager.removeBySegmentUrl(segment.requestUrl)
 135     })
 136
 137     this.statsP2PBytes.numPeers = 1 + this.options.redundancyUrlManager.countBaseUrls()
 138
 139     this.runStats()
 140   }
 141
 142   private runStats () {
 143     this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => {
 144       const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
 145
 146       elem.pendingDownload.push(size)
 147       elem.totalDownload += size
 148     })
 149
 150     this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => {
 151       const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
 152
 153       elem.pendingUpload.push(size)
 154       elem.totalUpload += size
 155     })
 156
 157     this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
 158     this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
 159
 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(() => {
 169       const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
 170       const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
 171
 172       const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
 173       const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
 174
 175       this.statsP2PBytes.pendingDownload = []
 176       this.statsP2PBytes.pendingUpload = []
 177       this.statsHTTPBytes.pendingDownload = []
 178       this.statsHTTPBytes.pendingUpload = []
 179
 180       return this.player.trigger('p2pInfo', {
 181         source: 'p2p-media-loader',
 182         http: {
 183           downloadSpeed: httpDownloadSpeed,
 184           uploadSpeed: httpUploadSpeed,
 185           downloaded: this.statsHTTPBytes.totalDownload,
 186           uploaded: this.statsHTTPBytes.totalUpload
 187         },
 188         p2p: {
 189           downloadSpeed: p2pDownloadSpeed,
 190           uploadSpeed: p2pUploadSpeed,
 191           numPeers: this.statsP2PBytes.numPeers,
 192           downloaded: this.statsP2PBytes.totalDownload,
 193           uploaded: this.statsP2PBytes.totalUpload
 194         },
 195         bandwidthEstimate: (this.hlsjs as any).bandwidthEstimate / 8
 196       } as PlayerNetworkInfo)
 197     }, this.CONSTANTS.INFO_SCHEDULER)
 198   }
 199
 200   private arraySum (data: number[]) {
 201     return data.reduce((a: number, b: number) => a + b, 0)
 202   }
 203 }
 204
 205 videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
 206 export { P2pMediaLoaderPlugin }