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

   1 import videojs 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 import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
   7 import * as Hlsjs from 'hls.js/dist/hls.light.js'
   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   constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) {
  40     super(player)
  41
  42     this.options = options
  43
  44     // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
  45     if (!(videojs as any).Html5Hlsjs) {
  46       console.warn('HLS.js does not seem to be supported. Try to fallback to built in HLS.')
  47
  48       if (!player.canPlayType('application/vnd.apple.mpegurl')) {
  49         const message = 'Cannot fallback to built-in HLS'
  50         console.warn(message)
  51
  52         player.ready(() => player.trigger('error', new Error(message)))
  53         return
  54       }
  55     } else {
  56       // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
  57       (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
  58         this.hlsjs = hlsjs
  59       })
  60
  61       initVideoJsContribHlsJsPlayer(player)
  62     }
  63
  64     this.startTime = timeToInt(options.startTime)
  65
  66     player.src({
  67       type: options.type,
  68       src: options.src
  69     })
  70
  71     player.ready(() => {
  72       this.initializeCore()
  73
  74       if ((videojs as any).Html5Hlsjs) {
  75         this.initializePlugin()
  76       }
  77     })
  78   }
  79
  80   dispose () {
  81     if (this.hlsjs) this.hlsjs.destroy()
  82     if (this.p2pEngine) this.p2pEngine.destroy()
  83
  84     clearInterval(this.networkInfoInterval)
  85   }
  86
  87   getHLSJS () {
  88     return this.hlsjs
  89   }
  90
  91   private initializeCore () {
  92     this.player.one('play', () => {
  93       this.player.addClass('vjs-has-big-play-button-clicked')
  94     })
  95
  96     this.player.one('canplay', () => {
  97       if (this.startTime) {
  98         this.player.currentTime(this.startTime)
  99       }
 100     })
 101   }
 102
 103   private initializePlugin () {
 104     initHlsJsPlayer(this.hlsjs)
 105
 106     // FIXME: typings
 107     const options = this.player.tech(true).options_ as any
 108     this.p2pEngine = options.hlsjsConfig.loader.getEngine()
 109
 110     this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => {
 111       this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
 112     })
 113
 114     this.p2pEngine.on(Events.SegmentError, (segment: Segment, err) => {
 115       console.error('Segment error.', segment, err)
 116
 117       this.options.redundancyUrlManager.removeBySegmentUrl(segment.requestUrl)
 118     })
 119
 120     this.statsP2PBytes.numPeers = 1 + this.options.redundancyUrlManager.countBaseUrls()
 121
 122     this.runStats()
 123   }
 124
 125   private runStats () {
 126     this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => {
 127       const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
 128
 129       elem.pendingDownload.push(size)
 130       elem.totalDownload += size
 131     })
 132
 133     this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => {
 134       const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
 135
 136       elem.pendingUpload.push(size)
 137       elem.totalUpload += size
 138     })
 139
 140     this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
 141     this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
 142
 143     this.networkInfoInterval = setInterval(() => {
 144       const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
 145       const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
 146
 147       const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
 148       const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
 149
 150       this.statsP2PBytes.pendingDownload = []
 151       this.statsP2PBytes.pendingUpload = []
 152       this.statsHTTPBytes.pendingDownload = []
 153       this.statsHTTPBytes.pendingUpload = []
 154
 155       return this.player.trigger('p2pInfo', {
 156         http: {
 157           downloadSpeed: httpDownloadSpeed,
 158           uploadSpeed: httpUploadSpeed,
 159           downloaded: this.statsHTTPBytes.totalDownload,
 160           uploaded: this.statsHTTPBytes.totalUpload
 161         },
 162         p2p: {
 163           downloadSpeed: p2pDownloadSpeed,
 164           uploadSpeed: p2pUploadSpeed,
 165           numPeers: this.statsP2PBytes.numPeers,
 166           downloaded: this.statsP2PBytes.totalDownload,
 167           uploaded: this.statsP2PBytes.totalUpload
 168         }
 169       } as PlayerNetworkInfo)
 170     }, this.CONSTANTS.INFO_SCHEDULER)
 171   }
 172
 173   private arraySum (data: number[]) {
 174     return data.reduce((a: number, b: number) => a + b, 0)
 175   }
 176 }
 177
 178 videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
 179 export { P2pMediaLoaderPlugin }