diff --git a/cmd/mjpeg-player/eventemitter3/index.js b/cmd/mjpeg-player/eventemitter3/index.js index 6ea485c4..7d65945d 100644 --- a/cmd/mjpeg-player/eventemitter3/index.js +++ b/cmd/mjpeg-player/eventemitter3/index.js @@ -10,7 +10,7 @@ var has = Object.prototype.hasOwnProperty * @constructor * @private */ -function Events() {} +function Events() { } // // We try to not inherit from `Object.prototype`. In some engines creating an @@ -185,7 +185,7 @@ EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) { case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true; } - for (i = 1, args = new Array(len -1); i < len; i++) { + for (i = 1, args = new Array(len - 1); i < len; i++) { args[i - 1] = arguments[i]; } @@ -203,7 +203,7 @@ EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) { case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break; case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break; default: - if (!args) for (j = 1, args = new Array(len -1); j < len; j++) { + if (!args) for (j = 1, args = new Array(len - 1); j < len; j++) { args[j - 1] = arguments[j]; } @@ -328,9 +328,4 @@ EventEmitter.prefixed = prefix; // EventEmitter.EventEmitter = EventEmitter; -// -// Expose the module. -// -if ('undefined' !== typeof module) { - module.exports = EventEmitter; -} +export default EventEmitter; diff --git a/cmd/mjpeg-player/hlsjs/controller/level-controller.js b/cmd/mjpeg-player/hlsjs/controller/level-controller.js new file mode 100644 index 00000000..9360f57f --- /dev/null +++ b/cmd/mjpeg-player/hlsjs/controller/level-controller.js @@ -0,0 +1,468 @@ +/* + * Level Controller +*/ + +import Event from '../events'; +import EventHandler from '../event-handler'; +import { logger } from '../utils/logger'; +import { ErrorTypes, ErrorDetails } from '../errors'; +import { isCodecSupportedInMp4 } from '../utils/codecs'; +import { addGroupId, computeReloadInterval } from './level-helper'; + +const { performance } = window; +let chromeOrFirefox; + +export default class LevelController extends EventHandler { + constructor (hls) { + super(hls, + Event.MANIFEST_LOADED, + Event.LEVEL_LOADED, + Event.AUDIO_TRACK_SWITCHED, + Event.FRAG_LOADED, + Event.ERROR); + + this.canload = false; + this.currentLevelIndex = null; + this.manualLevelIndex = -1; + this.timer = null; + + chromeOrFirefox = /chrome|firefox/.test(navigator.userAgent.toLowerCase()); + } + + onHandlerDestroying () { + this.clearTimer(); + this.manualLevelIndex = -1; + } + + clearTimer () { + if (this.timer !== null) { + clearTimeout(this.timer); + this.timer = null; + } + } + + startLoad () { + let levels = this._levels; + + this.canload = true; + this.levelRetryCount = 0; + + // clean up live level details to force reload them, and reset load errors + if (levels) { + levels.forEach(level => { + level.loadError = 0; + const levelDetails = level.details; + if (levelDetails && levelDetails.live) { + level.details = undefined; + } + }); + } + // speed up live playlist refresh if timer exists + if (this.timer !== null) { + this.loadLevel(); + } + } + + stopLoad () { + this.canload = false; + } + + onManifestLoaded (data) { + let levels = []; + let audioTracks = []; + let bitrateStart; + let levelSet = {}; + let levelFromSet = null; + let videoCodecFound = false; + let audioCodecFound = false; + + // regroup redundant levels together + data.levels.forEach(level => { + const attributes = level.attrs; + level.loadError = 0; + level.fragmentError = false; + + videoCodecFound = videoCodecFound || !!level.videoCodec; + audioCodecFound = audioCodecFound || !!level.audioCodec; + + // erase audio codec info if browser does not support mp4a.40.34. + // demuxer will autodetect codec and fallback to mpeg/audio + if (chromeOrFirefox && level.audioCodec && level.audioCodec.indexOf('mp4a.40.34') !== -1) { + level.audioCodec = undefined; + } + + levelFromSet = levelSet[level.bitrate]; // FIXME: we would also have to match the resolution here + + if (!levelFromSet) { + level.url = [level.url]; + level.urlId = 0; + levelSet[level.bitrate] = level; + levels.push(level); + } else { + levelFromSet.url.push(level.url); + } + + if (attributes) { + if (attributes.AUDIO) { + audioCodecFound = true; + addGroupId(levelFromSet || level, 'audio', attributes.AUDIO); + } + if (attributes.SUBTITLES) { + addGroupId(levelFromSet || level, 'text', attributes.SUBTITLES); + } + } + }); + + // remove audio-only level if we also have levels with audio+video codecs signalled + if (videoCodecFound && audioCodecFound) { + levels = levels.filter(({ videoCodec }) => !!videoCodec); + } + + // only keep levels with supported audio/video codecs + levels = levels.filter(({ audioCodec, videoCodec }) => { + return (!audioCodec || isCodecSupportedInMp4(audioCodec, 'audio')) && (!videoCodec || isCodecSupportedInMp4(videoCodec, 'video')); + }); + + if (data.audioTracks) { + audioTracks = data.audioTracks.filter(track => !track.audioCodec || isCodecSupportedInMp4(track.audioCodec, 'audio')); + // Reassign id's after filtering since they're used as array indices + audioTracks.forEach((track, index) => { + track.id = index; + }); + } + + if (levels.length > 0) { + // start bitrate is the first bitrate of the manifest + bitrateStart = levels[0].bitrate; + // sort level on bitrate + levels.sort((a, b) => a.bitrate - b.bitrate); + this._levels = levels; + // find index of first level in sorted levels + for (let i = 0; i < levels.length; i++) { + if (levels[i].bitrate === bitrateStart) { + this._firstLevel = i; + logger.log(`manifest loaded,${levels.length} level(s) found, first bitrate:${bitrateStart}`); + break; + } + } + + // Audio is only alternate if manifest include a URI along with the audio group tag + this.hls.trigger(Event.MANIFEST_PARSED, { + levels, + audioTracks, + firstLevel: this._firstLevel, + stats: data.stats, + audio: audioCodecFound, + video: videoCodecFound, + altAudio: audioTracks.some(t => !!t.url) + }); + } else { + this.hls.trigger(Event.ERROR, { + type: ErrorTypes.MEDIA_ERROR, + details: ErrorDetails.MANIFEST_INCOMPATIBLE_CODECS_ERROR, + fatal: true, + url: this.hls.url, + reason: 'no level with compatible codecs found in manifest' + }); + } + } + + get levels () { + return this._levels; + } + + get level () { + return this.currentLevelIndex; + } + + set level (newLevel) { + let levels = this._levels; + if (levels) { + newLevel = Math.min(newLevel, levels.length - 1); + if (this.currentLevelIndex !== newLevel || !levels[newLevel].details) { + this.setLevelInternal(newLevel); + } + } + } + + setLevelInternal (newLevel) { + const levels = this._levels; + const hls = this.hls; + // check if level idx is valid + if (newLevel >= 0 && newLevel < levels.length) { + // stopping live reloading timer if any + this.clearTimer(); + if (this.currentLevelIndex !== newLevel) { + logger.log(`switching to level ${newLevel}`); + this.currentLevelIndex = newLevel; + const levelProperties = levels[newLevel]; + levelProperties.level = newLevel; + hls.trigger(Event.LEVEL_SWITCHING, levelProperties); + } + const level = levels[newLevel]; + const levelDetails = level.details; + + // check if we need to load playlist for this level + if (!levelDetails || levelDetails.live) { + // level not retrieved yet, or live playlist we need to (re)load it + let urlId = level.urlId; + hls.trigger(Event.LEVEL_LOADING, { url: level.url[urlId], level: newLevel, id: urlId }); + } + } else { + // invalid level id given, trigger error + hls.trigger(Event.ERROR, { + type: ErrorTypes.OTHER_ERROR, + details: ErrorDetails.LEVEL_SWITCH_ERROR, + level: newLevel, + fatal: false, + reason: 'invalid level idx' + }); + } + } + + get manualLevel () { + return this.manualLevelIndex; + } + + set manualLevel (newLevel) { + this.manualLevelIndex = newLevel; + if (this._startLevel === undefined) { + this._startLevel = newLevel; + } + + if (newLevel !== -1) { + this.level = newLevel; + } + } + + get firstLevel () { + return this._firstLevel; + } + + set firstLevel (newLevel) { + this._firstLevel = newLevel; + } + + get startLevel () { + // hls.startLevel takes precedence over config.startLevel + // if none of these values are defined, fallback on this._firstLevel (first quality level appearing in variant manifest) + if (this._startLevel === undefined) { + let configStartLevel = this.hls.config.startLevel; + if (configStartLevel !== undefined) { + return configStartLevel; + } else { + return this._firstLevel; + } + } else { + return this._startLevel; + } + } + + set startLevel (newLevel) { + this._startLevel = newLevel; + } + + onError (data) { + if (data.fatal) { + if (data.type === ErrorTypes.NETWORK_ERROR) { + this.clearTimer(); + } + + return; + } + + let levelError = false, fragmentError = false; + let levelIndex; + + // try to recover not fatal errors + switch (data.details) { + case ErrorDetails.FRAG_LOAD_ERROR: + case ErrorDetails.FRAG_LOAD_TIMEOUT: + case ErrorDetails.KEY_LOAD_ERROR: + case ErrorDetails.KEY_LOAD_TIMEOUT: + levelIndex = data.frag.level; + fragmentError = true; + break; + case ErrorDetails.LEVEL_LOAD_ERROR: + case ErrorDetails.LEVEL_LOAD_TIMEOUT: + levelIndex = data.context.level; + levelError = true; + break; + case ErrorDetails.REMUX_ALLOC_ERROR: + levelIndex = data.level; + levelError = true; + break; + } + + if (levelIndex !== undefined) { + this.recoverLevel(data, levelIndex, levelError, fragmentError); + } + } + + /** + * Switch to a redundant stream if any available. + * If redundant stream is not available, emergency switch down if ABR mode is enabled. + * + * @param {Object} errorEvent + * @param {Number} levelIndex current level index + * @param {Boolean} levelError + * @param {Boolean} fragmentError + */ + // FIXME Find a better abstraction where fragment/level retry management is well decoupled + recoverLevel (errorEvent, levelIndex, levelError, fragmentError) { + let { config } = this.hls; + let { details: errorDetails } = errorEvent; + let level = this._levels[levelIndex]; + let redundantLevels, delay, nextLevel; + + level.loadError++; + level.fragmentError = fragmentError; + + if (levelError) { + if ((this.levelRetryCount + 1) <= config.levelLoadingMaxRetry) { + // exponential backoff capped to max retry timeout + delay = Math.min(Math.pow(2, this.levelRetryCount) * config.levelLoadingRetryDelay, config.levelLoadingMaxRetryTimeout); + // Schedule level reload + this.timer = setTimeout(() => this.loadLevel(), delay); + // boolean used to inform stream controller not to switch back to IDLE on non fatal error + errorEvent.levelRetry = true; + this.levelRetryCount++; + logger.warn(`level controller, ${errorDetails}, retry in ${delay} ms, current retry count is ${this.levelRetryCount}`); + } else { + logger.error(`level controller, cannot recover from ${errorDetails} error`); + this.currentLevelIndex = null; + // stopping live reloading timer if any + this.clearTimer(); + // switch error to fatal + errorEvent.fatal = true; + return; + } + } + + // Try any redundant streams if available for both errors: level and fragment + // If level.loadError reaches redundantLevels it means that we tried them all, no hope => let's switch down + if (levelError || fragmentError) { + redundantLevels = level.url.length; + + if (redundantLevels > 1 && level.loadError < redundantLevels) { + level.urlId = (level.urlId + 1) % redundantLevels; + level.details = undefined; + + logger.warn(`level controller, ${errorDetails} for level ${levelIndex}: switching to redundant URL-id ${level.urlId}`); + + // console.log('Current audio track group ID:', this.hls.audioTracks[this.hls.audioTrack].groupId); + // console.log('New video quality level audio group id:', level.attrs.AUDIO); + } else { + // Search for available level + if (this.manualLevelIndex === -1) { + // When lowest level has been reached, let's start hunt from the top + nextLevel = (levelIndex === 0) ? this._levels.length - 1 : levelIndex - 1; + logger.warn(`level controller, ${errorDetails}: switch to ${nextLevel}`); + this.hls.nextAutoLevel = this.currentLevelIndex = nextLevel; + } else if (fragmentError) { + // Allow fragment retry as long as configuration allows. + // reset this._level so that another call to set level() will trigger again a frag load + logger.warn(`level controller, ${errorDetails}: reload a fragment`); + this.currentLevelIndex = null; + } + } + } + } + + // reset errors on the successful load of a fragment + onFragLoaded ({ frag }) { + if (frag !== undefined && frag.type === 'main') { + const level = this._levels[frag.level]; + if (level !== undefined) { + level.fragmentError = false; + level.loadError = 0; + this.levelRetryCount = 0; + } + } + } + + onLevelLoaded (data) { + const { level, details } = data; + // only process level loaded events matching with expected level + if (level !== this.currentLevelIndex) { + return; + } + + const curLevel = this._levels[level]; + // reset level load error counter on successful level loaded only if there is no issues with fragments + if (!curLevel.fragmentError) { + curLevel.loadError = 0; + this.levelRetryCount = 0; + } + // if current playlist is a live playlist, arm a timer to reload it + if (details.live) { + const reloadInterval = computeReloadInterval(curLevel.details, details, data.stats.trequest); + logger.log(`live playlist, reload in ${Math.round(reloadInterval)} ms`); + this.timer = setTimeout(() => this.loadLevel(), reloadInterval); + } else { + this.clearTimer(); + } + } + + onAudioTrackSwitched (data) { + const audioGroupId = this.hls.audioTracks[data.id].groupId; + + const currentLevel = this.hls.levels[this.currentLevelIndex]; + if (!currentLevel) { + return; + } + + if (currentLevel.audioGroupIds) { + let urlId = -1; + + for (let i = 0; i < currentLevel.audioGroupIds.length; i++) { + if (currentLevel.audioGroupIds[i] === audioGroupId) { + urlId = i; + break; + } + } + + if (urlId !== currentLevel.urlId) { + currentLevel.urlId = urlId; + this.startLoad(); + } + } + } + + loadLevel () { + logger.debug('call to loadLevel'); + + if (this.currentLevelIndex !== null && this.canload) { + const levelObject = this._levels[this.currentLevelIndex]; + + if (typeof levelObject === 'object' && + levelObject.url.length > 0) { + const level = this.currentLevelIndex; + const id = levelObject.urlId; + const url = levelObject.url[id]; + + logger.log(`Attempt loading level index ${level} with URL-id ${id}`); + + // console.log('Current audio track group ID:', this.hls.audioTracks[this.hls.audioTrack].groupId); + // console.log('New video quality level audio group id:', levelObject.attrs.AUDIO, level); + + this.hls.trigger(Event.LEVEL_LOADING, { url, level, id }); + } + } + } + + get nextLoadLevel () { + if (this.manualLevelIndex !== -1) { + return this.manualLevelIndex; + } else { + return this.hls.nextAutoLevel; + } + } + + set nextLoadLevel (nextLevel) { + this.level = nextLevel; + if (this.manualLevelIndex === -1) { + this.hls.nextAutoLevel = nextLevel; + } + } +} diff --git a/cmd/mjpeg-player/hlsjs/controller/level-helper.js b/cmd/mjpeg-player/hlsjs/controller/level-helper.js new file mode 100644 index 00000000..23f59c35 --- /dev/null +++ b/cmd/mjpeg-player/hlsjs/controller/level-helper.js @@ -0,0 +1,229 @@ +/** + * @module LevelHelper + * + * Providing methods dealing with playlist sliding and drift + * + * TODO: Create an actual `Level` class/model that deals with all this logic in an object-oriented-manner. + * + * */ + +import { logger } from '../utils/logger'; + +export function addGroupId (level, type, id) { + switch (type) { + case 'audio': + if (!level.audioGroupIds) { + level.audioGroupIds = []; + } + level.audioGroupIds.push(id); + break; + case 'text': + if (!level.textGroupIds) { + level.textGroupIds = []; + } + level.textGroupIds.push(id); + break; + } +} + +export function updatePTS (fragments, fromIdx, toIdx) { + let fragFrom = fragments[fromIdx], fragTo = fragments[toIdx], fragToPTS = fragTo.startPTS; + // if we know startPTS[toIdx] + if (Number.isFinite(fragToPTS)) { + // update fragment duration. + // it helps to fix drifts between playlist reported duration and fragment real duration + if (toIdx > fromIdx) { + fragFrom.duration = fragToPTS - fragFrom.start; + if (fragFrom.duration < 0) { + logger.warn(`negative duration computed for frag ${fragFrom.sn},level ${fragFrom.level}, there should be some duration drift between playlist and fragment!`); + } + } else { + fragTo.duration = fragFrom.start - fragToPTS; + if (fragTo.duration < 0) { + logger.warn(`negative duration computed for frag ${fragTo.sn},level ${fragTo.level}, there should be some duration drift between playlist and fragment!`); + } + } + } else { + // we dont know startPTS[toIdx] + if (toIdx > fromIdx) { + fragTo.start = fragFrom.start + fragFrom.duration; + } else { + fragTo.start = Math.max(fragFrom.start - fragTo.duration, 0); + } + } +} + +export function updateFragPTSDTS (details, frag, startPTS, endPTS, startDTS, endDTS) { + // update frag PTS/DTS + let maxStartPTS = startPTS; + if (Number.isFinite(frag.startPTS)) { + // delta PTS between audio and video + let deltaPTS = Math.abs(frag.startPTS - startPTS); + if (!Number.isFinite(frag.deltaPTS)) { + frag.deltaPTS = deltaPTS; + } else { + frag.deltaPTS = Math.max(deltaPTS, frag.deltaPTS); + } + + maxStartPTS = Math.max(startPTS, frag.startPTS); + startPTS = Math.min(startPTS, frag.startPTS); + endPTS = Math.max(endPTS, frag.endPTS); + startDTS = Math.min(startDTS, frag.startDTS); + endDTS = Math.max(endDTS, frag.endDTS); + } + + const drift = startPTS - frag.start; + frag.start = frag.startPTS = startPTS; + frag.maxStartPTS = maxStartPTS; + frag.endPTS = endPTS; + frag.startDTS = startDTS; + frag.endDTS = endDTS; + frag.duration = endPTS - startPTS; + + const sn = frag.sn; + // exit if sn out of range + if (!details || sn < details.startSN || sn > details.endSN) { + return 0; + } + + let fragIdx, fragments, i; + fragIdx = sn - details.startSN; + fragments = details.fragments; + // update frag reference in fragments array + // rationale is that fragments array might not contain this frag object. + // this will happen if playlist has been refreshed between frag loading and call to updateFragPTSDTS() + // if we don't update frag, we won't be able to propagate PTS info on the playlist + // resulting in invalid sliding computation + fragments[fragIdx] = frag; + // adjust fragment PTS/duration from seqnum-1 to frag 0 + for (i = fragIdx; i > 0; i--) { + updatePTS(fragments, i, i - 1); + } + + // adjust fragment PTS/duration from seqnum to last frag + for (i = fragIdx; i < fragments.length - 1; i++) { + updatePTS(fragments, i, i + 1); + } + + details.PTSKnown = true; + return drift; +} + +export function mergeDetails (oldDetails, newDetails) { + // potentially retrieve cached initsegment + if (newDetails.initSegment && oldDetails.initSegment) { + newDetails.initSegment = oldDetails.initSegment; + } + + // check if old/new playlists have fragments in common + // loop through overlapping SN and update startPTS , cc, and duration if any found + let ccOffset = 0; + let PTSFrag; + mapFragmentIntersection(oldDetails, newDetails, (oldFrag, newFrag) => { + ccOffset = oldFrag.cc - newFrag.cc; + if (Number.isFinite(oldFrag.startPTS)) { + newFrag.start = newFrag.startPTS = oldFrag.startPTS; + newFrag.endPTS = oldFrag.endPTS; + newFrag.duration = oldFrag.duration; + newFrag.backtracked = oldFrag.backtracked; + newFrag.dropped = oldFrag.dropped; + PTSFrag = newFrag; + } + // PTS is known when there are overlapping segments + newDetails.PTSKnown = true; + }); + + if (!newDetails.PTSKnown) { + return; + } + + if (ccOffset) { + logger.log('discontinuity sliding from playlist, take drift into account'); + const newFragments = newDetails.fragments; + for (let i = 0; i < newFragments.length; i++) { + newFragments[i].cc += ccOffset; + } + } + + // if at least one fragment contains PTS info, recompute PTS information for all fragments + if (PTSFrag) { + updateFragPTSDTS(newDetails, PTSFrag, PTSFrag.startPTS, PTSFrag.endPTS, PTSFrag.startDTS, PTSFrag.endDTS); + } else { + // ensure that delta is within oldFragments range + // also adjust sliding in case delta is 0 (we could have old=[50-60] and new=old=[50-61]) + // in that case we also need to adjust start offset of all fragments + adjustSliding(oldDetails, newDetails); + } + // if we are here, it means we have fragments overlapping between + // old and new level. reliable PTS info is thus relying on old level + newDetails.PTSKnown = oldDetails.PTSKnown; +} + +export function mergeSubtitlePlaylists (oldPlaylist, newPlaylist, referenceStart = 0) { + let lastIndex = -1; + mapFragmentIntersection(oldPlaylist, newPlaylist, (oldFrag, newFrag, index) => { + newFrag.start = oldFrag.start; + lastIndex = index; + }); + + const frags = newPlaylist.fragments; + if (lastIndex < 0) { + frags.forEach(frag => { + frag.start += referenceStart; + }); + return; + } + + for (let i = lastIndex + 1; i < frags.length; i++) { + frags[i].start = (frags[i - 1].start + frags[i - 1].duration); + } +} + +export function mapFragmentIntersection (oldPlaylist, newPlaylist, intersectionFn) { + if (!oldPlaylist || !newPlaylist) { + return; + } + + const start = Math.max(oldPlaylist.startSN, newPlaylist.startSN) - newPlaylist.startSN; + const end = Math.min(oldPlaylist.endSN, newPlaylist.endSN) - newPlaylist.startSN; + const delta = newPlaylist.startSN - oldPlaylist.startSN; + + for (let i = start; i <= end; i++) { + const oldFrag = oldPlaylist.fragments[delta + i]; + const newFrag = newPlaylist.fragments[i]; + if (!oldFrag || !newFrag) { + break; + } + intersectionFn(oldFrag, newFrag, i); + } +} + +export function adjustSliding (oldPlaylist, newPlaylist) { + const delta = newPlaylist.startSN - oldPlaylist.startSN; + const oldFragments = oldPlaylist.fragments; + const newFragments = newPlaylist.fragments; + + if (delta < 0 || delta > oldFragments.length) { + return; + } + for (let i = 0; i < newFragments.length; i++) { + newFragments[i].start += oldFragments[delta].start; + } +} + +export function computeReloadInterval (currentPlaylist, newPlaylist, lastRequestTime) { + let reloadInterval = 1000 * (newPlaylist.averagetargetduration ? newPlaylist.averagetargetduration : newPlaylist.targetduration); + const minReloadInterval = reloadInterval / 2; + if (currentPlaylist && newPlaylist.endSN === currentPlaylist.endSN) { + // follow HLS Spec, If the client reloads a Playlist file and finds that it has not + // changed then it MUST wait for a period of one-half the target + // duration before retrying. + reloadInterval = minReloadInterval; + } + + if (lastRequestTime) { + reloadInterval = Math.max(minReloadInterval, reloadInterval - (window.performance.now() - lastRequestTime)); + } + // in any case, don't reload more than half of target duration + return Math.round(reloadInterval); +} diff --git a/cmd/mjpeg-player/index.html b/cmd/mjpeg-player/index.html index 60a40429..064f436c 100644 --- a/cmd/mjpeg-player/index.html +++ b/cmd/mjpeg-player/index.html @@ -1,59 +1,34 @@ - - - - Mjpeg Player - + + Mjpeg Player + + -
-
-
-
- +
+
+
+
+ +
+
+
+ Frame Rate: fps +
+
+ +
-
-
- - - -
-
- Frame Rate: fps -
-
- -
-
-
-
- ©2019 Australian Ocean Laboratory Limited (AusOcean) (License) -
-
+
+
+ ©2019 Australian Ocean Laboratory Limited (AusOcean) (License) +
+
\ No newline at end of file diff --git a/cmd/mjpeg-player/main.js b/cmd/mjpeg-player/main.js index e4a0eba0..037b31ed 100644 --- a/cmd/mjpeg-player/main.js +++ b/cmd/mjpeg-player/main.js @@ -1,9 +1,12 @@ /* +NAME + main.js + AUTHOR Trek Hopton LICENSE - This file is Copyright (C) 2020 the Australian Ocean Lab (AusOcean) + This file is Copyright (C) 2019 the Australian Ocean Lab (AusOcean) It is free software: you can redistribute it and/or modify them under the terms of the GNU General Public License as published by the @@ -16,128 +19,57 @@ LICENSE for more details. You should have received a copy of the GNU General Public License in gpl.txt. - If not, see http://www.gnu.org/licenses.. + If not, see http://www.gnu.org/licenses. */ -import Hls from "./hlsjs/hls.js"; - -let started = false; -let player, viewer; - -// init gets DOM elements once the document has been loaded and adds listeners where necessary. -function init() { - document.addEventListener('DOMContentLoaded', load); - document.addEventListener('DOMContentLoaded', function () { - document.getElementById('urlBtn').addEventListener('click', load); - document.getElementById('fileInput').addEventListener('change', play); - viewer = document.getElementById('viewer'); - } - ); -} - -init(); - -// load gets the URL from the URL input element or the browser's URL bar -// and creates an Hls instance to load the content from the URL. -function load() { - let url = document.getElementById('url').value; - if (url == "") { - url = getQuery() - document.getElementById('url').value = url; - } - if (url[0] == '/') { - url = window.location.protocol + '//' + window.location.host + url; - } - if (url == "") { - return; - } - - let hls = new Hls(); - hls.loadSource(url, append); -} - -// getQuery gets everything after the question mark from the URL in the browser's URL bar. -function getQuery() { - let regex = new RegExp("\\?(.*)"); - let match = regex.exec(window.location.href); - if (match == null) { - return ''; - } else { - return decodeURIComponent(match[1].replace(/\+/g, " ")); - } -} - -// append, on the first call, starts a player worker and passes it a frame rate and the video data, -// on subsequent calls it passes the video data to the player worker. -function append(data) { - if (!started) { - player = new Worker("player.js"); - - let rate = document.getElementById('rate'); - if (rate.value && rate.value > 0) { - player.postMessage({ msg: "setFrameRate", data: rate.value }); - } - - player.onmessage = handleMessage; - - player.postMessage({ msg: "loadMtsMjpeg", data: data }, [data]); - started = true; - } else { - player.postMessage({ msg: "appendMtsMjpeg", data: data }, [data]); - } - -} - -// play will process and play the target file chosen with the file input element. +// play will process and play the chosen target file. function play() { - const input = event.target.files[0]; - const reader = new FileReader(); + const viewer = document.getElementById('viewer'); + const input = event.target.files[0]; + const reader = new FileReader(); - reader.onload = event => { - const player = new Worker("player.js"); + reader.onload = event => { + const player = new Worker("player.js"); - let rate = document.getElementById('rate'); - if (rate.value && rate.value > 0) { - player.postMessage({ msg: "setFrameRate", data: rate.value }); - } + let rate = document.getElementById('rate'); + if (rate.value && rate.value > 0) { + player.postMessage({ msg: "setFrameRate", data: rate.value }); + } - player.onmessage = handleMessage; + player.onmessage = e => { + switch (e.data.msg) { + case "frame": + const blob = new Blob([new Uint8Array(e.data.data)], { + type: 'video/x-motion-jpeg' + }); + const url = URL.createObjectURL(blob); + viewer.src = url; + break; + case "log": + console.log(e.data.data); + break; + case "stop": + break; + default: + console.error("unknown message from player"); + break; + } + }; + + switch (input.name.split('.')[1]) { + case "mjpeg": + case "mjpg": + player.postMessage({ msg: "loadMjpeg", data: event.target.result }, [event.target.result]); + break; + case "ts": + player.postMessage({ msg: "loadMtsMjpeg", data: event.target.result }, [event.target.result]); + break; + default: + console.error("unknown file format"); + break; + } + }; + reader.onerror = error => reject(error); + reader.readAsArrayBuffer(input); - switch (input.name.split('.')[1]) { - case "mjpeg": - case "mjpg": - player.postMessage({ msg: "loadMjpeg", data: event.target.result }, [event.target.result]); - break; - case "ts": - player.postMessage({ msg: "loadMtsMjpeg", data: event.target.result }, [event.target.result]); - break; - default: - console.error("unknown file format"); - break; - } - }; - reader.onerror = error => reject(error); - reader.readAsArrayBuffer(input); } - -// handleMessage handles messgaes from the player workers, its main job is to update the display when a frame is received. -function handleMessage(e) { - switch (e.data.msg) { - case "frame": - const blob = new Blob([new Uint8Array(e.data.data)], { - type: 'video/x-motion-jpeg' - }); - const url = URL.createObjectURL(blob); - viewer.src = url; - break; - case "log": - console.log(e.data.data); - break; - case "stop": - console.log("stopped"); - break; - default: - console.error("unknown message from player"); - break; - } -} \ No newline at end of file diff --git a/cmd/mjpeg-player/player.js b/cmd/mjpeg-player/player.js index ea96e031..34ff75ab 100644 --- a/cmd/mjpeg-player/player.js +++ b/cmd/mjpeg-player/player.js @@ -1,9 +1,12 @@ /* +NAME + player.js + AUTHOR Trek Hopton LICENSE - This file is Copyright (C) 2020 the Australian Ocean Lab (AusOcean) + This file is Copyright (C) 2019 the Australian Ocean Lab (AusOcean) It is free software: you can redistribute it and/or modify them under the terms of the GNU General Public License as published by the @@ -19,116 +22,68 @@ LICENSE If not, see http://www.gnu.org/licenses. */ -let frameRate = 25; //Keeps track of the frame rate, default is 25fps. -self.importScripts('./lex-mjpeg.js'); -self.importScripts('./hlsjs/mts-demuxer.js'); +let frameRate = 30; -const codecs = { - MJPEG: 1, - MTS_MJPEG: 2, -} - -// onmessage is called whenever the main thread sends this worker a message. onmessage = e => { - switch (e.data.msg) { - case "setFrameRate": - frameRate = e.data.data; - break; - case "loadMjpeg": - player = new PlayerWorker(); - player.init(codecs.MJPEG); - player.append(e.data.data); - player.setFrameRate(frameRate); - player.start(); - break; - case "loadMtsMjpeg": - player = new PlayerWorker(); - player.init(codecs.MTS_MJPEG); - player.append(e.data.data); - player.start(); - break; - case "appendMtsMjpeg": - player.append(e.data.data); - break; - default: - console.error("unknown message from main thread"); - break; - } + switch (e.data.msg) { + case "setFrameRate": + frameRate = e.data.data; + break; + case "loadMjpeg": + self.importScripts('./lex-mjpeg.js'); + let mjpeg = new Uint8Array(e.data.data); + let lex = new MJPEGLexer(mjpeg); + player = new Player(lex); + player.setFrameRate(frameRate); + player.start(); + break; + case "loadMtsMjpeg": + self.importScripts('./hlsjs/mts-demuxer.js'); + let mtsMjpeg = new Uint8Array(e.data.data); + let demux = new MTSDemuxer(); + let tracks = demux._getTracks(); + demux.append(mtsMjpeg); + buf = new FrameBuffer(tracks.video.data); + player = new Player(buf); + player.setFrameRate(frameRate); //TODO: read frame rate from metadata. + player.start(); + break; + default: + console.error("unknown message from main thread"); + break; + } }; -// PlayerWorker has a FrameBuffer to hold frames and once started, passes them one at a time to the main thread. -class PlayerWorker { - init(codec) { - this.frameRate = frameRate; - this.codec = codec; - switch (codec) { - case codecs.MJPEG: - this.frameSrc = new MJPEGLexer(); - break; - case codecs.MTS_MJPEG: - this.frameSrc = new FrameBuffer(); - break; +class Player { + constructor(buffer) { + this.buffer = buffer; + this.frameRate = frameRate; } - } - setFrameRate(rate) { - this.frameRate = rate; - } - - start() { - let frame = this.frameSrc.read(); - if (frame != null) { - postMessage({ msg: "frame", data: frame.buffer }, [frame.buffer]); - setTimeout(() => { this.start(); }, 1000 / this.frameRate); - } else { - postMessage({ msg: "stop" }); + setFrameRate(rate) { + this.frameRate = rate; } - } - append(data) { - this.frameSrc.append(data); - } + start() { + let frame = this.buffer.read(); + if (frame != null) { + postMessage({ msg: "frame", data: frame.buffer }, [frame.buffer]); + setTimeout(() => { this.start(); }, 1000 / this.frameRate); + } else { + postMessage({ msg: "stop" }); + } + } } // FrameBuffer allows an array of subarrays (MJPEG frames) to be read one at a time. class FrameBuffer { - constructor() { - this.segments = []; - this.off = { segment: 0, frame: 0 }; - this.demuxer = new MTSDemuxer(); - } - - // read returns the next single frame. - read() { - let off = this.off; - let prevOff = off; - if (this.incrementOff()) { - return this.segments[prevOff.segment][prevOff.frame]; - } else { - return null; + constructor(src) { + this.src = src; + this.off = 0; } - } - append(data) { - let demuxed = this.demuxer.demux(new Uint8Array(data)); - this.segments.push(demuxed.data); - } - - incrementOff() { - if (!this.segments || !this.segments[this.off.segment]) { - return false; + // read returns the next single frame. + read() { + return this.src[this.off++]; } - if (this.off.frame + 1 >= this.segments[this.off.segment].length) { - if (this.off.segment + 1 >= this.segments.length) { - return false; - } else { - this.off.segment++; - this.off.frame = 0; - return true; - } - } else { - this.off.frame++; - return true; - } - } } \ No newline at end of file diff --git a/cmd/mjpeg-player/url-toolkit/url-toolkit.js b/cmd/mjpeg-player/url-toolkit/url-toolkit.js index 44337aaa..75c7f78a 100644 --- a/cmd/mjpeg-player/url-toolkit/url-toolkit.js +++ b/cmd/mjpeg-player/url-toolkit/url-toolkit.js @@ -1,163 +1,149 @@ // see https://tools.ietf.org/html/rfc1808 -/* jshint ignore:start */ -(function(root) { -/* jshint ignore:end */ +var URL_REGEX = /^((?:[a-zA-Z0-9+\-.]+:)?)(\/\/[^\/?#]*)?((?:[^\/\?#]*\/)*.*?)??(;.*?)?(\?.*?)?(#.*?)?$/; +var FIRST_SEGMENT_REGEX = /^([^\/?#]*)(.*)$/; +var SLASH_DOT_REGEX = /(?:\/|^)\.(?=\/)/g; +var SLASH_DOT_DOT_REGEX = /(?:\/|^)\.\.\/(?!\.\.\/).*?(?=\/)/g; - var URL_REGEX = /^((?:[a-zA-Z0-9+\-.]+:)?)(\/\/[^\/?#]*)?((?:[^\/\?#]*\/)*.*?)??(;.*?)?(\?.*?)?(#.*?)?$/; - var FIRST_SEGMENT_REGEX = /^([^\/?#]*)(.*)$/; - var SLASH_DOT_REGEX = /(?:\/|^)\.(?=\/)/g; - var SLASH_DOT_DOT_REGEX = /(?:\/|^)\.\.\/(?!\.\.\/).*?(?=\/)/g; - - var URLToolkit = { // jshint ignore:line - // If opts.alwaysNormalize is true then the path will always be normalized even when it starts with / or // - // E.g - // With opts.alwaysNormalize = false (default, spec compliant) - // http://a.com/b/cd + /e/f/../g => http://a.com/e/f/../g - // With opts.alwaysNormalize = true (not spec compliant) - // http://a.com/b/cd + /e/f/../g => http://a.com/e/g - buildAbsoluteURL: function(baseURL, relativeURL, opts) { - opts = opts || {}; - // remove any remaining space and CRLF - baseURL = baseURL.trim(); - relativeURL = relativeURL.trim(); - if (!relativeURL) { - // 2a) If the embedded URL is entirely empty, it inherits the - // entire base URL (i.e., is set equal to the base URL) - // and we are done. - if (!opts.alwaysNormalize) { - return baseURL; - } - var basePartsForNormalise = URLToolkit.parseURL(baseURL); - if (!basePartsForNormalise) { - throw new Error('Error trying to parse base URL.'); - } - basePartsForNormalise.path = URLToolkit.normalizePath(basePartsForNormalise.path); - return URLToolkit.buildURLFromParts(basePartsForNormalise); +var URLToolkit = { // jshint ignore:line + // If opts.alwaysNormalize is true then the path will always be normalized even when it starts with / or // + // E.g + // With opts.alwaysNormalize = false (default, spec compliant) + // http://a.com/b/cd + /e/f/../g => http://a.com/e/f/../g + // With opts.alwaysNormalize = true (not spec compliant) + // http://a.com/b/cd + /e/f/../g => http://a.com/e/g + buildAbsoluteURL: function (baseURL, relativeURL, opts) { + opts = opts || {}; + // remove any remaining space and CRLF + baseURL = baseURL.trim(); + relativeURL = relativeURL.trim(); + if (!relativeURL) { + // 2a) If the embedded URL is entirely empty, it inherits the + // entire base URL (i.e., is set equal to the base URL) + // and we are done. + if (!opts.alwaysNormalize) { + return baseURL; } - var relativeParts = URLToolkit.parseURL(relativeURL); - if (!relativeParts) { - throw new Error('Error trying to parse relative URL.'); - } - if (relativeParts.scheme) { - // 2b) If the embedded URL starts with a scheme name, it is - // interpreted as an absolute URL and we are done. - if (!opts.alwaysNormalize) { - return relativeURL; - } - relativeParts.path = URLToolkit.normalizePath(relativeParts.path); - return URLToolkit.buildURLFromParts(relativeParts); - } - var baseParts = URLToolkit.parseURL(baseURL); - if (!baseParts) { + var basePartsForNormalise = URLToolkit.parseURL(baseURL); + if (!basePartsForNormalise) { throw new Error('Error trying to parse base URL.'); } - if (!baseParts.netLoc && baseParts.path && baseParts.path[0] !== '/') { - // If netLoc missing and path doesn't start with '/', assume everthing before the first '/' is the netLoc - // This causes 'example.com/a' to be handled as '//example.com/a' instead of '/example.com/a' - var pathParts = FIRST_SEGMENT_REGEX.exec(baseParts.path); - baseParts.netLoc = pathParts[1]; - baseParts.path = pathParts[2]; + basePartsForNormalise.path = URLToolkit.normalizePath(basePartsForNormalise.path); + return URLToolkit.buildURLFromParts(basePartsForNormalise); + } + var relativeParts = URLToolkit.parseURL(relativeURL); + if (!relativeParts) { + throw new Error('Error trying to parse relative URL.'); + } + if (relativeParts.scheme) { + // 2b) If the embedded URL starts with a scheme name, it is + // interpreted as an absolute URL and we are done. + if (!opts.alwaysNormalize) { + return relativeURL; } - if (baseParts.netLoc && !baseParts.path) { - baseParts.path = '/'; - } - var builtParts = { - // 2c) Otherwise, the embedded URL inherits the scheme of - // the base URL. - scheme: baseParts.scheme, - netLoc: relativeParts.netLoc, - path: null, - params: relativeParts.params, - query: relativeParts.query, - fragment: relativeParts.fragment - }; - if (!relativeParts.netLoc) { - // 3) If the embedded URL's is non-empty, we skip to - // Step 7. Otherwise, the embedded URL inherits the - // (if any) of the base URL. - builtParts.netLoc = baseParts.netLoc; - // 4) If the embedded URL path is preceded by a slash "/", the - // path is not relative and we skip to Step 7. - if (relativeParts.path[0] !== '/') { - if (!relativeParts.path) { - // 5) If the embedded URL path is empty (and not preceded by a - // slash), then the embedded URL inherits the base URL path - builtParts.path = baseParts.path; - // 5a) if the embedded URL's is non-empty, we skip to - // step 7; otherwise, it inherits the of the base - // URL (if any) and - if (!relativeParts.params) { - builtParts.params = baseParts.params; - // 5b) if the embedded URL's is non-empty, we skip to - // step 7; otherwise, it inherits the of the base - // URL (if any) and we skip to step 7. - if (!relativeParts.query) { - builtParts.query = baseParts.query; - } + relativeParts.path = URLToolkit.normalizePath(relativeParts.path); + return URLToolkit.buildURLFromParts(relativeParts); + } + var baseParts = URLToolkit.parseURL(baseURL); + if (!baseParts) { + throw new Error('Error trying to parse base URL.'); + } + if (!baseParts.netLoc && baseParts.path && baseParts.path[0] !== '/') { + // If netLoc missing and path doesn't start with '/', assume everthing before the first '/' is the netLoc + // This causes 'example.com/a' to be handled as '//example.com/a' instead of '/example.com/a' + var pathParts = FIRST_SEGMENT_REGEX.exec(baseParts.path); + baseParts.netLoc = pathParts[1]; + baseParts.path = pathParts[2]; + } + if (baseParts.netLoc && !baseParts.path) { + baseParts.path = '/'; + } + var builtParts = { + // 2c) Otherwise, the embedded URL inherits the scheme of + // the base URL. + scheme: baseParts.scheme, + netLoc: relativeParts.netLoc, + path: null, + params: relativeParts.params, + query: relativeParts.query, + fragment: relativeParts.fragment + }; + if (!relativeParts.netLoc) { + // 3) If the embedded URL's is non-empty, we skip to + // Step 7. Otherwise, the embedded URL inherits the + // (if any) of the base URL. + builtParts.netLoc = baseParts.netLoc; + // 4) If the embedded URL path is preceded by a slash "/", the + // path is not relative and we skip to Step 7. + if (relativeParts.path[0] !== '/') { + if (!relativeParts.path) { + // 5) If the embedded URL path is empty (and not preceded by a + // slash), then the embedded URL inherits the base URL path + builtParts.path = baseParts.path; + // 5a) if the embedded URL's is non-empty, we skip to + // step 7; otherwise, it inherits the of the base + // URL (if any) and + if (!relativeParts.params) { + builtParts.params = baseParts.params; + // 5b) if the embedded URL's is non-empty, we skip to + // step 7; otherwise, it inherits the of the base + // URL (if any) and we skip to step 7. + if (!relativeParts.query) { + builtParts.query = baseParts.query; } - } else { - // 6) The last segment of the base URL's path (anything - // following the rightmost slash "/", or the entire path if no - // slash is present) is removed and the embedded URL's path is - // appended in its place. - var baseURLPath = baseParts.path; - var newPath = baseURLPath.substring(0, baseURLPath.lastIndexOf('/') + 1) + relativeParts.path; - builtParts.path = URLToolkit.normalizePath(newPath); } + } else { + // 6) The last segment of the base URL's path (anything + // following the rightmost slash "/", or the entire path if no + // slash is present) is removed and the embedded URL's path is + // appended in its place. + var baseURLPath = baseParts.path; + var newPath = baseURLPath.substring(0, baseURLPath.lastIndexOf('/') + 1) + relativeParts.path; + builtParts.path = URLToolkit.normalizePath(newPath); } } - if (builtParts.path === null) { - builtParts.path = opts.alwaysNormalize ? URLToolkit.normalizePath(relativeParts.path) : relativeParts.path; - } - return URLToolkit.buildURLFromParts(builtParts); - }, - parseURL: function(url) { - var parts = URL_REGEX.exec(url); - if (!parts) { - return null; - } - return { - scheme: parts[1] || '', - netLoc: parts[2] || '', - path: parts[3] || '', - params: parts[4] || '', - query: parts[5] || '', - fragment: parts[6] || '' - }; - }, - normalizePath: function(path) { - // The following operations are - // then applied, in order, to the new path: - // 6a) All occurrences of "./", where "." is a complete path - // segment, are removed. - // 6b) If the path ends with "." as a complete path segment, - // that "." is removed. - path = path.split('').reverse().join('').replace(SLASH_DOT_REGEX, ''); - // 6c) All occurrences of "/../", where is a - // complete path segment not equal to "..", are removed. - // Removal of these path segments is performed iteratively, - // removing the leftmost matching pattern on each iteration, - // until no matching pattern remains. - // 6d) If the path ends with "/..", where is a - // complete path segment not equal to "..", that - // "/.." is removed. - while (path.length !== (path = path.replace(SLASH_DOT_DOT_REGEX, '')).length) {} // jshint ignore:line - return path.split('').reverse().join(''); - }, - buildURLFromParts: function(parts) { - return parts.scheme + parts.netLoc + parts.path + parts.params + parts.query + parts.fragment; } - }; + if (builtParts.path === null) { + builtParts.path = opts.alwaysNormalize ? URLToolkit.normalizePath(relativeParts.path) : relativeParts.path; + } + return URLToolkit.buildURLFromParts(builtParts); + }, + parseURL: function (url) { + var parts = URL_REGEX.exec(url); + if (!parts) { + return null; + } + return { + scheme: parts[1] || '', + netLoc: parts[2] || '', + path: parts[3] || '', + params: parts[4] || '', + query: parts[5] || '', + fragment: parts[6] || '' + }; + }, + normalizePath: function (path) { + // The following operations are + // then applied, in order, to the new path: + // 6a) All occurrences of "./", where "." is a complete path + // segment, are removed. + // 6b) If the path ends with "." as a complete path segment, + // that "." is removed. + path = path.split('').reverse().join('').replace(SLASH_DOT_REGEX, ''); + // 6c) All occurrences of "/../", where is a + // complete path segment not equal to "..", are removed. + // Removal of these path segments is performed iteratively, + // removing the leftmost matching pattern on each iteration, + // until no matching pattern remains. + // 6d) If the path ends with "/..", where is a + // complete path segment not equal to "..", that + // "/.." is removed. + while (path.length !== (path = path.replace(SLASH_DOT_DOT_REGEX, '')).length) { } // jshint ignore:line + return path.split('').reverse().join(''); + }, + buildURLFromParts: function (parts) { + return parts.scheme + parts.netLoc + parts.path + parts.params + parts.query + parts.fragment; + } +}; -/* jshint ignore:start */ - if(typeof exports === 'object' && typeof module === 'object') - module.exports = URLToolkit; - else if(typeof define === 'function' && define.amd) - define([], function() { return URLToolkit; }); - else if(typeof exports === 'object') - exports["URLToolkit"] = URLToolkit; - else - root["URLToolkit"] = URLToolkit; -})(this); -/* jshint ignore:end */ +export default URLToolkit;