Move streamroot plugin in core project
To avoid an already bundled HLS.js library, and adapt some parts of the code
This commit is contained in:
Chocobozzz
parent
e40afb5bc4
commit
83fcadac86
6 changed files with 680 additions and 30 deletions
|
|
@ -56,7 +56,6 @@
|
|||
"@ngx-loading-bar/router": "^4.2.0",
|
||||
"@ngx-meta/core": "^7.0.0",
|
||||
"@ngx-translate/i18n-polyfill": "^1.0.0",
|
||||
"@streamroot/videojs-hlsjs-plugin": "^1.0.10",
|
||||
"@types/core-js": "^2.5.2",
|
||||
"@types/debug": "^4.1.5",
|
||||
"@types/hls.js": "^0.12.4",
|
||||
|
|
|
|||
626
client/src/assets/player/p2p-media-loader/hls-plugin.ts
Normal file
626
client/src/assets/player/p2p-media-loader/hls-plugin.ts
Normal file
|
|
@ -0,0 +1,626 @@
|
|||
// Thanks https://github.com/streamroot/videojs-hlsjs-plugin
|
||||
// We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file
|
||||
|
||||
import * as Hlsjs from 'hls.js'
|
||||
import videojs, { VideoJsPlayer } from 'video.js'
|
||||
import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
|
||||
|
||||
type ErrorCounts = {
|
||||
[ type: string ]: number
|
||||
}
|
||||
|
||||
type Metadata = {
|
||||
levels: Hlsjs.Level[]
|
||||
}
|
||||
|
||||
const registerSourceHandler = function (vjs: typeof videojs) {
|
||||
if (!Hlsjs.isSupported()) {
|
||||
console.warn('Hls.js is not supported in this browser!')
|
||||
return
|
||||
}
|
||||
|
||||
const html5 = vjs.getTech('Html5')
|
||||
|
||||
if (!html5) {
|
||||
console.error('Not supported version if video.js')
|
||||
return
|
||||
}
|
||||
|
||||
// FIXME: typings
|
||||
(html5 as any).registerSourceHandler({
|
||||
canHandleSource: function (source: videojs.Tech.SourceObject) {
|
||||
const hlsTypeRE = /^application\/x-mpegURL|application\/vnd\.apple\.mpegurl$/i
|
||||
const hlsExtRE = /\.m3u8/i
|
||||
|
||||
if (hlsTypeRE.test(source.type)) return 'probably'
|
||||
if (hlsExtRE.test(source.src)) return 'maybe'
|
||||
|
||||
return ''
|
||||
},
|
||||
|
||||
handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) {
|
||||
if (tech.hlsProvider) {
|
||||
tech.hlsProvider.dispose()
|
||||
}
|
||||
|
||||
tech.hlsProvider = new Html5Hlsjs(vjs, source, tech)
|
||||
|
||||
return tech.hlsProvider
|
||||
}
|
||||
}, 0);
|
||||
|
||||
// FIXME: typings
|
||||
(vjs as any).Html5Hlsjs = Html5Hlsjs
|
||||
}
|
||||
|
||||
function hlsjsConfigHandler (this: VideoJsPlayer, options: HlsjsConfigHandlerOptions) {
|
||||
const player = this
|
||||
|
||||
if (!options) return
|
||||
|
||||
if (!player.srOptions_) {
|
||||
player.srOptions_ = {}
|
||||
}
|
||||
|
||||
if (!player.srOptions_.hlsjsConfig) {
|
||||
player.srOptions_.hlsjsConfig = options.hlsjsConfig
|
||||
}
|
||||
|
||||
if (!player.srOptions_.captionConfig) {
|
||||
player.srOptions_.captionConfig = options.captionConfig
|
||||
}
|
||||
|
||||
if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
|
||||
player.srOptions_.levelLabelHandler = options.levelLabelHandler
|
||||
}
|
||||
}
|
||||
|
||||
const registerConfigPlugin = function (vjs: typeof videojs) {
|
||||
// Used in Brightcove since we don't pass options directly there
|
||||
const registerVjsPlugin = vjs.registerPlugin || vjs.plugin
|
||||
registerVjsPlugin('hlsjs', hlsjsConfigHandler)
|
||||
}
|
||||
|
||||
class Html5Hlsjs {
|
||||
private static readonly hooks: { [id: string]: Function[] } = {}
|
||||
|
||||
private readonly videoElement: HTMLVideoElement
|
||||
private readonly errorCounts: ErrorCounts = {}
|
||||
private readonly player: VideoJsPlayer
|
||||
private readonly tech: videojs.Tech
|
||||
private readonly source: videojs.Tech.SourceObject
|
||||
private readonly vjs: typeof videojs
|
||||
|
||||
private hls: Hlsjs & { manualLevel?: number } // FIXME: typings
|
||||
private hlsjsConfig: Partial<Hlsjs.Config & { cueHandler: any }> = null
|
||||
|
||||
private _duration: number = null
|
||||
private metadata: Metadata = null
|
||||
private isLive: boolean = null
|
||||
private dvrDuration: number = null
|
||||
private edgeMargin: number = null
|
||||
|
||||
private handlers: { [ id in 'play' | 'addtrack' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = {
|
||||
play: null,
|
||||
addtrack: null,
|
||||
playing: null,
|
||||
textTracksChange: null,
|
||||
audioTracksChange: null
|
||||
}
|
||||
|
||||
private uiTextTrackHandled = false
|
||||
|
||||
constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
|
||||
this.vjs = vjs
|
||||
this.source = source
|
||||
|
||||
this.tech = tech;
|
||||
(this.tech as any).name_ = 'Hlsjs'
|
||||
|
||||
this.videoElement = tech.el() as HTMLVideoElement
|
||||
this.player = vjs((tech.options_ as any).playerId)
|
||||
|
||||
this.videoElement.addEventListener('error', event => {
|
||||
let errorTxt: string
|
||||
const mediaError = (event.currentTarget as HTMLVideoElement).error
|
||||
|
||||
switch (mediaError.code) {
|
||||
case mediaError.MEDIA_ERR_ABORTED:
|
||||
errorTxt = 'You aborted the video playback'
|
||||
break
|
||||
case mediaError.MEDIA_ERR_DECODE:
|
||||
errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support'
|
||||
this._handleMediaError(mediaError)
|
||||
break
|
||||
case mediaError.MEDIA_ERR_NETWORK:
|
||||
errorTxt = 'A network error caused the video download to fail part-way'
|
||||
break
|
||||
case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
|
||||
errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported'
|
||||
break
|
||||
|
||||
default:
|
||||
errorTxt = mediaError.message
|
||||
}
|
||||
|
||||
console.error('MEDIA_ERROR: ', errorTxt)
|
||||
})
|
||||
|
||||
this.initialize()
|
||||
}
|
||||
|
||||
duration () {
|
||||
return this._duration || this.videoElement.duration || 0
|
||||
}
|
||||
|
||||
seekable () {
|
||||
if (this.hls.media) {
|
||||
if (!this.isLive) {
|
||||
return this.vjs.createTimeRanges(0, this.hls.media.duration)
|
||||
}
|
||||
|
||||
// Video.js doesn't seem to like floating point timeranges
|
||||
const startTime = Math.round(this.hls.media.duration - this.dvrDuration)
|
||||
const endTime = Math.round(this.hls.media.duration - this.edgeMargin)
|
||||
|
||||
return this.vjs.createTimeRanges(startTime, endTime)
|
||||
}
|
||||
|
||||
return this.vjs.createTimeRanges()
|
||||
}
|
||||
|
||||
// See comment for `initialize` method.
|
||||
dispose () {
|
||||
this.videoElement.removeEventListener('play', this.handlers.play)
|
||||
this.videoElement.textTracks.removeEventListener('addtrack', this.handlers.addtrack)
|
||||
this.videoElement.removeEventListener('playing', this.handlers.playing)
|
||||
|
||||
this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
|
||||
this.uiTextTrackHandled = false
|
||||
|
||||
this.player.audioTracks().removeEventListener('change', this.handlers.audioTracksChange)
|
||||
|
||||
this.hls.destroy()
|
||||
}
|
||||
|
||||
static addHook (type: string, callback: Function) {
|
||||
Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || []
|
||||
Html5Hlsjs.hooks[ type ].push(callback)
|
||||
}
|
||||
|
||||
static removeHook (type: string, callback: Function) {
|
||||
if (Html5Hlsjs.hooks[ type ] === undefined) return false
|
||||
|
||||
const index = Html5Hlsjs.hooks[ type ].indexOf(callback)
|
||||
if (index === -1) return false
|
||||
|
||||
Html5Hlsjs.hooks[ type ].splice(index, 1)
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
private _executeHooksFor (type: string) {
|
||||
if (Html5Hlsjs.hooks[ type ] === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
// ES3 and IE < 9
|
||||
for (let i = 0; i < Html5Hlsjs.hooks[ type ].length; i++) {
|
||||
Html5Hlsjs.hooks[ type ][ i ](this.player, this.hls)
|
||||
}
|
||||
}
|
||||
|
||||
private _handleMediaError (error: any) {
|
||||
if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) {
|
||||
console.info('trying to recover media error')
|
||||
this.hls.recoverMediaError()
|
||||
return
|
||||
}
|
||||
|
||||
if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) {
|
||||
console.info('2nd try to recover media error (by swapping audio codec')
|
||||
this.hls.swapAudioCodec()
|
||||
this.hls.recoverMediaError()
|
||||
return
|
||||
}
|
||||
|
||||
if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] > 2) {
|
||||
console.info('bubbling media error up to VIDEOJS')
|
||||
this.tech.error = () => error
|
||||
this.tech.trigger('error')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
private _onError (_event: any, data: Hlsjs.errorData) {
|
||||
const error: { message: string, code?: number } = {
|
||||
message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
|
||||
}
|
||||
console.error(error.message)
|
||||
|
||||
// increment/set error count
|
||||
if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1
|
||||
else this.errorCounts[ data.type ] = 1
|
||||
|
||||
// Implement simple error handling based on hls.js documentation
|
||||
// https://github.com/dailymotion/hls.js/blob/master/API.md#fifth-step-error-handling
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
case Hlsjs.ErrorTypes.NETWORK_ERROR:
|
||||
console.info('bubbling network error up to VIDEOJS')
|
||||
error.code = 2
|
||||
this.tech.error = () => error as any
|
||||
this.tech.trigger('error')
|
||||
break
|
||||
|
||||
case Hlsjs.ErrorTypes.MEDIA_ERROR:
|
||||
error.code = 3
|
||||
this._handleMediaError(error)
|
||||
break
|
||||
|
||||
default:
|
||||
// cannot recover
|
||||
this.hls.destroy()
|
||||
console.info('bubbling error up to VIDEOJS')
|
||||
this.tech.error = () => error as any
|
||||
this.tech.trigger('error')
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private switchQuality (qualityId: number) {
|
||||
this.hls.nextLevel = qualityId
|
||||
}
|
||||
|
||||
private _levelLabel (level: Hlsjs.Level) {
|
||||
if (this.player.srOptions_.levelLabelHandler) {
|
||||
return this.player.srOptions_.levelLabelHandler(level)
|
||||
}
|
||||
|
||||
if (level.height) return level.height + 'p'
|
||||
if (level.width) return Math.round(level.width * 9 / 16) + 'p'
|
||||
if (level.bitrate) return (level.bitrate / 1000) + 'kbps'
|
||||
|
||||
return 0
|
||||
}
|
||||
|
||||
private _relayQualityChange (qualityLevels: QualityLevels) {
|
||||
// Determine if it is "Auto" (all tracks enabled)
|
||||
let isAuto = true
|
||||
|
||||
for (let i = 0; i < qualityLevels.length; i++) {
|
||||
if (!qualityLevels[ i ]._enabled) {
|
||||
isAuto = false
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Interact with ME
|
||||
if (isAuto) {
|
||||
this.hls.currentLevel = -1
|
||||
return
|
||||
}
|
||||
|
||||
// Find ID of highest enabled track
|
||||
let selectedTrack: number
|
||||
|
||||
for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
|
||||
if (qualityLevels[ selectedTrack ]._enabled) {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
this.hls.currentLevel = selectedTrack
|
||||
}
|
||||
|
||||
private _handleQualityLevels () {
|
||||
if (!this.metadata) return
|
||||
|
||||
const qualityLevels = this.player.qualityLevels && this.player.qualityLevels()
|
||||
if (!qualityLevels) return
|
||||
|
||||
for (let i = 0; i < this.metadata.levels.length; i++) {
|
||||
const details = this.metadata.levels[ i ]
|
||||
const representation: QualityLevelRepresentation = {
|
||||
id: i,
|
||||
width: details.width,
|
||||
height: details.height,
|
||||
bandwidth: details.bitrate,
|
||||
bitrate: details.bitrate,
|
||||
_enabled: true
|
||||
}
|
||||
|
||||
const self = this
|
||||
representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) {
|
||||
// Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on)
|
||||
if (typeof toggle === 'boolean') {
|
||||
this[ level ]._enabled = toggle
|
||||
self._relayQualityChange(this)
|
||||
}
|
||||
|
||||
return this[ level ]._enabled
|
||||
}
|
||||
|
||||
qualityLevels.addQualityLevel(representation)
|
||||
}
|
||||
}
|
||||
|
||||
private _notifyVideoQualities () {
|
||||
if (!this.metadata) return
|
||||
const cleanTracklist = []
|
||||
|
||||
if (this.metadata.levels.length > 1) {
|
||||
const autoLevel = {
|
||||
id: -1,
|
||||
label: 'auto',
|
||||
selected: this.hls.manualLevel === -1
|
||||
}
|
||||
cleanTracklist.push(autoLevel)
|
||||
}
|
||||
|
||||
this.metadata.levels.forEach((level, index) => {
|
||||
// Don't write in level (shared reference with Hls.js)
|
||||
const quality = {
|
||||
id: index,
|
||||
selected: index === this.hls.manualLevel,
|
||||
label: this._levelLabel(level)
|
||||
}
|
||||
|
||||
cleanTracklist.push(quality)
|
||||
})
|
||||
|
||||
const payload = {
|
||||
qualityData: { video: cleanTracklist },
|
||||
qualitySwitchCallback: this.switchQuality.bind(this)
|
||||
}
|
||||
|
||||
this.tech.trigger('loadedqualitydata', payload)
|
||||
|
||||
// Self-de-register so we don't raise the payload multiple times
|
||||
this.videoElement.removeEventListener('playing', this.handlers.playing)
|
||||
}
|
||||
|
||||
private _updateSelectedAudioTrack () {
|
||||
const playerAudioTracks = this.tech.audioTracks()
|
||||
for (let j = 0; j < playerAudioTracks.length; j++) {
|
||||
// FIXME: typings
|
||||
if ((playerAudioTracks[ j ] as any).enabled) {
|
||||
this.hls.audioTrack = j
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _onAudioTracks () {
|
||||
const hlsAudioTracks = this.hls.audioTracks as (AudioTrack & { name?: string, lang?: string })[] // FIXME typings
|
||||
const playerAudioTracks = this.tech.audioTracks()
|
||||
|
||||
if (hlsAudioTracks.length > 1 && playerAudioTracks.length === 0) {
|
||||
// Add Hls.js audio tracks if not added yet
|
||||
for (let i = 0; i < hlsAudioTracks.length; i++) {
|
||||
playerAudioTracks.addTrack(new this.vjs.AudioTrack({
|
||||
id: i.toString(),
|
||||
kind: 'alternative',
|
||||
label: hlsAudioTracks[ i ].name || hlsAudioTracks[ i ].lang,
|
||||
language: hlsAudioTracks[ i ].lang,
|
||||
enabled: i === this.hls.audioTrack
|
||||
}))
|
||||
}
|
||||
|
||||
// Handle audio track change event
|
||||
this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this)
|
||||
playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange)
|
||||
}
|
||||
}
|
||||
|
||||
private _getTextTrackLabel (textTrack: TextTrack) {
|
||||
// Label here is readable label and is optional (used in the UI so if it is there it should be different)
|
||||
return textTrack.label ? textTrack.label : textTrack.language
|
||||
}
|
||||
|
||||
private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
|
||||
return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2)
|
||||
&& track1.kind === track2.kind
|
||||
}
|
||||
|
||||
private _updateSelectedTextTrack () {
|
||||
const playerTextTracks = this.player.textTracks()
|
||||
let activeTrack: TextTrack = null
|
||||
|
||||
for (let j = 0; j < playerTextTracks.length; j++) {
|
||||
if (playerTextTracks[ j ].mode === 'showing') {
|
||||
activeTrack = playerTextTracks[ j ]
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const hlsjsTracks = this.videoElement.textTracks
|
||||
for (let k = 0; k < hlsjsTracks.length; k++) {
|
||||
if (hlsjsTracks[ k ].kind === 'subtitles' || hlsjsTracks[ k ].kind === 'captions') {
|
||||
hlsjsTracks[ k ].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[ k ], activeTrack)
|
||||
? 'showing'
|
||||
: 'disabled'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _startLoad () {
|
||||
this.hls.startLoad(-1)
|
||||
this.videoElement.removeEventListener('play', this.handlers.play)
|
||||
}
|
||||
|
||||
private _oneLevelObjClone (obj: object) {
|
||||
const result = {}
|
||||
const objKeys = Object.keys(obj)
|
||||
for (let i = 0; i < objKeys.length; i++) {
|
||||
result[ objKeys[ i ] ] = obj[ objKeys[ i ] ]
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
private _filterDisplayableTextTracks (textTracks: TextTrackList) {
|
||||
const displayableTracks = []
|
||||
|
||||
// Filter out tracks that is displayable (captions or subtitles)
|
||||
for (let idx = 0; idx < textTracks.length; idx++) {
|
||||
if (textTracks[ idx ].kind === 'subtitles' || textTracks[ idx ].kind === 'captions') {
|
||||
displayableTracks.push(textTracks[ idx ])
|
||||
}
|
||||
}
|
||||
|
||||
return displayableTracks
|
||||
}
|
||||
|
||||
private _updateTextTrackList () {
|
||||
const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks)
|
||||
const playerTextTracks = this.player.textTracks()
|
||||
|
||||
// Add stubs to make the caption switcher shows up
|
||||
// Adding the Hls.js text track in will make us have double captions
|
||||
for (let idx = 0; idx < displayableTracks.length; idx++) {
|
||||
let isAdded = false
|
||||
|
||||
for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
|
||||
if (this._isSameTextTrack(displayableTracks[ idx ], playerTextTracks[ jdx ])) {
|
||||
isAdded = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (!isAdded) {
|
||||
const hlsjsTextTrack = displayableTracks[ idx ]
|
||||
this.player.addRemoteTextTrack({
|
||||
kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind,
|
||||
label: this._getTextTrackLabel(hlsjsTextTrack),
|
||||
language: hlsjsTextTrack.language,
|
||||
srclang: hlsjsTextTrack.language
|
||||
}, false)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle UI switching
|
||||
this._updateSelectedTextTrack()
|
||||
|
||||
if (!this.uiTextTrackHandled) {
|
||||
this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this)
|
||||
playerTextTracks.addEventListener('change', this.handlers.textTracksChange)
|
||||
|
||||
this.uiTextTrackHandled = true
|
||||
}
|
||||
}
|
||||
|
||||
private _onMetaData (_event: any, data: Hlsjs.manifestLoadedData) {
|
||||
// This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later
|
||||
this.metadata = data as any
|
||||
this._handleQualityLevels()
|
||||
}
|
||||
|
||||
private _createCueHandler (captionConfig: any) {
|
||||
return {
|
||||
newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => {
|
||||
let row: any
|
||||
let cue: VTTCue
|
||||
let text: string
|
||||
const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
|
||||
|
||||
for (let r = 0; r < captionScreen.rows.length; r++) {
|
||||
row = captionScreen.rows[ r ]
|
||||
text = ''
|
||||
|
||||
if (!row.isEmpty()) {
|
||||
for (let c = 0; c < row.chars.length; c++) {
|
||||
text += row.chars[ c ].ucharj
|
||||
}
|
||||
|
||||
cue = new VTTCue(startTime, endTime, text.trim())
|
||||
|
||||
// typeof null === 'object'
|
||||
if (captionConfig != null && typeof captionConfig === 'object') {
|
||||
// Copy client overridden property into the cue object
|
||||
const configKeys = Object.keys(captionConfig)
|
||||
|
||||
for (let k = 0; k < configKeys.length; k++) {
|
||||
cue[ configKeys[ k ] ] = captionConfig[ configKeys[ k ] ]
|
||||
}
|
||||
}
|
||||
track.addCue(cue)
|
||||
if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, ''))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _initHlsjs () {
|
||||
const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
|
||||
const srOptions_ = this.player.srOptions_
|
||||
|
||||
const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig
|
||||
// Hls.js will write to the reference thus change the object for later streams
|
||||
this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {}
|
||||
|
||||
if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) {
|
||||
this.hlsjsConfig.autoStartLoad = false
|
||||
}
|
||||
|
||||
const captionConfig = srOptions_ && srOptions_.captionConfig || techOptions.captionConfig
|
||||
if (captionConfig) {
|
||||
this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
|
||||
}
|
||||
|
||||
// If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above
|
||||
// That's why we have a separate if block here to set the 'play' listener
|
||||
if (this.hlsjsConfig.autoStartLoad === false) {
|
||||
this.handlers.play = this._startLoad.bind(this)
|
||||
this.videoElement.addEventListener('play', this.handlers.play)
|
||||
}
|
||||
|
||||
// _notifyVideoQualities sometimes runs before the quality picker event handler is registered -> no video switcher
|
||||
this.handlers.playing = this._notifyVideoQualities.bind(this)
|
||||
this.videoElement.addEventListener('playing', this.handlers.playing)
|
||||
|
||||
this.hls = new Hlsjs(this.hlsjsConfig)
|
||||
|
||||
this._executeHooksFor('beforeinitialize')
|
||||
|
||||
this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data))
|
||||
this.hls.on(Hlsjs.Events.AUDIO_TRACKS_UPDATED, () => this._onAudioTracks())
|
||||
this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data as any)) // FIXME: typings
|
||||
this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => {
|
||||
// The DVR plugin will auto seek to "live edge" on start up
|
||||
if (this.hlsjsConfig.liveSyncDuration) {
|
||||
this.edgeMargin = this.hlsjsConfig.liveSyncDuration
|
||||
} else if (this.hlsjsConfig.liveSyncDurationCount) {
|
||||
this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration
|
||||
}
|
||||
|
||||
this.isLive = data.details.live
|
||||
this.dvrDuration = data.details.totalduration
|
||||
this._duration = this.isLive ? Infinity : data.details.totalduration
|
||||
})
|
||||
this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
|
||||
// Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls`
|
||||
// Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata
|
||||
this.tech.trigger('loadedmetadata')
|
||||
})
|
||||
|
||||
this.hls.attachMedia(this.videoElement)
|
||||
|
||||
this.handlers.addtrack = this._updateTextTrackList.bind(this)
|
||||
this.videoElement.textTracks.addEventListener('addtrack', this.handlers.addtrack)
|
||||
|
||||
this.hls.loadSource(this.source.src)
|
||||
}
|
||||
|
||||
private initialize () {
|
||||
this._initHlsjs()
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
Html5Hlsjs,
|
||||
registerSourceHandler,
|
||||
registerConfigPlugin
|
||||
}
|
||||
|
|
@ -3,10 +3,11 @@ import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-vide
|
|||
import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
|
||||
import { Events, Segment } from 'p2p-media-loader-core'
|
||||
import { timeToInt } from '../utils'
|
||||
import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
|
||||
import * as Hlsjs from 'hls.js'
|
||||
|
||||
// videojs-hlsjs-plugin needs videojs in window
|
||||
window['videojs'] = videojs
|
||||
require('@streamroot/videojs-hlsjs-plugin')
|
||||
registerConfigPlugin(videojs)
|
||||
registerSourceHandler(videojs)
|
||||
|
||||
const Plugin = videojs.getPlugin('plugin')
|
||||
class P2pMediaLoaderPlugin extends Plugin {
|
||||
|
|
@ -16,7 +17,7 @@ class P2pMediaLoaderPlugin extends Plugin {
|
|||
}
|
||||
private readonly options: P2PMediaLoaderPluginOptions
|
||||
|
||||
private hlsjs: any // Don't type hlsjs to not bundle the module
|
||||
private hlsjs: Hlsjs
|
||||
private p2pEngine: Engine
|
||||
private statsP2PBytes = {
|
||||
pendingDownload: [] as number[],
|
||||
|
|
@ -88,9 +89,7 @@ class P2pMediaLoaderPlugin extends Plugin {
|
|||
const options = this.player.tech(true).options_ as any
|
||||
this.p2pEngine = options.hlsjsConfig.loader.getEngine()
|
||||
|
||||
// Avoid using constants to not import hls.hs
|
||||
// https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
|
||||
this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
|
||||
this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => {
|
||||
this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -211,9 +211,9 @@ export class PeertubePlayerManager {
|
|||
}
|
||||
|
||||
if (mode === 'p2p-media-loader') {
|
||||
const { streamrootHls } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
|
||||
const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
|
||||
|
||||
html5 = streamrootHls.html5
|
||||
html5 = hlsjs.html5
|
||||
}
|
||||
|
||||
if (mode === 'webtorrent') {
|
||||
|
|
@ -303,7 +303,7 @@ export class PeertubePlayerManager {
|
|||
swarmId: p2pMediaLoaderOptions.playlistUrl
|
||||
}
|
||||
}
|
||||
const streamrootHls = {
|
||||
const hlsjs = {
|
||||
levelLabelHandler: (level: { height: number, width: number }) => {
|
||||
const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
|
||||
|
||||
|
|
@ -322,7 +322,7 @@ export class PeertubePlayerManager {
|
|||
}
|
||||
}
|
||||
|
||||
const toAssign = { p2pMediaLoader, streamrootHls }
|
||||
const toAssign = { p2pMediaLoader, hlsjs }
|
||||
Object.assign(plugins, toAssign)
|
||||
|
||||
return toAssign
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
import videojs from 'video.js'
|
||||
import { PeerTubePlugin } from './peertube-plugin'
|
||||
import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
|
||||
import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin'
|
||||
import { PlayerMode } from './peertube-player-manager'
|
||||
import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
|
||||
import { VideoFile } from '@shared/models'
|
||||
import videojs from 'video.js'
|
||||
import { Config, Level } from 'hls.js'
|
||||
|
||||
declare module 'video.js' {
|
||||
|
||||
export interface VideoJsPlayer {
|
||||
srOptions_: HlsjsConfigHandlerOptions
|
||||
|
||||
theaterEnabled: boolean
|
||||
|
||||
// FIXME: add it to upstream typings
|
||||
|
|
@ -21,32 +25,57 @@ declare module 'video.js' {
|
|||
// Plugins
|
||||
|
||||
peertube (): PeerTubePlugin
|
||||
|
||||
webtorrent (): WebTorrentPlugin
|
||||
|
||||
p2pMediaLoader (): P2pMediaLoaderPlugin
|
||||
|
||||
contextmenuUI (options: any): any
|
||||
|
||||
bezels (): void
|
||||
|
||||
qualityLevels (): { height: number, id: number }[] & {
|
||||
selectedIndex: number
|
||||
selectedIndex_: number
|
||||
|
||||
addQualityLevel (representation: {
|
||||
id: number
|
||||
label: string
|
||||
height: number
|
||||
_enabled: boolean
|
||||
}): void
|
||||
}
|
||||
qualityLevels (): QualityLevels
|
||||
|
||||
textTracks (): TextTrackList & {
|
||||
on: Function
|
||||
tracks_: { kind: string, mode: string, language: string }[]
|
||||
}
|
||||
|
||||
audioTracks (): AudioTrackList
|
||||
}
|
||||
}
|
||||
|
||||
export interface VideoJSTechHLS extends videojs.Tech {
|
||||
hlsProvider: any // FIXME: typings
|
||||
}
|
||||
|
||||
export interface HlsjsConfigHandlerOptions {
|
||||
hlsjsConfig?: Config & { cueHandler: any }// FIXME: typings
|
||||
captionConfig?: any // FIXME: typings
|
||||
|
||||
levelLabelHandler?: (level: Level) => string
|
||||
}
|
||||
|
||||
type QualityLevelRepresentation = {
|
||||
id: number
|
||||
height: number
|
||||
|
||||
label?: string
|
||||
width?: number
|
||||
bandwidth?: number
|
||||
bitrate?: number
|
||||
|
||||
enabled?: Function
|
||||
_enabled: boolean
|
||||
}
|
||||
|
||||
type QualityLevels = QualityLevelRepresentation[] & {
|
||||
selectedIndex: number
|
||||
selectedIndex_: number
|
||||
|
||||
addQualityLevel (representation: QualityLevelRepresentation): void
|
||||
}
|
||||
|
||||
type VideoJSCaption = {
|
||||
label: string
|
||||
language: string
|
||||
|
|
@ -148,5 +177,7 @@ export {
|
|||
WebtorrentPluginOptions,
|
||||
P2PMediaLoaderPluginOptions,
|
||||
VideoJSPluginOptions,
|
||||
LoadedQualityData
|
||||
LoadedQualityData,
|
||||
QualityLevelRepresentation,
|
||||
QualityLevels
|
||||
}
|
||||
|
|
|
|||
|
|
@ -987,11 +987,6 @@
|
|||
semver "6.3.0"
|
||||
semver-intersect "1.4.0"
|
||||
|
||||
"@streamroot/videojs-hlsjs-plugin@^1.0.10":
|
||||
version "1.0.13"
|
||||
resolved "https://registry.yarnpkg.com/@streamroot/videojs-hlsjs-plugin/-/videojs-hlsjs-plugin-1.0.13.tgz#ae3afb3a5a3cd90e7b424b6b4cb14de1cde40836"
|
||||
integrity sha512-A55213sFj8nuoj23YiR0r73cRV4dlnSwXGwT1Qiu+oqhsauhqN+lHSRHFztMIU4EMf2Cafvv5P4R+A2c/Uj6nw==
|
||||
|
||||
"@types/bittorrent-protocol@*":
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/bittorrent-protocol/-/bittorrent-protocol-2.2.4.tgz#7dc0716924bc6a904753d39846ad235c7dab4641"
|
||||
|
|
|
|||
Loading…
Reference in a new issue