Add hls support on server

14 files changed, 278 insertions, 64 deletions

diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index 0b3511e8e..021b1feb4 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -22,7 +22,9 @@ export abstract class UserEdit extends FormReactive {
   }
 
   computeQuotaWithTranscoding () {
-    const resolutions = this.serverService.getConfig().transcoding.enabledResolutions
+    const transcodingConfig = this.serverService.getConfig().transcoding
+
+    const resolutions = transcodingConfig.enabledResolutions
     const higherResolution = VideoResolution.H_1080P
     let multiplier = 0
 
@@ -30,6 +32,8 @@ export abstract class UserEdit extends FormReactive {
       multiplier += resolution / higherResolution
     }
 
+    if (transcodingConfig.hls.enabled) multiplier *= 2
+
     return multiplier * parseInt(this.form.value['videoQuota'], 10)
   }
 
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 4ae72427b..c868ccdcc 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -51,7 +51,10 @@ export class ServerService {
       requiresEmailVerification: false
     },
     transcoding: {
-      enabledResolutions: []
+      enabledResolutions: [],
+      hls: {
+        enabled: false
+      }
     },
     avatar: {
       file: {
diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index fa4ca7f93..f44b4138b 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -3,6 +3,8 @@ import { AuthUser } from '../../core'
 import { Video } from '../../shared/video/video.model'
 import { Account } from '@app/shared/account/account.model'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { VideoStreamingPlaylist } from '../../../../../shared/models/videos/video-streaming-playlist.model'
+import { VideoStreamingPlaylistType } from '../../../../../shared/models/videos/video-streaming-playlist.type'
 
 export class VideoDetails extends Video implements VideoDetailsServerModel {
   descriptionPath: string
@@ -19,6 +21,10 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   likesPercent: number
   dislikesPercent: number
 
+  trackerUrls: string[]
+
+  streamingPlaylists: VideoStreamingPlaylist[]
+
   constructor (hash: VideoDetailsServerModel, translations = {}) {
     super(hash, translations)
 
@@ -30,6 +36,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.support = hash.support
     this.commentsEnabled = hash.commentsEnabled
 
+    this.trackerUrls = hash.trackerUrls
+    this.streamingPlaylists = hash.streamingPlaylists
+
     this.buildLikeAndDislikePercents()
   }
 
@@ -53,4 +62,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
     this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
   }
+
+  getHlsPlaylist () {
+    return this.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+  }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 6e38af195..f77316712 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -23,7 +23,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { environment } from '../../../environments/environment'
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { MarkdownService } from '@app/shared/renderer'
-import { PeertubePlayerManager } from '../../../assets/player/peertube-player-manager'
+import { P2PMediaLoaderOptions, PeertubePlayerManager, PlayerMode, WebtorrentOptions } from '../../../assets/player/peertube-player-manager'
 
 @Component({
   selector: 'my-video-watch',
@@ -424,15 +424,33 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         serverUrl: environment.apiUrl,
 
         videoCaptions: playerCaptions
-      },
+      }
+    }
 
-      webtorrent: {
+    let mode: PlayerMode
+    const hlsPlaylist = this.video.getHlsPlaylist()
+    if (hlsPlaylist) {
+      mode = 'p2p-media-loader'
+      const p2pMediaLoader = {
+        playlistUrl: hlsPlaylist.playlistUrl,
+        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+        trackerAnnounce: this.video.trackerUrls,
         videoFiles: this.video.files
-      }
+      } as P2PMediaLoaderOptions
+
+      Object.assign(options, { p2pMediaLoader })
+    } else {
+      mode = 'webtorrent'
+      const webtorrent = {
+        videoFiles: this.video.files
+      } as WebtorrentOptions
+
+      Object.assign(options, { webtorrent })
     }
 
     this.zone.runOutsideAngular(async () => {
-      this.player = await PeertubePlayerManager.initialize('webtorrent', options)
+      this.player = await PeertubePlayerManager.initialize(mode, options)
       this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
     })
 
diff --git a/client/src/assets/player/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index a5b20219f..f9a2707fb 100644
--- a/client/src/assets/player/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -1,21 +1,21 @@
 // FIXME: something weird with our path definition in tsconfig and typings
 // @ts-ignore
 import * as videojs from 'video.js'
-import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from './peertube-videojs-typings'
+import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from '../peertube-videojs-typings'
+import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
+import { Events } from 'p2p-media-loader-core'
 
 // videojs-hlsjs-plugin needs videojs in window
 window['videojs'] = videojs
 require('@streamroot/videojs-hlsjs-plugin')
 
-import { Engine, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
-import { Events } from 'p2p-media-loader-core'
-
 const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
 
   private readonly CONSTANTS = {
     INFO_SCHEDULER: 1000 // Don't change this
   }
+  private readonly options: P2PMediaLoaderPluginOptions
 
   private hlsjs: any // Don't type hlsjs to not bundle the module
   private p2pEngine: Engine
@@ -26,16 +26,22 @@ class P2pMediaLoaderPlugin extends Plugin {
     totalDownload: 0,
     totalUpload: 0
   }
+  private statsHTTPBytes = {
+    pendingDownload: [] as number[],
+    pendingUpload: [] as number[],
+    totalDownload: 0,
+    totalUpload: 0
+  }
 
   private networkInfoInterval: any
 
   constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
     super(player, options)
 
+    this.options = options
+
     videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
       this.hlsjs = hlsjs
-
-      this.initialize()
     })
 
     initVideoJsContribHlsJsPlayer(player)
@@ -44,6 +50,8 @@ class P2pMediaLoaderPlugin extends Plugin {
       type: options.type,
       src: options.src
     })
+
+    player.ready(() => this.initialize())
   }
 
   dispose () {
@@ -51,6 +59,8 @@ class P2pMediaLoaderPlugin extends Plugin {
   }
 
   private initialize () {
+    initHlsJsPlayer(this.hlsjs)
+
     this.p2pEngine = this.player.tech_.options_.hlsjsConfig.loader.getEngine()
 
     // Avoid using constants to not import hls.hs
@@ -59,38 +69,55 @@ class P2pMediaLoaderPlugin extends Plugin {
       this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
     })
 
+    this.p2pEngine.on(Events.SegmentError, (segment, err) => {
+      console.error('Segment error.', segment, err)
+    })
+
+    this.statsP2PBytes.numPeers = 1 + this.options.redundancyBaseUrls.length
+
     this.runStats()
   }
 
   private runStats () {
     this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => {
-      if (method === 'p2p') {
-        this.statsP2PBytes.pendingDownload.push(size)
-        this.statsP2PBytes.totalDownload += size
-      }
+      const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
+
+      elem.pendingDownload.push(size)
+      elem.totalDownload += size
     })
 
     this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => {
-      if (method === 'p2p') {
-        this.statsP2PBytes.pendingUpload.push(size)
-        this.statsP2PBytes.totalUpload += size
-      }
+      const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
+
+      elem.pendingUpload.push(size)
+      elem.totalUpload += size
     })
 
     this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
     this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
 
     this.networkInfoInterval = setInterval(() => {
-      let downloadSpeed = this.statsP2PBytes.pendingDownload.reduce((a: number, b: number) => a + b, 0)
-      let uploadSpeed = this.statsP2PBytes.pendingUpload.reduce((a: number, b: number) => a + b, 0)
+      const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
+      const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
+
+      const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
+      const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
 
       this.statsP2PBytes.pendingDownload = []
       this.statsP2PBytes.pendingUpload = []
+      this.statsHTTPBytes.pendingDownload = []
+      this.statsHTTPBytes.pendingUpload = []
 
       return this.player.trigger('p2pInfo', {
+        http: {
+          downloadSpeed: httpDownloadSpeed,
+          uploadSpeed: httpUploadSpeed,
+          downloaded: this.statsHTTPBytes.totalDownload,
+          uploaded: this.statsHTTPBytes.totalUpload
+        },
         p2p: {
-          downloadSpeed,
-          uploadSpeed,
+          downloadSpeed: p2pDownloadSpeed,
+          uploadSpeed: p2pUploadSpeed,
           numPeers: this.statsP2PBytes.numPeers,
           downloaded: this.statsP2PBytes.totalDownload,
           uploaded: this.statsP2PBytes.totalUpload
@@ -98,6 +125,10 @@ class P2pMediaLoaderPlugin extends Plugin {
       } as PlayerNetworkInfo)
     }, this.CONSTANTS.INFO_SCHEDULER)
   }
+
+  private arraySum (data: number[]) {
+    return data.reduce((a: number, b: number) => a + b, 0)
+  }
 }
 
 videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
diff --git a/client/src/assets/player/p2p-media-loader/segment-url-builder.ts b/client/src/assets/player/p2p-media-loader/segment-url-builder.ts
new file mode 100644
index 000000000..32e7ce4f2
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/segment-url-builder.ts
@@ -0,0 +1,28 @@
+import { basename } from 'path'
+import { Segment } from 'p2p-media-loader-core'
+
+function segmentUrlBuilderFactory (baseUrls: string[]) {
+  return function segmentBuilder (segment: Segment) {
+    const max = baseUrls.length + 1
+    const i = getRandomInt(max)
+
+    if (i === max - 1) return segment.url
+
+    let newBaseUrl = baseUrls[i]
+    let middlePart = newBaseUrl.endsWith('/') ? '' : '/'
+
+    return newBaseUrl + middlePart + basename(segment.url)
+  }
+}
+
+// ---------------------------------------------------------------------------
+
+export {
+  segmentUrlBuilderFactory
+}
+
+// ---------------------------------------------------------------------------
+
+function getRandomInt (max: number) {
+  return Math.floor(Math.random() * Math.floor(max))
+}
diff --git a/client/src/assets/player/p2p-media-loader/segment-validator.ts b/client/src/assets/player/p2p-media-loader/segment-validator.ts
new file mode 100644
index 000000000..8f4922daa
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/segment-validator.ts
@@ -0,0 +1,56 @@
+import { Segment } from 'p2p-media-loader-core'
+import { basename } from 'path'
+
+function segmentValidatorFactory (segmentsSha256Url: string) {
+  const segmentsJSON = fetchSha256Segments(segmentsSha256Url)
+
+  return async function segmentValidator (segment: Segment) {
+    const segmentName = basename(segment.url)
+
+    const hashShouldBe = (await segmentsJSON)[segmentName]
+    if (hashShouldBe === undefined) {
+      throw new Error(`Unknown segment name ${segmentName} in segment validator`)
+    }
+
+    const calculatedSha = bufferToEx(await sha256(segment.data))
+    if (calculatedSha !== hashShouldBe) {
+      throw new Error(`Hashes does not correspond for segment ${segmentName} (expected: ${hashShouldBe} instead of ${calculatedSha})`)
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+
+export {
+  segmentValidatorFactory
+}
+
+// ---------------------------------------------------------------------------
+
+function fetchSha256Segments (url: string) {
+  return fetch(url)
+    .then(res => res.json())
+    .catch(err => {
+      console.error('Cannot get sha256 segments', err)
+      return {}
+    })
+}
+
+function sha256 (data?: ArrayBuffer) {
+  if (!data) return undefined
+
+  return window.crypto.subtle.digest('SHA-256', data)
+}
+
+// Thanks: https://stackoverflow.com/a/53307879
+function bufferToEx (buffer?: ArrayBuffer) {
+  if (!buffer) return ''
+
+  let s = ''
+  const h = '0123456789abcdef'
+  const o = new Uint8Array(buffer)
+
+  o.forEach((v: any) => s += h[ v >> 4 ] + h[ v & 15 ])
+
+  return s
+}
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 91ca6a2aa..3fdba6fdf 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -13,8 +13,10 @@ import './videojs-components/p2p-info-button'
 import './videojs-components/peertube-load-progress-bar'
 import './videojs-components/theater-button'
 import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
-import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
+import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
 import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
+import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
+import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
@@ -31,7 +33,10 @@ export type WebtorrentOptions = {
 
 export type P2PMediaLoaderOptions = {
   playlistUrl: string
+  segmentsSha256Url: string
   trackerAnnounce: string[]
+  redundancyBaseUrls: string[]
+  videoFiles: VideoFile[]
 }
 
 export type CommonOptions = {
@@ -90,11 +95,11 @@ export class PeertubePlayerManager {
   static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
     let p2pMediaLoader: any
 
-    if (mode === 'webtorrent') await import('./webtorrent-plugin')
+    if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
     if (mode === 'p2p-media-loader') {
       [ p2pMediaLoader ] = await Promise.all([
         import('p2p-media-loader-hlsjs'),
-        import('./p2p-media-loader-plugin')
+        import('./p2p-media-loader/p2p-media-loader-plugin')
       ])
     }
 
@@ -144,11 +149,14 @@ export class PeertubePlayerManager {
     const commonOptions = options.common
     const webtorrentOptions = options.webtorrent
     const p2pMediaLoaderOptions = options.p2pMediaLoader
+
+    let autoplay = options.common.autoplay
     let html5 = {}
 
     const plugins: VideoJSPluginOptions = {
       peertube: {
-        autoplay: commonOptions.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
+        mode,
+        autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
         videoViewUrl: commonOptions.videoViewUrl,
         videoDuration: commonOptions.videoDuration,
         startTime: commonOptions.startTime,
@@ -160,19 +168,35 @@ export class PeertubePlayerManager {
 
     if (p2pMediaLoaderOptions) {
       const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
+        redundancyBaseUrls: options.p2pMediaLoader.redundancyBaseUrls,
         type: 'application/x-mpegURL',
         src: p2pMediaLoaderOptions.playlistUrl
       }
 
+      const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce
+        .filter(t => t.startsWith('ws'))
+
       const p2pMediaLoaderConfig = {
-        // loader: {
-        //   trackerAnnounce: p2pMediaLoaderOptions.trackerAnnounce
-        // },
+        loader: {
+          trackerAnnounce,
+          segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url),
+          rtcConfig: getRtcConfig(),
+          requiredSegmentsPriority: 5,
+          segmentUrlBuilder: segmentUrlBuilderFactory(options.p2pMediaLoader.redundancyBaseUrls)
+        },
         segments: {
           swarmId: p2pMediaLoaderOptions.playlistUrl
         }
       }
       const streamrootHls = {
+        levelLabelHandler: (level: { height: number, width: number }) => {
+          const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
+
+          let label = file.resolution.label
+          if (file.fps >= 50) label += file.fps
+
+          return label
+        },
         html5: {
           hlsjsConfig: {
             liveSyncDurationCount: 7,
@@ -187,12 +211,15 @@ export class PeertubePlayerManager {
 
     if (webtorrentOptions) {
       const webtorrent = {
-        autoplay: commonOptions.autoplay,
+        autoplay,
         videoDuration: commonOptions.videoDuration,
         playerElement: commonOptions.playerElement,
         videoFiles: webtorrentOptions.videoFiles
       }
       Object.assign(plugins, { webtorrent })
+
+      // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
+      autoplay = false
     }
 
     const videojsOptions = {
@@ -208,7 +235,7 @@ export class PeertubePlayerManager {
         : undefined, // Undefined so the player knows it has to check the local storage
 
       poster: commonOptions.poster,
-      autoplay: false,
+      autoplay,
       inactivityTimeout: commonOptions.inactivityTimeout,
       playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
       plugins,
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index f83d9094a..aacbf5f6e 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -52,12 +52,12 @@ class PeerTubePlugin extends Plugin {
     this.player.ready(() => {
       const playerOptions = this.player.options_
 
-      if (this.player.webtorrent) {
+      if (options.mode === 'webtorrent') {
         this.player.webtorrent().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
         this.player.webtorrent().on('autoResolutionChange', (_: any, d: any) => this.trigger('autoResolutionChange', d))
       }
 
-      if (this.player.p2pMediaLoader) {
+      if (options.mode === 'p2p-media-loader') {
         this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
       }
 
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index fff992a6f..79a5a6c4d 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -4,12 +4,15 @@ import * as videojs from 'video.js'
 
 import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { PeerTubePlugin } from './peertube-plugin'
-import { WebTorrentPlugin } from './webtorrent-plugin'
+import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
+import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin'
+import { PlayerMode } from './peertube-player-manager'
 
 declare namespace videojs {
   interface Player {
     peertube (): PeerTubePlugin
     webtorrent (): WebTorrentPlugin
+    p2pMediaLoader (): P2pMediaLoaderPlugin
   }
 }
 
@@ -33,6 +36,8 @@ type UserWatching = {
 }
 
 type PeerTubePluginOptions = {
+  mode: PlayerMode
+
   autoplay: boolean
   videoViewUrl: string
   videoDuration: number
@@ -54,6 +59,7 @@ type WebtorrentPluginOptions = {
 }
 
 type P2PMediaLoaderPluginOptions = {
+  redundancyBaseUrls: string[]
   type: string
   src: string
 }
@@ -91,6 +97,13 @@ type AutoResolutionUpdateData = {
 }
 
 type PlayerNetworkInfo = {
+  http: {
+    downloadSpeed: number
+    uploadSpeed: number
+    downloaded: number
+    uploaded: number
+  }
+
   p2p: {
     downloadSpeed: number
     uploadSpeed: number
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index 8b9f34b99..8d87567c2 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -112,9 +112,23 @@ function videoFileMinByResolution (files: VideoFile[]) {
   return min
 }
 
+function getRtcConfig () {
+  return {
+    iceServers: [
+      {
+        urls: 'stun:stun.stunprotocol.org'
+      },
+      {
+        urls: 'stun:stun.framasoft.org'
+      }
+    ]
+  }
+}
+
 // ---------------------------------------------------------------------------
 
 export {
+  getRtcConfig,
   toTitleCase,
   timeToInt,
   buildVideoLink,
diff --git a/client/src/assets/player/videojs-components/p2p-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts
index 2fc4c4562..6424787b2 100644
--- a/client/src/assets/player/videojs-components/p2p-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -75,11 +75,12 @@ class P2pInfoButton extends Button {
       }
 
       const p2pStats = data.p2p
+      const httpStats = data.http
 
-      const downloadSpeed = bytes(p2pStats.downloadSpeed)
-      const uploadSpeed = bytes(p2pStats.uploadSpeed)
-      const totalDownloaded = bytes(p2pStats.downloaded)
-      const totalUploaded = bytes(p2pStats.uploaded)
+      const downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed)
+      const uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed)
+      const totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded)
+      const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded)
       const numPeers = p2pStats.numPeers
 
       subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
@@ -92,7 +93,7 @@ class P2pInfoButton extends Button {
       uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
 
       peersNumber.textContent = numPeers
-      peersText.textContent = ' ' + this.player_.localize('peers')
+      peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer'))
 
       subDivHttp.className = 'vjs-peertube-hidden'
       subDivWebtorrent.className = 'vjs-peertube-displayed'
diff --git a/client/src/assets/player/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index 47f169e24..c69bf31fa 100644
--- a/client/src/assets/player/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -3,18 +3,18 @@
 import * as videojs from 'video.js'
 
 import * as WebTorrent from 'webtorrent'
-import { VideoFile } from '../../../../shared/models/videos/video.model'
-import { renderVideo } from './webtorrent/video-renderer'
-import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from './peertube-videojs-typings'
-import { videoFileMaxByResolution, videoFileMinByResolution } from './utils'
-import { PeertubeChunkStore } from './webtorrent/peertube-chunk-store'
+import { VideoFile } from '../../../../../shared/models/videos/video.model'
+import { renderVideo } from './video-renderer'
+import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from '../peertube-videojs-typings'
+import { getRtcConfig, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
+import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
   getAverageBandwidthInStore,
   getStoredMute,
   getStoredVolume,
   getStoredWebTorrentEnabled,
   saveAverageBandwidth
-} from './peertube-player-local-storage'
+} from '../peertube-player-local-storage'
 
 const CacheChunkStore = require('cache-chunk-store')
 
@@ -44,16 +44,7 @@ class WebTorrentPlugin extends Plugin {
 
   private readonly webtorrent = new WebTorrent({
     tracker: {
-      rtcConfig: {
-        iceServers: [
-          {
-            urls: 'stun:stun.stunprotocol.org'
-          },
-          {
-            urls: 'stun:stun.framasoft.org'
-          }
-        ]
-      }
+      rtcConfig: getRtcConfig()
     },
     dht: false
   })
@@ -472,6 +463,12 @@ class WebTorrentPlugin extends Plugin {
       if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed)
 
       return this.player.trigger('p2pInfo', {
+        http: {
+          downloadSpeed: 0,
+          uploadSpeed: 0,
+          downloaded: 0,
+          uploaded: 0
+        },
         p2p: {
           downloadSpeed: this.torrent.downloadSpeed,
           numPeers: this.torrent.numPeers,
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 6dd9a3d76..1e58d42d9 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -23,7 +23,13 @@ import { peertubeTranslate, ResultList, VideoDetails } from '../../../../shared'
 import { PeerTubeResolution } from '../player/definitions'
 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
-import { PeertubePlayerManager, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager'
+import {
+  P2PMediaLoaderOptions,
+  PeertubePlayerManager,
+  PeertubePlayerManagerOptions,
+  PlayerMode
+} from '../../assets/player/peertube-player-manager'
+import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
 
 /**
  * Embed API exposes control of the embed player to the outside world via
@@ -319,13 +325,16 @@ class PeerTubeEmbed {
     }
 
     if (this.mode === 'p2p-media-loader') {
+      const hlsPlaylist = videoInfo.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+
       Object.assign(options, {
         p2pMediaLoader: {
-          // playlistUrl: 'https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8'
-          // playlistUrl: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
-          // trackerAnnounce: [ window.location.origin.replace(/^http/, 'ws') + '/tracker/socket' ],
-          playlistUrl: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8'
-        }
+          playlistUrl: hlsPlaylist.playlistUrl,
+          segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+          redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+          trackerAnnounce: videoInfo.trackerUrls,
+          videoFiles: videoInfo.files
+        } as P2PMediaLoaderOptions
       })
     } else {
       Object.assign(options, {