]>
Commit | Line | Data |
---|---|---|
1 | import Hlsjs from 'hls.js' | |
2 | import videojs from 'video.js' | |
3 | import { Events, Segment } from '@peertube/p2p-media-loader-core' | |
4 | import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from '@peertube/p2p-media-loader-hlsjs' | |
5 | import { logger } from '@root-helpers/logger' | |
6 | import { addQueryParams, timeToInt } from '@shared/core-utils' | |
7 | import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../../types' | |
8 | import { registerConfigPlugin, registerSourceHandler } from './hls-plugin' | |
9 | ||
10 | registerConfigPlugin(videojs) | |
11 | registerSourceHandler(videojs) | |
12 | ||
13 | const Plugin = videojs.getPlugin('plugin') | |
14 | class P2pMediaLoaderPlugin extends Plugin { | |
15 | ||
16 | private readonly CONSTANTS = { | |
17 | INFO_SCHEDULER: 1000 // Don't change this | |
18 | } | |
19 | private readonly options: P2PMediaLoaderPluginOptions | |
20 | ||
21 | private hlsjs: Hlsjs | |
22 | private p2pEngine: Engine | |
23 | private statsP2PBytes = { | |
24 | pendingDownload: [] as number[], | |
25 | pendingUpload: [] as number[], | |
26 | numPeers: 0, | |
27 | totalDownload: 0, | |
28 | totalUpload: 0 | |
29 | } | |
30 | private statsHTTPBytes = { | |
31 | pendingDownload: [] as number[], | |
32 | totalDownload: 0 | |
33 | } | |
34 | private startTime: number | |
35 | ||
36 | private networkInfoInterval: any | |
37 | ||
38 | constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) { | |
39 | super(player) | |
40 | ||
41 | this.options = options | |
42 | this.startTime = timeToInt(options.startTime) | |
43 | ||
44 | // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080 | |
45 | if (!(videojs as any).Html5Hlsjs) { | |
46 | if (player.canPlayType('application/vnd.apple.mpegurl')) { | |
47 | this.fallbackToBuiltInIOS() | |
48 | return | |
49 | } | |
50 | ||
51 | const message = 'HLS.js does not seem to be supported. Cannot fallback to built-in HLS' | |
52 | logger.warn(message) | |
53 | ||
54 | const error: MediaError = { | |
55 | code: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED, | |
56 | message, | |
57 | MEDIA_ERR_ABORTED: MediaError.MEDIA_ERR_ABORTED, | |
58 | MEDIA_ERR_DECODE: MediaError.MEDIA_ERR_DECODE, | |
59 | MEDIA_ERR_NETWORK: MediaError.MEDIA_ERR_NETWORK, | |
60 | MEDIA_ERR_SRC_NOT_SUPPORTED: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED | |
61 | } | |
62 | ||
63 | player.ready(() => player.error(error)) | |
64 | return | |
65 | } | |
66 | ||
67 | // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080 | |
68 | (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (_videojsPlayer: any, hlsjs: any) => { | |
69 | this.hlsjs = hlsjs | |
70 | }) | |
71 | ||
72 | initVideoJsContribHlsJsPlayer(player) | |
73 | ||
74 | player.src({ | |
75 | type: options.type, | |
76 | src: options.src | |
77 | }) | |
78 | ||
79 | player.ready(() => { | |
80 | this.initializeCore() | |
81 | ||
82 | this.initializePlugin() | |
83 | }) | |
84 | } | |
85 | ||
86 | dispose () { | |
87 | if (this.hlsjs) this.hlsjs.destroy() | |
88 | if (this.p2pEngine) this.p2pEngine.destroy() | |
89 | ||
90 | clearInterval(this.networkInfoInterval) | |
91 | } | |
92 | ||
93 | getCurrentLevel () { | |
94 | if (!this.hlsjs) return undefined | |
95 | ||
96 | return this.hlsjs.levels[this.hlsjs.currentLevel] | |
97 | } | |
98 | ||
99 | getLiveLatency () { | |
100 | return Math.round(this.hlsjs.latency) | |
101 | } | |
102 | ||
103 | getHLSJS () { | |
104 | return this.hlsjs | |
105 | } | |
106 | ||
107 | private initializeCore () { | |
108 | this.player.one('play', () => { | |
109 | this.player.addClass('vjs-has-big-play-button-clicked') | |
110 | }) | |
111 | ||
112 | this.player.one('canplay', () => { | |
113 | if (this.startTime) { | |
114 | this.player.currentTime(this.startTime) | |
115 | } | |
116 | }) | |
117 | } | |
118 | ||
119 | private initializePlugin () { | |
120 | initHlsJsPlayer(this.hlsjs) | |
121 | ||
122 | this.p2pEngine = this.options.loader.getEngine() | |
123 | ||
124 | this.p2pEngine.on(Events.SegmentError, (segment: Segment, err) => { | |
125 | if (navigator.onLine === false) return | |
126 | ||
127 | logger.error(`Segment ${segment.id} error.`, err) | |
128 | ||
129 | this.options.redundancyUrlManager.removeBySegmentUrl(segment.requestUrl) | |
130 | }) | |
131 | ||
132 | this.statsP2PBytes.numPeers = 1 + this.options.redundancyUrlManager.countBaseUrls() | |
133 | ||
134 | this.runStats() | |
135 | ||
136 | this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engineResolutionChange')) | |
137 | } | |
138 | ||
139 | private runStats () { | |
140 | this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, _segment, bytes: number) => { | |
141 | const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes | |
142 | ||
143 | elem.pendingDownload.push(bytes) | |
144 | elem.totalDownload += bytes | |
145 | }) | |
146 | ||
147 | this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, _segment, bytes: number) => { | |
148 | if (method !== 'p2p') { | |
149 | logger.error(`Received upload from unknown method ${method}`) | |
150 | return | |
151 | } | |
152 | ||
153 | this.statsP2PBytes.pendingUpload.push(bytes) | |
154 | this.statsP2PBytes.totalUpload += bytes | |
155 | }) | |
156 | ||
157 | this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++) | |
158 | this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--) | |
159 | ||
160 | this.networkInfoInterval = setInterval(() => { | |
161 | const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload) | |
162 | const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload) | |
163 | ||
164 | const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload) | |
165 | ||
166 | this.statsP2PBytes.pendingDownload = [] | |
167 | this.statsP2PBytes.pendingUpload = [] | |
168 | this.statsHTTPBytes.pendingDownload = [] | |
169 | ||
170 | return this.player.trigger('p2pInfo', { | |
171 | source: 'p2p-media-loader', | |
172 | http: { | |
173 | downloadSpeed: httpDownloadSpeed, | |
174 | downloaded: this.statsHTTPBytes.totalDownload | |
175 | }, | |
176 | p2p: { | |
177 | downloadSpeed: p2pDownloadSpeed, | |
178 | uploadSpeed: p2pUploadSpeed, | |
179 | numPeers: this.statsP2PBytes.numPeers, | |
180 | downloaded: this.statsP2PBytes.totalDownload, | |
181 | uploaded: this.statsP2PBytes.totalUpload | |
182 | }, | |
183 | bandwidthEstimate: (this.hlsjs as any).bandwidthEstimate / 8 | |
184 | } as PlayerNetworkInfo) | |
185 | }, this.CONSTANTS.INFO_SCHEDULER) | |
186 | } | |
187 | ||
188 | private arraySum (data: number[]) { | |
189 | return data.reduce((a: number, b: number) => a + b, 0) | |
190 | } | |
191 | ||
192 | private fallbackToBuiltInIOS () { | |
193 | logger.info('HLS.js does not seem to be supported. Fallback to built-in HLS.'); | |
194 | ||
195 | // Workaround to force video.js to not re create a video element | |
196 | (this.player as any).playerElIngest_ = this.player.el().parentNode | |
197 | ||
198 | this.player.src({ | |
199 | type: this.options.type, | |
200 | src: addQueryParams(this.options.src, { | |
201 | videoFileToken: this.options.videoFileToken(), | |
202 | reinjectVideoFileToken: 'true' | |
203 | }) | |
204 | }) | |
205 | ||
206 | this.player.ready(() => { | |
207 | this.initializeCore() | |
208 | }) | |
209 | } | |
210 | } | |
211 | ||
212 | videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin) | |
213 | export { P2pMediaLoaderPlugin } |