interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Automatic resolution according to user bandwidth V1

This commit is contained in:
Chocobozzz 2018-04-05 16:15:51 +02:00
parent 3d3441d6c7
commit a8462c8e3a
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
8 changed files with 226 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/app/shared/video/video-details.model.ts
View File

@ -3,8 +3,7 @@ import {
VideoChannel,
VideoDetails as VideoDetailsServerModel,
VideoFile,
VideoPrivacy,
VideoResolution
VideoPrivacy
} from '../../../../../shared'
import { Account } from '../../../../../shared/models/actors'
import { VideoConstant } from '../../../../../shared/models/videos/video.model'
@ -39,21 +38,6 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
this.buildLikeAndDislikePercents()
}
getAppropriateMagnetUri (actualDownloadSpeed = 0) {
if (this.files === undefined || this.files.length === 0) return ''
if (this.files.length === 1) return this.files[0].magnetUri
// Find first video that is good for our download speed (remember they are sorted)
let betterResolutionFile = this.files.find(f => actualDownloadSpeed > (f.size / this.duration))
// If the download speed is too bad, return the lowest resolution we have
if (betterResolutionFile === undefined) {
betterResolutionFile = this.files.find(f => f.resolution.id === VideoResolution.H_240P)
}
return betterResolutionFile.magnetUri
}
isRemovableBy (user: AuthUser) {
return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.REMOVE_ANY_VIDEO))
}

168
client/src/assets/player/peertube-videojs-plugin.ts
View File

@ -4,7 +4,16 @@ import { VideoFile } from '../../../../shared/models/videos/video.model'
import { renderVideo } from './video-renderer'
import './settings-menu-button'
import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
import { getStoredMute, getStoredVolume, saveMuteInStore, saveVolumeInStore } from './utils'
import {
getAverageBandwidth,
getStoredMute,
getStoredVolume,
saveAverageBandwidth,
saveMuteInStore,
saveVolumeInStore
} from './utils'
import minBy from 'lodash-es/minBy'
import maxBy from 'lodash-es/maxBy'
const webtorrent = new WebTorrent({
tracker: {
@ -25,16 +34,31 @@ const webtorrent = new WebTorrent({
const Plugin: VideoJSComponentInterface = videojsUntyped.getPlugin('plugin')
class PeerTubePlugin extends Plugin {
private readonly playerElement: HTMLVideoElement
private readonly autoplay: boolean = false
private readonly savePlayerSrcFunction: Function
private readonly videoFiles: VideoFile[]
private readonly videoViewUrl: string
private readonly videoDuration: number
private readonly CONSTANTS = {
INFO_SCHEDULER: 1000, // Don't change this
AUTO_QUALITY_SCHEDULER: 3000, // Check quality every 3 seconds
AUTO_QUALITY_THRESHOLD_PERCENT: 30, // Bandwidth should be 30% more important than a resolution bitrate to change to it
AUTO_QUALITY_OBSERVATION_TIME: 10000, // Wait 10 seconds before potentially changing the definition
AUTO_QUALITY_UPPER_RESOLUTION_DELAY: 5000, // Buffer upper resolution during 5 seconds
BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5 // Last 5 seconds to build average bandwidth
}
private player: any
private currentVideoFile: VideoFile
private videoFiles: VideoFile[]
private torrent: WebTorrent.Torrent
private videoViewUrl: string
private videoDuration: number
private videoViewInterval
private torrentInfoInterval
private autoQualityInterval
private autoResolution = true
private isAutoResolutionObservation = false
private downloadSpeeds: number[] = []
constructor (player: videojs.Player, options: PeertubePluginOptions) {
super(player, options)
@ -64,6 +88,11 @@ class PeerTubePlugin extends Plugin {
this.initializePlayer()
this.runTorrentInfoScheduler()
this.runViewAdd()
this.player.one('play', () => {
// Don't run immediately scheduler, wait some seconds the TCP connections are maid
setTimeout(() => this.runAutoQualityScheduler(), this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
})
})
this.player.on('volumechange', () => {
@ -75,6 +104,7 @@ class PeerTubePlugin extends Plugin {
dispose () {
clearInterval(this.videoViewInterval)
clearInterval(this.torrentInfoInterval)
clearInterval(this.autoQualityInterval)
// Don't need to destroy renderer, video player will be destroyed
this.flushVideoFile(this.currentVideoFile, false)
@ -88,14 +118,17 @@ class PeerTubePlugin extends Plugin {
return this.currentVideoFile ? this.currentVideoFile.resolution.label : ''
}
updateVideoFile (videoFile?: VideoFile, done?: () => void) {
updateVideoFile (videoFile?: VideoFile, delay = 0, done?: () => void) {
if (done === undefined) {
done = () => { /* empty */ }
}
// Pick the first one
// Automatically choose the adapted video file
if (videoFile === undefined) {
videoFile = this.videoFiles[0]
const savedAverageBandwidth = getAverageBandwidth()
videoFile = savedAverageBandwidth
? this.getAppropriateFile(savedAverageBandwidth)
: this.videoFiles[0]
}
// Don't add the same video file once again
@ -112,7 +145,7 @@ class PeerTubePlugin extends Plugin {
const previousVideoFile = this.currentVideoFile
this.currentVideoFile = videoFile
this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, () => {
this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, delay, () => {
this.player.playbackRate(oldPlaybackRate)
return done()
})
@ -120,12 +153,21 @@ class PeerTubePlugin extends Plugin {
this.trigger('videoFileUpdate')
}
addTorrent (magnetOrTorrentUrl: string, previousVideoFile: VideoFile, done: Function) {
addTorrent (magnetOrTorrentUrl: string, previousVideoFile: VideoFile, delay = 0, done: Function) {
console.log('Adding ' + magnetOrTorrentUrl + '.')
const oldTorrent = this.torrent
this.torrent = webtorrent.add(magnetOrTorrentUrl, torrent => {
console.log('Added ' + magnetOrTorrentUrl + '.')
// Pause the old torrent
if (oldTorrent) {
oldTorrent.pause()
// Pause does not remove actual peers (in particular the webseed peer)
oldTorrent.removePeer(oldTorrent['ws'])
}
setTimeout(() => {
this.flushVideoFile(previousVideoFile)
const options = { autoplay: true, controls: true }
@ -143,6 +185,7 @@ class PeerTubePlugin extends Plugin {
return done()
})
}, delay)
})
this.torrent.on('error', err => this.handleError(err))
@ -160,14 +203,14 @@ class PeerTubePlugin extends Plugin {
// Magnet hash is not up to date with the torrent file, add directly the torrent file
if (err.message.indexOf('incorrect info hash') !== -1) {
console.error('Incorrect info hash detected, falling back to torrent file.')
return this.addTorrent(this.torrent['xs'], previousVideoFile, done)
return this.addTorrent(this.torrent['xs'], previousVideoFile, 0, done)
}
return this.handleError(err)
})
}
updateResolution (resolutionId: number) {
updateResolution (resolutionId: number, delay = 0) {
// Remember player state
const currentTime = this.player.currentTime()
const isPaused = this.player.paused()
@ -181,7 +224,7 @@ class PeerTubePlugin extends Plugin {
}
const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId)
this.updateVideoFile(newVideoFile, () => {
this.updateVideoFile(newVideoFile, delay, () => {
this.player.currentTime(currentTime)
this.player.handleTechSeeked_()
})
@ -196,14 +239,58 @@ class PeerTubePlugin extends Plugin {
}
}
setVideoFiles (files: VideoFile[], videoViewUrl: string, videoDuration: number) {
this.videoViewUrl = videoViewUrl
this.videoDuration = videoDuration
this.videoFiles = files
isAutoResolutionOn () {
return this.autoResolution
}
// Re run view add for the new video
this.runViewAdd()
this.updateVideoFile(undefined, () => this.player.play())
enableAutoResolution () {
this.autoResolution = true
this.trigger('autoResolutionUpdate')
}
disableAutoResolution () {
this.autoResolution = false
this.trigger('autoResolutionUpdate')
}
private getAppropriateFile (averageDownloadSpeed?: number): VideoFile {
if (this.videoFiles === undefined || this.videoFiles.length === 0) return undefined
if (this.videoFiles.length === 1) return this.videoFiles[0]
if (this.torrent && this.torrent.progress === 1) return this.currentVideoFile
if (!averageDownloadSpeed) averageDownloadSpeed = this.getActualDownloadSpeed()
// Filter videos we can play according to our bandwidth
const filteredFiles = this.videoFiles.filter(f => {
const fileBitrate = (f.size / this.videoDuration)
let threshold = fileBitrate
// If this is for a higher resolution, or an initial load -> add a upper margin
if (!this.currentVideoFile || f.resolution.id > this.currentVideoFile.resolution.id) {
threshold += ((fileBitrate * this.CONSTANTS.AUTO_QUALITY_THRESHOLD_PERCENT) / 100)
}
return averageDownloadSpeed > threshold
})
// If the download speed is too bad, return the lowest resolution we have
if (filteredFiles.length === 0) return minBy(this.videoFiles, 'resolution.id')
return maxBy(filteredFiles, 'resolution.id')
}
private getActualDownloadSpeed () {
const start = Math.max(this.downloadSpeeds.length - this.CONSTANTS.BANDWIDTH_AVERAGE_NUMBER_OF_VALUES, 0)
const lastDownloadSpeeds = this.downloadSpeeds.slice(start, this.downloadSpeeds.length)
if (lastDownloadSpeeds.length === 0) return -1
const sum = lastDownloadSpeeds.reduce((a, b) => a + b)
const averageBandwidth = Math.round(sum / lastDownloadSpeeds.length)
// Save the average bandwidth for future use
saveAverageBandwidth(averageBandwidth)
return averageBandwidth
}
private initializePlayer () {
@ -213,17 +300,51 @@ class PeerTubePlugin extends Plugin {
if (this.autoplay === true) {
this.player.posterImage.hide()
this.updateVideoFile(undefined, () => this.player.play())
this.updateVideoFile(undefined, 0, () => this.player.play())
} else {
// Proxy first play
const oldPlay = this.player.play.bind(this.player)
this.player.play = () => {
this.updateVideoFile(undefined, () => oldPlay)
this.updateVideoFile(undefined, 0, () => oldPlay)
this.player.play = oldPlay
}
}
}
private runAutoQualityScheduler () {
this.autoQualityInterval = setInterval(() => {
if (this.torrent === undefined) return
if (this.isAutoResolutionOn() === false) return
if (this.isAutoResolutionObservation === true) return
const file = this.getAppropriateFile()
let changeResolution = false
let changeResolutionDelay = 0
// Lower resolution
if (this.isPlayerWaiting() && file.resolution.id < this.currentVideoFile.resolution.id) {
console.log('Downgrading automatically the resolution to: %s', file.resolution.label)
changeResolution = true
} else if (file.resolution.id > this.currentVideoFile.resolution.id) { // Greater resolution
console.log('Upgrading automatically the resolution to: %s', file.resolution.label)
changeResolution = true
changeResolutionDelay = this.CONSTANTS.AUTO_QUALITY_UPPER_RESOLUTION_DELAY
}
if (changeResolution === true) {
this.updateResolution(file.resolution.id, changeResolutionDelay)
// Wait some seconds in observation of our new resolution
this.isAutoResolutionObservation = true
setTimeout(() => this.isAutoResolutionObservation = false, this.CONSTANTS.AUTO_QUALITY_OBSERVATION_TIME)
}
}, this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
}
private isPlayerWaiting () {
return this.player.hasClass('vjs-waiting')
}
private runTorrentInfoScheduler () {
this.torrentInfoInterval = setInterval(() => {
// Not initialized yet
@ -232,12 +353,15 @@ class PeerTubePlugin extends Plugin {
// Http fallback
if (this.torrent === null) return this.trigger('torrentInfo', false)
// webtorrent.downloadSpeed because we need to take into account the potential old torrent too
if (webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(webtorrent.downloadSpeed)
return this.trigger('torrentInfo', {
downloadSpeed: this.torrent.downloadSpeed,
numPeers: this.torrent.numPeers,
uploadSpeed: this.torrent.uploadSpeed
})
}, 1000)
}, this.CONSTANTS.INFO_SCHEDULER)
}
private runViewAdd () {

17
client/src/assets/player/resolution-menu-button.ts
View File

@ -22,7 +22,7 @@ class ResolutionMenuButton extends MenuButton {
this.labelEl_ = videojsUntyped.dom.createEl('div', {
className: 'vjs-resolution-value',
innerHTML: this.player_.peertube().getCurrentResolutionLabel()
innerHTML: this.buildLabelHTML()
})
el.appendChild(this.labelEl_)
@ -47,13 +47,22 @@ class ResolutionMenuButton extends MenuButton {
)
}
menu.addChild(new ResolutionMenuItem(
this.player_,
{
id: -1,
label: 'Auto',
src: null
}
))
return menu
}
updateLabel () {
if (!this.labelEl_) return
this.labelEl_.innerHTML = this.player_.peertube().getCurrentResolutionLabel()
this.labelEl_.innerHTML = this.buildLabelHTML()
}
buildCSSClass () {
@ -63,5 +72,9 @@ class ResolutionMenuButton extends MenuButton {
buildWrapperCSSClass () {
return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
}
private buildLabelHTML () {
return this.player_.peertube().getCurrentResolutionLabel()
}
}
MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)

21
client/src/assets/player/resolution-menu-item.ts
View File

@ -14,17 +14,38 @@ class ResolutionMenuItem extends MenuItem {
this.id = options.id
player.peertube().on('videoFileUpdate', () => this.updateSelection())
player.peertube().on('autoResolutionUpdate', () => this.updateSelection())
}
handleClick (event) {
super.handleClick(event)
// Auto resolution
if (this.id === -1) {
this.player_.peertube().enableAutoResolution()
return
}
this.player_.peertube().disableAutoResolution()
this.player_.peertube().updateResolution(this.id)
}
updateSelection () {
if (this.player_.peertube().isAutoResolutionOn()) {
this.selected(this.id === -1)
return
}
this.selected(this.player_.peertube().getCurrentResolutionId() === this.id)
}
getLabel () {
if (this.id === -1) {
return this.label + ' <small>' + this.player_.peertube().getCurrentResolutionLabel() + '</small>'
}
return this.label
}
}
MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)

17
client/src/assets/player/settings-menu-item.ts
View File

@ -241,21 +241,14 @@ class SettingsMenuItem extends MenuItem {
continue
}
switch (subMenu) {
case 'SubtitlesButton':
case 'CaptionsButton':
// subtitlesButton entering default check twice and overwriting
// selected label in main manu
if (subMenuItem.hasClass('vjs-selected')) {
this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label
}
// Prefer to use the function
if (typeof subMenuItem.getLabel === 'function') {
this.settingsSubMenuValueEl_.innerHTML = subMenuItem.getLabel()
break
default:
// Set submenu value based on what item is selected
if (subMenuItem.options_.selected || subMenuItem.hasClass('vjs-selected')) {
this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label
}
this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label
}
}
}

18
client/src/assets/player/utils.ts
View File

@ -36,6 +36,18 @@ function getStoredMute () {
return undefined
}
function getAverageBandwidth () {
const value = getLocalStorage('average-bandwidth')
if (value !== null && value !== undefined) {
const valueNumber = parseInt(value, 10)
if (isNaN(valueNumber)) return undefined
return valueNumber
}
return undefined
}
function saveVolumeInStore (value: number) {
return setLocalStorage('volume', value.toString())
}
@ -44,10 +56,16 @@ function saveMuteInStore (value: boolean) {
return setLocalStorage('mute', value.toString())
}
function saveAverageBandwidth (value: number) {
return setLocalStorage('average-bandwidth', value.toString())
}
export {
toTitleCase,
getStoredVolume,
saveVolumeInStore,
saveAverageBandwidth,
getAverageBandwidth,
saveMuteInStore,
getStoredMute,
bytes

5
client/src/sass/video-js-custom.scss
View File

@ -641,6 +641,11 @@ $setting-transition-easing: ease-out;
.vjs-settings-sub-menu-value {
width: 100%;
text-align: right;
small {
font-size: 0.85em;
opacity: 0.8;
}
}
.vjs-settings-panel {

4
server/models/video/video.ts
View File

@ -28,7 +28,7 @@ import {
} from 'sequelize-typescript'
import { VideoPrivacy, VideoResolution } from '../../../shared'
import { VideoTorrentObject } from '../../../shared/models/activitypub/objects'
import { Video, VideoDetails } from '../../../shared/models/videos'
import { Video, VideoDetails, VideoFile } from '../../../shared/models/videos'
import { VideoFilter } from '../../../shared/models/videos/video-query.type'
import { activityPubCollection } from '../../helpers/activitypub'
import {
@ -1020,7 +1020,7 @@ export class VideoModel extends Model<VideoModel> {
size: videoFile.size,
torrentUrl: this.getTorrentUrl(videoFile, baseUrlHttp),
fileUrl: this.getVideoFileUrl(videoFile, baseUrlHttp)
}
} as VideoFile
})
.sort((a, b) => {
if (a.resolution.id < b.resolution.id) return 1