LogalDeveloper/owncast
0
Fork 0
Code Activity

Merge remote-tracking branch 'origin/develop' into webv2

Browse Source
This commit is contained in:
Gabe Kangas
2022-05-25 22:57:14 -07:00
parent f041727f07 fd271b1f81
commit 715504eb69
148 changed files with 244 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
webroot/js/app.js
View File

@@ -319,8 +319,12 @@ export default class App extends Component {
lastConnectTime,
streamTitle,
lastDisconnectTime,
serverTime,
} = status;
const clockSkew = new Date(serverTime).getTime() - Date.now();
this.player.setClockSkew(clockSkew);
this.setState({
viewerCount,
lastConnectTime,

2
webroot/js/components/auth-fediverse.js
View File

@@ -115,7 +115,7 @@ export default class FediverseAuth extends Component {
const message = verifying
? 'Paste in the code that was sent to your Fediverse account. If you did not receive a code, make sure you can accept direct messages.'
: !authenticated
? html`Receive a direct message from on the Fediverse to ${' '} link your
? html`Receive a direct message on the Fediverse to ${' '} link your
account to ${' '} <span class="font-bold">${username}</span>, or login
as a previously linked chat user.`
: html`<span

50
webroot/js/components/latencyCompensator.js
View File

@@ -41,6 +41,7 @@ const MIN_LATENCY = 4 * 1000; // The absolute lowest we'll continue compensation
const MAX_LATENCY = 15 * 1000; // The absolute highest we'll allow a target latency to be before we start compensating.
const MAX_JUMP_LATENCY = 5 * 1000; // How much behind the max latency we need to be behind before we allow a jump.
const MAX_JUMP_FREQUENCY = 20 * 1000; // How often we'll allow a time jump.
const MAX_ACTIONABLE_LATENCY = 80 * 1000; // If latency is seen to be greater than this then something is wrong.
const STARTUP_WAIT_TIME = 10 * 1000; // The amount of time after we start up that we'll allow monitoring to occur.
class LatencyCompensator {
@@ -57,6 +58,7 @@ class LatencyCompensator {
this.playbackRate = 1.0;
this.lastJumpOccurred = null;
this.startupTime = new Date();
this.clockSkewMs = 0;
this.player.on('playing', this.handlePlaying.bind(this));
this.player.on('error', this.handleError.bind(this));
@@ -67,6 +69,15 @@ class LatencyCompensator {
this.player.on('canplay', this.handlePlaying.bind(this));
}
// To keep our client clock in sync with the server clock to determine
// accurate latency the clock skew should be set here to be used in
// the calculation. Otherwise if somebody's client clock is significantly
// off it will have a very incorrect latency determination and make bad
// decisions.
setClockSkew(skewMs) {
this.clockSkewMs = skewMs;
}
// This is run on a timer to check if we should be compensating for latency.
check() {
// We have an arbitrary delay at startup to allow the player to run
@@ -166,9 +177,21 @@ class LatencyCompensator {
);
const segmentTime = segment.dateTimeObject.getTime();
const now = new Date().getTime();
const now = new Date().getTime() + this.clockSkewMs;
const latency = now - segmentTime;
// Since the calculation of latency is based on clock times, it's possible
// things can be reported incorrectly. So we use a sanity check here to
// simply bail if the latency is reported to so high we think the whole
// thing is wrong. We can't make decisions based on bad data, so give up.
// This can also occur if somebody pauses for a long time and hits play
// again but it's not really possible to know the difference between
// the two scenarios.
if (Math.abs(latency) > MAX_ACTIONABLE_LATENCY) {
this.timeout();
return;
}
if (latency > maxLatencyThreshold) {
// If the current latency exceeds the max jump amount then
// force jump into the future, skipping all the video in between.
@@ -177,12 +200,13 @@ class LatencyCompensator {
latency > maxLatencyThreshold + MAX_JUMP_LATENCY
) {
const jumpAmount = latency / 1000 - segment.duration * 3;
console.log('jump amount', jumpAmount);
const seekPosition = this.player.currentTime() + jumpAmount;
console.log(
'latency',
latency / 1000,
'jumping to live from ',
'jumping',
jumpAmount,
'to live from ',
this.player.currentTime(),
' to ',
seekPosition
@@ -240,9 +264,9 @@ class LatencyCompensator {
this.enabled,
'running: ',
this.running,
'timeout: ',
this.inTimeout,
'buffers: ',
'skew: ',
this.clockSkewMs,
'rebuffer events: ',
this.bufferingCounter
);
} catch (err) {
@@ -340,10 +364,19 @@ class LatencyCompensator {
handlePlaying() {
clearTimeout(this.bufferingTimer);
if (!this.enabled) {
return;
}
if (!this.shouldJumpToLive()) {
return;
}
// Seek to live immediately on starting playback to handle any long-pause
// scenarios or somebody starting far back from the live edge.
this.jumpingToLiveIgnoreBuffer = true;
this.player.liveTracker.seekToLiveEdge();
this.lastJumpOccurred = new Date();
}
handleEnded() {
@@ -369,6 +402,7 @@ class LatencyCompensator {
this.disable();
return;
}
console.log('timeout due to buffering');
this.timeout();
@@ -402,7 +436,7 @@ function getCurrentlyPlayingSegment(tech) {
var segment;
// Itinerate trough available segments and get first within which snapshot_time is
// Iterate trough available segments and get first within which snapshot_time is
for (var i = 0, l = target_media.segments.length; i < l; i++) {
// Note: segment.end may be undefined or is not properly set
if (snapshot_time < target_media.segments[i].end) {

16
webroot/js/components/player.js
View File

@@ -57,6 +57,8 @@ class OwncastPlayer {
this.hasStartedPlayback = false;
this.latencyCompensatorEnabled = false;
this.clockSkewMs = 0;
// bind all the things because safari
this.startPlayer = this.startPlayer.bind(this);
this.handleReady = this.handleReady.bind(this);
@@ -92,6 +94,18 @@ class OwncastPlayer {
this.vjsPlayer.ready(this.handleReady);
}
setClockSkew(skewMs) {
this.clockSkewMs = skewMs;
if (this.playbackMetrics) {
this.playbackMetrics.setClockSkew(skewMs);
}
if (this.latencyCompensator) {
this.latencyCompensator.setClockSkew(skewMs);
}
}
setupPlayerCallbacks(callbacks) {
const { onReady, onPlaying, onEnded, onError } = callbacks;
@@ -116,6 +130,7 @@ class OwncastPlayer {
setupPlaybackMetrics() {
this.playbackMetrics = new PlaybackMetrics(this.vjsPlayer, videojs);
this.playbackMetrics.setClockSkew(this.clockSkewMs);
}
setupLatencyCompensator() {
@@ -139,6 +154,7 @@ class OwncastPlayer {
startLatencyCompensator() {
this.latencyCompensator = new LatencyCompensator(this.vjsPlayer);
this.playbackMetrics.setClockSkew(this.clockSkewMs);
this.latencyCompensator.enable();
this.latencyCompensatorEnabled = true;
this.setLatencyCompensatorItemTitle('disable minimized latency');

23
webroot/js/metrics/playback.js
View File

@@ -7,6 +7,7 @@ class PlaybackMetrics {
this.player = player;
this.supportsDetailedMetrics = false;
this.hasPerformedInitialVariantChange = false;
this.clockSkewMs = 0;
this.segmentDownloadTime = [];
this.bandwidthTracking = [];
@@ -59,6 +60,12 @@ class PlaybackMetrics {
}, METRICS_SEND_INTERVAL);
}
// Keep our client clock in sync with the server clock to determine
// accurate latency calculations.
setClockSkew(skewMs) {
this.clockSkewMs = skewMs;
}
videoJSReady() {
const tech = this.player.tech({ IWillNotUseThisInPlugins: true });
this.supportsDetailedMetrics = !!tech;
@@ -173,7 +180,7 @@ class PlaybackMetrics {
}
const segmentTime = segment.dateTimeObject.getTime();
const now = new Date().getTime();
const now = new Date().getTime() + this.clockSkewMs;
const latency = now - segmentTime;
// Throw away values that seem invalid.
@@ -237,7 +244,7 @@ class PlaybackMetrics {
};
try {
fetch(URL_PLAYBACK_METRICS, options);
await fetch(URL_PLAYBACK_METRICS, options);
} catch (e) {
console.error(e);
}
@@ -249,11 +256,9 @@ export default PlaybackMetrics;
function getCurrentlyPlayingSegment(tech, old_segment = null) {
var target_media = tech.vhs.playlists.media();
var snapshot_time = tech.currentTime();
var segment;
var segment_time;
// Itinerate trough available segments and get first within which snapshot_time is
// Iterate trough available segments and get first within which snapshot_time is
for (var i = 0, l = target_media.segments.length; i < l; i++) {
// Note: segment.end may be undefined or is not properly set
if (snapshot_time < target_media.segments[i].end) {
@@ -263,13 +268,7 @@ function getCurrentlyPlayingSegment(tech, old_segment = null) {
}
// Null segment_time in case it's lower then 0.
if (segment) {
segment_time = Math.max(
0,
snapshot_time - (segment.end - segment.duration)
);
// Because early segments don't have end property
} else {
if (!segment) {
segment = target_media.segments[0];
segment_time = 0;
}