]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/assets/player/webtorrent/webtorrent-plugin.ts
Try to fix mock server ports
[github/Chocobozzz/PeerTube.git] / client / src / assets / player / webtorrent / webtorrent-plugin.ts
1 import videojs from 'video.js'
2 import * as WebTorrent from 'webtorrent'
3 import { timeToInt } from '@shared/core-utils'
4 import { VideoFile } from '@shared/models'
5 import {
6 getAverageBandwidthInStore,
7 getStoredMute,
8 getStoredP2PEnabled,
9 getStoredVolume,
10 saveAverageBandwidth
11 } from '../peertube-player-local-storage'
12 import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
13 import { getRtcConfig, isIOS, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
14 import { PeertubeChunkStore } from './peertube-chunk-store'
15 import { renderVideo } from './video-renderer'
16
17 const CacheChunkStore = require('cache-chunk-store')
18
19 type PlayOptions = {
20 forcePlay?: boolean
21 seek?: number
22 delay?: number
23 }
24
25 const Plugin = videojs.getPlugin('plugin')
26
27 class WebTorrentPlugin extends Plugin {
28 readonly videoFiles: VideoFile[]
29
30 private readonly playerElement: HTMLVideoElement
31
32 private readonly autoplay: boolean = false
33 private readonly startTime: number = 0
34 private readonly savePlayerSrcFunction: videojs.Player['src']
35 private readonly videoDuration: number
36 private readonly CONSTANTS = {
37 INFO_SCHEDULER: 1000, // Don't change this
38 AUTO_QUALITY_SCHEDULER: 3000, // Check quality every 3 seconds
39 AUTO_QUALITY_THRESHOLD_PERCENT: 30, // Bandwidth should be 30% more important than a resolution bitrate to change to it
40 AUTO_QUALITY_OBSERVATION_TIME: 10000, // Wait 10 seconds after having change the resolution before another check
41 AUTO_QUALITY_HIGHER_RESOLUTION_DELAY: 5000, // Buffering higher resolution during 5 seconds
42 BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5 // Last 5 seconds to build average bandwidth
43 }
44
45 private readonly webtorrent = new WebTorrent({
46 tracker: {
47 rtcConfig: getRtcConfig()
48 },
49 dht: false
50 })
51
52 private currentVideoFile: VideoFile
53 private torrent: WebTorrent.Torrent
54
55 private renderer: any
56 private fakeRenderer: any
57 private destroyingFakeRenderer = false
58
59 private autoResolution = true
60 private autoResolutionPossible = true
61 private isAutoResolutionObservation = false
62 private playerRefusedP2P = false
63
64 private torrentInfoInterval: any
65 private autoQualityInterval: any
66 private addTorrentDelay: any
67 private qualityObservationTimer: any
68 private runAutoQualitySchedulerTimer: any
69
70 private downloadSpeeds: number[] = []
71
72 constructor (player: videojs.Player, options?: WebtorrentPluginOptions) {
73 super(player)
74
75 this.startTime = timeToInt(options.startTime)
76
77 // Disable auto play on iOS
78 this.autoplay = options.autoplay
79 this.playerRefusedP2P = !getStoredP2PEnabled()
80
81 this.videoFiles = options.videoFiles
82 this.videoDuration = options.videoDuration
83
84 this.savePlayerSrcFunction = this.player.src
85 this.playerElement = options.playerElement
86
87 this.player.ready(() => {
88 const playerOptions = this.player.options_
89
90 const volume = getStoredVolume()
91 if (volume !== undefined) this.player.volume(volume)
92
93 const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
94 if (muted !== undefined) this.player.muted(muted)
95
96 this.player.duration(options.videoDuration)
97
98 this.initializePlayer()
99 this.runTorrentInfoScheduler()
100
101 this.player.one('play', () => {
102 // Don't run immediately scheduler, wait some seconds the TCP connections are made
103 this.runAutoQualitySchedulerTimer = setTimeout(() => this.runAutoQualityScheduler(), this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
104 })
105 })
106 }
107
108 dispose () {
109 clearTimeout(this.addTorrentDelay)
110 clearTimeout(this.qualityObservationTimer)
111 clearTimeout(this.runAutoQualitySchedulerTimer)
112
113 clearInterval(this.torrentInfoInterval)
114 clearInterval(this.autoQualityInterval)
115
116 // Don't need to destroy renderer, video player will be destroyed
117 this.flushVideoFile(this.currentVideoFile, false)
118
119 this.destroyFakeRenderer()
120 }
121
122 getCurrentResolutionId () {
123 return this.currentVideoFile ? this.currentVideoFile.resolution.id : -1
124 }
125
126 updateVideoFile (
127 videoFile?: VideoFile,
128 options: {
129 forcePlay?: boolean
130 seek?: number
131 delay?: number
132 } = {},
133 done: () => void = () => { /* empty */ }
134 ) {
135 // Automatically choose the adapted video file
136 if (!videoFile) {
137 const savedAverageBandwidth = getAverageBandwidthInStore()
138 videoFile = savedAverageBandwidth
139 ? this.getAppropriateFile(savedAverageBandwidth)
140 : this.pickAverageVideoFile()
141 }
142
143 if (!videoFile) {
144 throw Error(`Can't update video file since videoFile is undefined.`)
145 }
146
147 // Don't add the same video file once again
148 if (this.currentVideoFile !== undefined && this.currentVideoFile.magnetUri === videoFile.magnetUri) {
149 return
150 }
151
152 // Do not display error to user because we will have multiple fallback
153 this.disableErrorDisplay();
154
155 // Hack to "simulate" src link in video.js >= 6
156 // Without this, we can't play the video after pausing it
157 // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
158 (this.player as any).src = () => true
159 const oldPlaybackRate = this.player.playbackRate()
160
161 const previousVideoFile = this.currentVideoFile
162 this.currentVideoFile = videoFile
163
164 // Don't try on iOS that does not support MediaSource
165 // Or don't use P2P if webtorrent is disabled
166 if (isIOS() || this.playerRefusedP2P) {
167 return this.fallbackToHttp(options, () => {
168 this.player.playbackRate(oldPlaybackRate)
169 return done()
170 })
171 }
172
173 this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, options, () => {
174 this.player.playbackRate(oldPlaybackRate)
175 return done()
176 })
177
178 this.changeQuality()
179 this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.currentVideoFile.resolution.id })
180 }
181
182 updateResolution (resolutionId: number, delay = 0) {
183 // Remember player state
184 const currentTime = this.player.currentTime()
185 const isPaused = this.player.paused()
186
187 // Hide bigPlayButton
188 if (!isPaused) {
189 this.player.bigPlayButton.hide()
190 }
191
192 // Audio-only (resolutionId === 0) gets special treatment
193 if (resolutionId === 0) {
194 // Audio-only: show poster, do not auto-hide controls
195 this.player.addClass('vjs-playing-audio-only-content')
196 this.player.posterImage.show()
197 } else {
198 // Hide poster to have black background
199 this.player.removeClass('vjs-playing-audio-only-content')
200 this.player.posterImage.hide()
201 }
202
203 const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId)
204 const options = {
205 forcePlay: false,
206 delay,
207 seek: currentTime + (delay / 1000)
208 }
209
210 this.updateVideoFile(newVideoFile, options)
211 }
212
213 flushVideoFile (videoFile: VideoFile, destroyRenderer = true) {
214 if (videoFile !== undefined && this.webtorrent.get(videoFile.magnetUri)) {
215 if (destroyRenderer === true && this.renderer && this.renderer.destroy) this.renderer.destroy()
216
217 this.webtorrent.remove(videoFile.magnetUri)
218 console.log('Removed ' + videoFile.magnetUri)
219 }
220 }
221
222 enableAutoResolution () {
223 this.autoResolution = true
224 this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.getCurrentResolutionId() })
225 }
226
227 disableAutoResolution (forbid = false) {
228 if (forbid === true) this.autoResolutionPossible = false
229
230 this.autoResolution = false
231 this.trigger('autoResolutionChange', { possible: this.autoResolutionPossible })
232 this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.getCurrentResolutionId() })
233 }
234
235 isAutoResolutionPossible () {
236 return this.autoResolutionPossible
237 }
238
239 getTorrent () {
240 return this.torrent
241 }
242
243 getCurrentVideoFile () {
244 return this.currentVideoFile
245 }
246
247 private addTorrent (
248 magnetOrTorrentUrl: string,
249 previousVideoFile: VideoFile,
250 options: PlayOptions,
251 done: (err?: Error) => void
252 ) {
253 if (!magnetOrTorrentUrl) return this.fallbackToHttp(options, done)
254
255 console.log('Adding ' + magnetOrTorrentUrl + '.')
256
257 const oldTorrent = this.torrent
258 const torrentOptions = {
259 // Don't use arrow function: it breaks webtorrent (that uses `new` keyword)
260 store: function (chunkLength: number, storeOpts: any) {
261 return new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
262 max: 100
263 })
264 }
265 }
266
267 this.torrent = this.webtorrent.add(magnetOrTorrentUrl, torrentOptions, torrent => {
268 console.log('Added ' + magnetOrTorrentUrl + '.')
269
270 if (oldTorrent) {
271 // Pause the old torrent
272 this.stopTorrent(oldTorrent)
273
274 // We use a fake renderer so we download correct pieces of the next file
275 if (options.delay) this.renderFileInFakeElement(torrent.files[0], options.delay)
276 }
277
278 // Render the video in a few seconds? (on resolution change for example, we wait some seconds of the new video resolution)
279 this.addTorrentDelay = setTimeout(() => {
280 // We don't need the fake renderer anymore
281 this.destroyFakeRenderer()
282
283 const paused = this.player.paused()
284
285 this.flushVideoFile(previousVideoFile)
286
287 // Update progress bar (just for the UI), do not wait rendering
288 if (options.seek) this.player.currentTime(options.seek)
289
290 const renderVideoOptions = { autoplay: false, controls: true }
291 renderVideo(torrent.files[0], this.playerElement, renderVideoOptions, (err, renderer) => {
292 this.renderer = renderer
293
294 if (err) return this.fallbackToHttp(options, done)
295
296 return this.tryToPlay(err => {
297 if (err) return done(err)
298
299 if (options.seek) this.seek(options.seek)
300 if (options.forcePlay === false && paused === true) this.player.pause()
301
302 return done()
303 })
304 })
305 }, options.delay || 0)
306 })
307
308 this.torrent.on('error', (err: any) => console.error(err))
309
310 this.torrent.on('warning', (err: any) => {
311 // We don't support HTTP tracker but we don't care -> we use the web socket tracker
312 if (err.message.indexOf('Unsupported tracker protocol') !== -1) return
313
314 // Users don't care about issues with WebRTC, but developers do so log it in the console
315 if (err.message.indexOf('Ice connection failed') !== -1) {
316 console.log(err)
317 return
318 }
319
320 // Magnet hash is not up to date with the torrent file, add directly the torrent file
321 if (err.message.indexOf('incorrect info hash') !== -1) {
322 console.error('Incorrect info hash detected, falling back to torrent file.')
323 const newOptions = { forcePlay: true, seek: options.seek }
324 return this.addTorrent(this.torrent['xs'], previousVideoFile, newOptions, done)
325 }
326
327 // Remote instance is down
328 if (err.message.indexOf('from xs param') !== -1) {
329 this.handleError(err)
330 }
331
332 console.warn(err)
333 })
334 }
335
336 private tryToPlay (done?: (err?: Error) => void) {
337 if (!done) done = function () { /* empty */ }
338
339 const playPromise = this.player.play()
340 if (playPromise !== undefined) {
341 return playPromise.then(() => done())
342 .catch((err: Error) => {
343 if (err.message.includes('The play() request was interrupted by a call to pause()')) {
344 return
345 }
346
347 console.error(err)
348 this.player.pause()
349 this.player.posterImage.show()
350 this.player.removeClass('vjs-has-autoplay')
351 this.player.removeClass('vjs-has-big-play-button-clicked')
352 this.player.removeClass('vjs-playing-audio-only-content')
353
354 return done()
355 })
356 }
357
358 return done()
359 }
360
361 private seek (time: number) {
362 this.player.currentTime(time)
363 this.player.handleTechSeeked_()
364 }
365
366 private getAppropriateFile (averageDownloadSpeed?: number): VideoFile {
367 if (this.videoFiles === undefined) return undefined
368
369 const files = this.videoFiles.filter(f => f.resolution.id !== 0)
370
371 if (files.length === 0) return undefined
372 if (files.length === 1) return files[0]
373
374 // Don't change the torrent if the player ended
375 if (this.torrent && this.torrent.progress === 1 && this.player.ended()) return this.currentVideoFile
376
377 if (!averageDownloadSpeed) averageDownloadSpeed = this.getAndSaveActualDownloadSpeed()
378
379 // Limit resolution according to player height
380 const playerHeight = this.playerElement.offsetHeight
381
382 // We take the first resolution just above the player height
383 // Example: player height is 530px, we want the 720p file instead of 480p
384 let maxResolution = files[0].resolution.id
385 for (let i = files.length - 1; i >= 0; i--) {
386 const resolutionId = files[i].resolution.id
387 if (resolutionId !== 0 && resolutionId >= playerHeight) {
388 maxResolution = resolutionId
389 break
390 }
391 }
392
393 // Filter videos we can play according to our screen resolution and bandwidth
394 const filteredFiles = files.filter(f => f.resolution.id <= maxResolution)
395 .filter(f => {
396 const fileBitrate = (f.size / this.videoDuration)
397 let threshold = fileBitrate
398
399 // If this is for a higher resolution or an initial load: add a margin
400 if (!this.currentVideoFile || f.resolution.id > this.currentVideoFile.resolution.id) {
401 threshold += ((fileBitrate * this.CONSTANTS.AUTO_QUALITY_THRESHOLD_PERCENT) / 100)
402 }
403
404 return averageDownloadSpeed > threshold
405 })
406
407 // If the download speed is too bad, return the lowest resolution we have
408 if (filteredFiles.length === 0) return videoFileMinByResolution(files)
409
410 return videoFileMaxByResolution(filteredFiles)
411 }
412
413 private getAndSaveActualDownloadSpeed () {
414 const start = Math.max(this.downloadSpeeds.length - this.CONSTANTS.BANDWIDTH_AVERAGE_NUMBER_OF_VALUES, 0)
415 const lastDownloadSpeeds = this.downloadSpeeds.slice(start, this.downloadSpeeds.length)
416 if (lastDownloadSpeeds.length === 0) return -1
417
418 const sum = lastDownloadSpeeds.reduce((a, b) => a + b)
419 const averageBandwidth = Math.round(sum / lastDownloadSpeeds.length)
420
421 // Save the average bandwidth for future use
422 saveAverageBandwidth(averageBandwidth)
423
424 return averageBandwidth
425 }
426
427 private initializePlayer () {
428 this.buildQualities()
429
430 if (this.autoplay) {
431 this.player.posterImage.hide()
432
433 return this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
434 }
435
436 // Proxy first play
437 const oldPlay = this.player.play.bind(this.player);
438 (this.player as any).play = () => {
439 this.player.addClass('vjs-has-big-play-button-clicked')
440 this.player.play = oldPlay
441
442 this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
443 }
444 }
445
446 private runAutoQualityScheduler () {
447 this.autoQualityInterval = setInterval(() => {
448
449 // Not initialized or in HTTP fallback
450 if (this.torrent === undefined || this.torrent === null) return
451 if (this.autoResolution === false) return
452 if (this.isAutoResolutionObservation === true) return
453
454 const file = this.getAppropriateFile()
455 let changeResolution = false
456 let changeResolutionDelay = 0
457
458 // Lower resolution
459 if (this.isPlayerWaiting() && file.resolution.id < this.currentVideoFile.resolution.id) {
460 console.log('Downgrading automatically the resolution to: %s', file.resolution.label)
461 changeResolution = true
462 } else if (file.resolution.id > this.currentVideoFile.resolution.id) { // Higher resolution
463 console.log('Upgrading automatically the resolution to: %s', file.resolution.label)
464 changeResolution = true
465 changeResolutionDelay = this.CONSTANTS.AUTO_QUALITY_HIGHER_RESOLUTION_DELAY
466 }
467
468 if (changeResolution === true) {
469 this.updateResolution(file.resolution.id, changeResolutionDelay)
470
471 // Wait some seconds in observation of our new resolution
472 this.isAutoResolutionObservation = true
473
474 this.qualityObservationTimer = setTimeout(() => {
475 this.isAutoResolutionObservation = false
476 }, this.CONSTANTS.AUTO_QUALITY_OBSERVATION_TIME)
477 }
478 }, this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
479 }
480
481 private isPlayerWaiting () {
482 return this.player?.hasClass('vjs-waiting')
483 }
484
485 private runTorrentInfoScheduler () {
486 this.torrentInfoInterval = setInterval(() => {
487 // Not initialized yet
488 if (this.torrent === undefined) return
489
490 // Http fallback
491 if (this.torrent === null) return this.player.trigger('p2pInfo', false)
492
493 // this.webtorrent.downloadSpeed because we need to take into account the potential old torrent too
494 if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed)
495
496 return this.player.trigger('p2pInfo', {
497 source: 'webtorrent',
498 http: {
499 downloadSpeed: 0,
500 uploadSpeed: 0,
501 downloaded: 0,
502 uploaded: 0
503 },
504 p2p: {
505 downloadSpeed: this.torrent.downloadSpeed,
506 numPeers: this.torrent.numPeers,
507 uploadSpeed: this.torrent.uploadSpeed,
508 downloaded: this.torrent.downloaded,
509 uploaded: this.torrent.uploaded
510 },
511 bandwidthEstimate: this.webtorrent.downloadSpeed
512 } as PlayerNetworkInfo)
513 }, this.CONSTANTS.INFO_SCHEDULER)
514 }
515
516 private fallbackToHttp (options: PlayOptions, done?: (err?: Error) => void) {
517 const paused = this.player.paused()
518
519 this.disableAutoResolution(true)
520
521 this.flushVideoFile(this.currentVideoFile, true)
522 this.torrent = null
523
524 // Enable error display now this is our last fallback
525 this.player.one('error', () => this.enableErrorDisplay())
526
527 const httpUrl = this.currentVideoFile.fileUrl
528 this.player.src = this.savePlayerSrcFunction
529 this.player.src(httpUrl)
530
531 this.changeQuality()
532
533 // We changed the source, so reinit captions
534 this.player.trigger('sourcechange')
535
536 return this.tryToPlay(err => {
537 if (err && done) return done(err)
538
539 if (options.seek) this.seek(options.seek)
540 if (options.forcePlay === false && paused === true) this.player.pause()
541
542 if (done) return done()
543 })
544 }
545
546 private handleError (err: Error | string) {
547 return this.player.trigger('customError', { err })
548 }
549
550 private enableErrorDisplay () {
551 this.player.addClass('vjs-error-display-enabled')
552 }
553
554 private disableErrorDisplay () {
555 this.player.removeClass('vjs-error-display-enabled')
556 }
557
558 private pickAverageVideoFile () {
559 if (this.videoFiles.length === 1) return this.videoFiles[0]
560
561 const files = this.videoFiles.filter(f => f.resolution.id !== 0)
562 return files[Math.floor(files.length / 2)]
563 }
564
565 private stopTorrent (torrent: WebTorrent.Torrent) {
566 torrent.pause()
567 // Pause does not remove actual peers (in particular the webseed peer)
568 torrent.removePeer(torrent['ws'])
569 }
570
571 private renderFileInFakeElement (file: WebTorrent.TorrentFile, delay: number) {
572 this.destroyingFakeRenderer = false
573
574 const fakeVideoElem = document.createElement('video')
575 renderVideo(file, fakeVideoElem, { autoplay: false, controls: false }, (err, renderer) => {
576 this.fakeRenderer = renderer
577
578 // The renderer returns an error when we destroy it, so skip them
579 if (this.destroyingFakeRenderer === false && err) {
580 console.error('Cannot render new torrent in fake video element.', err)
581 }
582
583 // Load the future file at the correct time (in delay MS - 2 seconds)
584 fakeVideoElem.currentTime = this.player.currentTime() + (delay - 2000)
585 })
586 }
587
588 private destroyFakeRenderer () {
589 if (this.fakeRenderer) {
590 this.destroyingFakeRenderer = true
591
592 if (this.fakeRenderer.destroy) {
593 try {
594 this.fakeRenderer.destroy()
595 } catch (err) {
596 console.log('Cannot destroy correctly fake renderer.', err)
597 }
598 }
599 this.fakeRenderer = undefined
600 }
601 }
602
603 private buildQualities () {
604 const qualityLevelsPayload = []
605
606 for (const file of this.videoFiles) {
607 const representation = {
608 id: file.resolution.id,
609 label: this.buildQualityLabel(file),
610 height: file.resolution.id,
611 _enabled: true
612 }
613
614 this.player.qualityLevels().addQualityLevel(representation)
615
616 qualityLevelsPayload.push({
617 id: representation.id,
618 label: representation.label,
619 selected: false
620 })
621 }
622
623 const payload: LoadedQualityData = {
624 qualitySwitchCallback: (d: any) => this.qualitySwitchCallback(d),
625 qualityData: {
626 video: qualityLevelsPayload
627 }
628 }
629 this.player.tech(true).trigger('loadedqualitydata', payload)
630 }
631
632 private buildQualityLabel (file: VideoFile) {
633 let label = file.resolution.label
634
635 if (file.fps && file.fps >= 50) {
636 label += file.fps
637 }
638
639 return label
640 }
641
642 private qualitySwitchCallback (id: number) {
643 if (id === -1) {
644 if (this.autoResolutionPossible === true) this.enableAutoResolution()
645 return
646 }
647
648 this.disableAutoResolution()
649 this.updateResolution(id)
650 }
651
652 private changeQuality () {
653 const resolutionId = this.currentVideoFile.resolution.id as number
654 const qualityLevels = this.player.qualityLevels()
655
656 if (resolutionId === -1) {
657 qualityLevels.selectedIndex = -1
658 return
659 }
660
661 for (let i = 0; i < qualityLevels.length; i++) {
662 const q = qualityLevels[i]
663 if (q.height === resolutionId) qualityLevels.selectedIndex_ = i
664 }
665 }
666 }
667
668 videojs.registerPlugin('webtorrent', WebTorrentPlugin)
669 export { WebTorrentPlugin }