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

   1 // FIXME: something weird with our path definition in tsconfig and typings
   2 // @ts-ignore
   3 import * as videojs from 'video.js'
   4 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from '../peertube-videojs-typings'
   5 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
   6 import { Events } from 'p2p-media-loader-core'
   7
   8 // videojs-hlsjs-plugin needs videojs in window
   9 window['videojs'] = videojs
  10 require('@streamroot/videojs-hlsjs-plugin')
  11
  12 const Plugin: VideoJSComponentInterface = 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: any // Don't type hlsjs to not bundle the module
  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
  36   private networkInfoInterval: any
  37
  38   constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
  39     super(player, options)
  40
  41     this.options = options
  42
  43     if (!videojs.Html5Hlsjs) {
  44       const message = 'HLS.js does not seem to be supported.'
  45       console.warn(message)
  46
  47       player.ready(() => player.trigger('error', new Error(message)))
  48       return
  49     }
  50
  51     videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
  52       this.hlsjs = hlsjs
  53     })
  54
  55     initVideoJsContribHlsJsPlayer(player)
  56
  57     player.src({
  58       type: options.type,
  59       src: options.src
  60     })
  61
  62     player.on('play', () => {
  63       player.addClass('vjs-has-big-play-button-clicked')
  64     })
  65
  66     player.ready(() => this.initialize())
  67   }
  68
  69   dispose () {
  70     if (this.hlsjs) this.hlsjs.destroy()
  71     if (this.p2pEngine) this.p2pEngine.destroy()
  72
  73     clearInterval(this.networkInfoInterval)
  74   }
  75
  76   private initialize () {
  77     initHlsJsPlayer(this.hlsjs)
  78
  79     const tech = this.player.tech_
  80     this.p2pEngine = tech.options_.hlsjsConfig.loader.getEngine()
  81
  82     // Avoid using constants to not import hls.hs
  83     // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
  84     this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
  85       this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
  86     })
  87
  88     this.p2pEngine.on(Events.SegmentError, (segment, err) => {
  89       console.error('Segment error.', segment, err)
  90     })
  91
  92     this.statsP2PBytes.numPeers = 1 + this.options.redundancyBaseUrls.length
  93
  94     this.runStats()
  95   }
  96
  97   private runStats () {
  98     this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => {
  99       const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
 100
 101       elem.pendingDownload.push(size)
 102       elem.totalDownload += size
 103     })
 104
 105     this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => {
 106       const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
 107
 108       elem.pendingUpload.push(size)
 109       elem.totalUpload += size
 110     })
 111
 112     this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
 113     this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
 114
 115     this.networkInfoInterval = setInterval(() => {
 116       const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
 117       const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
 118
 119       const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
 120       const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
 121
 122       this.statsP2PBytes.pendingDownload = []
 123       this.statsP2PBytes.pendingUpload = []
 124       this.statsHTTPBytes.pendingDownload = []
 125       this.statsHTTPBytes.pendingUpload = []
 126
 127       return this.player.trigger('p2pInfo', {
 128         http: {
 129           downloadSpeed: httpDownloadSpeed,
 130           uploadSpeed: httpUploadSpeed,
 131           downloaded: this.statsHTTPBytes.totalDownload,
 132           uploaded: this.statsHTTPBytes.totalUpload
 133         },
 134         p2p: {
 135           downloadSpeed: p2pDownloadSpeed,
 136           uploadSpeed: p2pUploadSpeed,
 137           numPeers: this.statsP2PBytes.numPeers,
 138           downloaded: this.statsP2PBytes.totalDownload,
 139           uploaded: this.statsP2PBytes.totalUpload
 140         }
 141       } as PlayerNetworkInfo)
 142     }, this.CONSTANTS.INFO_SCHEDULER)
 143   }
 144
 145   private arraySum (data: number[]) {
 146     return data.reduce((a: number, b: number) => a + b, 0)
 147   }
 148 }
 149
 150 videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
 151 export { P2pMediaLoaderPlugin }