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

   1 import videojs, { VideoJsPlayer } from 'video.js'
   2 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
   3 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
   4 import { Events, Segment } from 'p2p-media-loader-core'
   5 import { timeToInt } from '../utils'
   6
   7 // videojs-hlsjs-plugin needs videojs in window
   8 window['videojs'] = videojs
   9 require('@streamroot/videojs-hlsjs-plugin')
  10
  11 const Plugin = videojs.getPlugin('plugin')
  12 class P2pMediaLoaderPlugin extends Plugin {
  13
  14   private readonly CONSTANTS = {
  15     INFO_SCHEDULER: 1000 // Don't change this
  16   }
  17   private readonly options: P2PMediaLoaderPluginOptions
  18
  19   private hlsjs: any // Don't type hlsjs to not bundle the module
  20   private p2pEngine: Engine
  21   private statsP2PBytes = {
  22     pendingDownload: [] as number[],
  23     pendingUpload: [] as number[],
  24     numPeers: 0,
  25     totalDownload: 0,
  26     totalUpload: 0
  27   }
  28   private statsHTTPBytes = {
  29     pendingDownload: [] as number[],
  30     pendingUpload: [] as number[],
  31     totalDownload: 0,
  32     totalUpload: 0
  33   }
  34   private startTime: number
  35
  36   private networkInfoInterval: any
  37
  38   constructor (player: VideoJsPlayer, options?: P2PMediaLoaderPluginOptions) {
  39     super(player)
  40
  41     this.options = options
  42
  43     // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
  44     if (!(videojs as any).Html5Hlsjs) {
  45       const message = 'HLS.js does not seem to be supported.'
  46       console.warn(message)
  47
  48       player.ready(() => player.trigger('error', new Error(message)))
  49       return
  50     }
  51
  52     // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
  53     (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
  54       this.hlsjs = hlsjs
  55     })
  56
  57     initVideoJsContribHlsJsPlayer(player)
  58
  59     this.startTime = timeToInt(options.startTime)
  60
  61     player.src({
  62       type: options.type,
  63       src: options.src
  64     })
  65
  66     player.one('play', () => {
  67       player.addClass('vjs-has-big-play-button-clicked')
  68     })
  69
  70     player.ready(() => this.initialize())
  71   }
  72
  73   dispose () {
  74     if (this.hlsjs) this.hlsjs.destroy()
  75     if (this.p2pEngine) this.p2pEngine.destroy()
  76
  77     clearInterval(this.networkInfoInterval)
  78   }
  79
  80   getHLSJS () {
  81     return this.hlsjs
  82   }
  83
  84   private initialize () {
  85     initHlsJsPlayer(this.hlsjs)
  86
  87     // FIXME: typings
  88     const options = this.player.tech(true).options_ as any
  89     this.p2pEngine = options.hlsjsConfig.loader.getEngine()
  90
  91     // Avoid using constants to not import hls.hs
  92     // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
  93     this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
  94       this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
  95     })
  96
  97     this.p2pEngine.on(Events.SegmentError, (segment: Segment, err) => {
  98       console.error('Segment error.', segment, err)
  99
 100       this.options.redundancyUrlManager.removeBySegmentUrl(segment.requestUrl)
 101     })
 102
 103     this.statsP2PBytes.numPeers = 1 + this.options.redundancyUrlManager.countBaseUrls()
 104
 105     this.runStats()
 106
 107     this.player.one('canplay', () => {
 108       if (this.startTime) {
 109         this.player.currentTime(this.startTime)
 110       }
 111     })
 112   }
 113
 114   private runStats () {
 115     this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => {
 116       const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
 117
 118       elem.pendingDownload.push(size)
 119       elem.totalDownload += size
 120     })
 121
 122     this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => {
 123       const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
 124
 125       elem.pendingUpload.push(size)
 126       elem.totalUpload += size
 127     })
 128
 129     this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
 130     this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
 131
 132     this.networkInfoInterval = setInterval(() => {
 133       const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
 134       const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
 135
 136       const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
 137       const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
 138
 139       this.statsP2PBytes.pendingDownload = []
 140       this.statsP2PBytes.pendingUpload = []
 141       this.statsHTTPBytes.pendingDownload = []
 142       this.statsHTTPBytes.pendingUpload = []
 143
 144       return this.player.trigger('p2pInfo', {
 145         http: {
 146           downloadSpeed: httpDownloadSpeed,
 147           uploadSpeed: httpUploadSpeed,
 148           downloaded: this.statsHTTPBytes.totalDownload,
 149           uploaded: this.statsHTTPBytes.totalUpload
 150         },
 151         p2p: {
 152           downloadSpeed: p2pDownloadSpeed,
 153           uploadSpeed: p2pUploadSpeed,
 154           numPeers: this.statsP2PBytes.numPeers,
 155           downloaded: this.statsP2PBytes.totalDownload,
 156           uploaded: this.statsP2PBytes.totalUpload
 157         }
 158       } as PlayerNetworkInfo)
 159     }, this.CONSTANTS.INFO_SCHEDULER)
 160   }
 161
 162   private arraySum (data: number[]) {
 163     return data.reduce((a: number, b: number) => a + b, 0)
 164   }
 165 }
 166
 167 videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
 168 export { P2pMediaLoaderPlugin }