Moved all source files into /src
Created dir /src, and moved the source files into it. Left package.json, README.md and settings.json out. Modified package.json to point to the new src dir.
This commit is contained in:
173
src/client.js
Normal file
173
src/client.js
Normal file
@@ -0,0 +1,173 @@
|
||||
const vid = document.querySelector('video')
|
||||
const socket = new WebSocket(`ws://${window.location.hostname}:${window.location.port}`);
|
||||
// if the new tms is within this margin of the current tms, then the change is ignored for smoother viewing
|
||||
const PLAYING_THRESH = 1
|
||||
const PAUSED_THRESH = 0.01
|
||||
|
||||
// local state
|
||||
let video_playing = false
|
||||
let last_updated = 0
|
||||
let client_uid = null
|
||||
|
||||
// clocks sync variables
|
||||
const num_time_sync_cycles = 10
|
||||
let over_estimates = new Array()
|
||||
let under_estimates = new Array()
|
||||
let over_estimate = 0
|
||||
let under_estimate = 0
|
||||
let correction = 0
|
||||
|
||||
|
||||
// Connection opened
|
||||
socket.addEventListener('open', function (event) {
|
||||
console.log('Connected to WS Server');
|
||||
});
|
||||
|
||||
// Got message from the server
|
||||
socket.addEventListener("message", (event) => {
|
||||
|
||||
if (event.data.startsWith("time_sync_response_backward"))
|
||||
{
|
||||
let time_at_server = Number(event.data.slice("time_sync_response_backward".length + 1));
|
||||
let under_estimate_latest = time_at_server - get_global_time(0);
|
||||
|
||||
under_estimates.push(under_estimate_latest);
|
||||
under_estimate = median(under_estimates);
|
||||
correction = (under_estimate + over_estimate)/2;
|
||||
|
||||
console.log(`%c Updated val for under_estimate is ${under_estimate}`, "color:green");
|
||||
console.log(`%c New correction time is ${correction} miliseconds`, 'color:red; font-size:12px');
|
||||
}
|
||||
if (event.data.startsWith("time_sync_response_forward"))
|
||||
{
|
||||
let calculated_diff = Number(event.data.slice("time_sync_response_forward".length + 1));
|
||||
over_estimates.push(calculated_diff);
|
||||
over_estimate = median(over_estimates);
|
||||
correction = (under_estimate + over_estimate)/2;
|
||||
|
||||
console.log(`%c Updated val for over_estimate is ${over_estimate}`, "color:green");
|
||||
console.log(`%c New correction time is ${correction} miliseconds`, 'color:red; font-size:12px');
|
||||
}
|
||||
if (event.data.startsWith("state_update_from_server"))
|
||||
{
|
||||
let state = JSON.parse(event.data.slice("state_update_from_server".length + 1));
|
||||
|
||||
// Whenever the client connects or reconnects
|
||||
if (client_uid == null){
|
||||
client_uid = state.client_uid;
|
||||
}
|
||||
|
||||
// calculating the new timestamp for both cases - when the video is playing and when it is paused
|
||||
let proposed_time = (state.playing) ? ((get_global_time(correction) - state.global_timestamp)/1000 + state.video_timestamp) : (state.video_timestamp)
|
||||
let gap = Math.abs(proposed_time - vid.currentTime)
|
||||
|
||||
console.log(`%cGap was ${proposed_time - vid.currentTime}`, 'font-size:12px; color:purple')
|
||||
if (state.playing){
|
||||
if(gap > PLAYING_THRESH){
|
||||
// tolerance while the video is playing
|
||||
vid.currentTime = proposed_time
|
||||
}
|
||||
vid.play()
|
||||
}
|
||||
else{
|
||||
vid.pause()
|
||||
if (gap > PAUSED_THRESH){
|
||||
// condition to prevent an unnecessary seek
|
||||
vid.currentTime = proposed_time
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Connection closed
|
||||
socket.addEventListener('close', function (event) {
|
||||
console.log('Disconnected from the WS Server');
|
||||
client_uid = null
|
||||
});
|
||||
|
||||
|
||||
function state_change_handler(event)
|
||||
{
|
||||
if (event !== null && event !== undefined){
|
||||
if (event.type === 'pause')
|
||||
video_playing = false;
|
||||
|
||||
else if (event.type === 'play')
|
||||
video_playing = true;
|
||||
}
|
||||
last_updated = get_global_time(correction);
|
||||
|
||||
state_image = {
|
||||
video_timestamp: vid.currentTime,
|
||||
last_updated: last_updated,
|
||||
playing: video_playing,
|
||||
global_timestamp: get_global_time(correction),
|
||||
client_uid: client_uid
|
||||
}
|
||||
|
||||
socket.send(`state_update_from_client ${JSON.stringify(state_image)}`)
|
||||
}
|
||||
|
||||
// assigning event handlers
|
||||
vid.onseeking = state_change_handler;
|
||||
vid.onplay = state_change_handler;
|
||||
vid.onpause = state_change_handler;
|
||||
|
||||
// handling the video ended case separately
|
||||
vid.onended = () => {
|
||||
video_playing = false;
|
||||
last_updated = get_global_time(correction);
|
||||
vid.load();
|
||||
state_change_handler();
|
||||
}
|
||||
|
||||
|
||||
// Helper Functions
|
||||
function get_global_time(delta = 0) {
|
||||
let d = new Date();
|
||||
return d.getTime() + delta;
|
||||
}
|
||||
|
||||
async function get_settings() {
|
||||
let s = null;
|
||||
await fetch('settings.json')
|
||||
.then((response)=>response.json())
|
||||
.then((responseJson)=>{s = responseJson});
|
||||
return s;
|
||||
}
|
||||
|
||||
function median(values) {
|
||||
if(values.length === 0) { return 0; }
|
||||
|
||||
values.sort((x,y) => (x-y));
|
||||
let half = Math.floor(values.length / 2);
|
||||
if (values.length % 2){
|
||||
return values[half];
|
||||
}
|
||||
return (values[half - 1] + values[half]) / 2.0;
|
||||
}
|
||||
|
||||
function timeout(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
|
||||
function do_time_sync_one_cycle_backward() {
|
||||
socket.send("time_sync_request_backward");
|
||||
}
|
||||
function do_time_sync_one_cycle_forward() {
|
||||
socket.send(`time_sync_request_forward ${get_global_time()}`);
|
||||
}
|
||||
|
||||
|
||||
// time requests are made every second
|
||||
async function do_time_sync() {
|
||||
for(let i = 0; i < num_time_sync_cycles; i++){
|
||||
await timeout(500);
|
||||
do_time_sync_one_cycle_backward();
|
||||
await timeout(500);
|
||||
do_time_sync_one_cycle_forward();
|
||||
}
|
||||
}
|
||||
do_time_sync();
|
||||
Reference in New Issue
Block a user