GraffTech/pixel-streaming-webrtc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updated ui 2

Browse Source
This commit is contained in:
DmitriyB
2023-02-02 15:55:59 +05:00
parent 7016d6c742
commit 9c1561567f
48 changed files with 355 additions and 5804 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebServers/SignallingWebServer/scripts/app.js
+140 -146
View File
@@ -8,7 +8,7 @@ class TwoWayMap {
constructor(map = {}) {
this.map = map;
this.reverseMap = new Map();
for(const key in map) {
for (const key in map) {
const value = map[key];
this.reverseMap[value] = key;
}
@@ -76,7 +76,7 @@ let freezeFrame = {
let file = {
mimetype: "",
extension: "",
receiving: false,
receiving: false,
size: 0,
data: [],
valid: false,
@@ -329,7 +329,7 @@ function registerMessageHandlers() {
registerMessageHandler(MessageDirection.ToStreamer, "StopStreaming", sendMessageToStreamer);
registerMessageHandler(MessageDirection.ToStreamer, "LatencyTest", sendMessageToStreamer);
registerMessageHandler(MessageDirection.ToStreamer, "RequestInitialSettings", sendMessageToStreamer);
registerMessageHandler(MessageDirection.ToStreamer, "TestEcho", () => { /* Do nothing */});
registerMessageHandler(MessageDirection.ToStreamer, "TestEcho", () => { /* Do nothing */ });
registerMessageHandler(MessageDirection.ToStreamer, "UIInteraction", emitUIInteraction);
registerMessageHandler(MessageDirection.ToStreamer, "Command", emitCommand);
registerMessageHandler(MessageDirection.ToStreamer, "KeyDown", sendMessageToStreamer);
@@ -470,7 +470,7 @@ function onProtocolMessage(data) {
}
let direction = protocolJSON.Direction;
delete protocolJSON.Direction;
console.log(`Received new ${ direction == MessageDirection.FromStreamer ? "FromStreamer" : "ToStreamer" } protocol. Updating existing protocol...`);
console.log(`Received new ${direction == MessageDirection.FromStreamer ? "FromStreamer" : "ToStreamer"} protocol. Updating existing protocol...`);
Object.keys(protocolJSON).forEach((messageType) => {
let message = protocolJSON[messageType];
switch (direction) {
@@ -482,7 +482,7 @@ function onProtocolMessage(data) {
// return in a forEach is equivalent to a continue in a normal for loop
return;
}
if(message.byteLength > 0 && !message.hasOwnProperty("structure")) {
if (message.byteLength > 0 && !message.hasOwnProperty("structure")) {
// If we specify a bytelength, will must have a corresponding structure
console.error(`ToStreamer->${messageType} protocol definition was malformed as it specified a byteLength but no accompanying structure`);
// return in a forEach is equivalent to a continue in a normal for loop
@@ -632,72 +632,72 @@ function gamepadDisconnectHandler(e) {
function fullscreen() {
// if already full screen; exit
// else go fullscreen
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
let element;
//HTML elements controls
if(!(document.fullscreenEnabled || document.webkitFullscreenEnabled)) {
// Chrome and FireFox on iOS can only fullscreen a <video>
element = document.getElementById("streamingVideo");
// else go fullscreen
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
// Everywhere else can fullscreen a <div>
element = document.getElementById("playerUI");
let element;
//HTML elements controls
if (!(document.fullscreenEnabled || document.webkitFullscreenEnabled)) {
// Chrome and FireFox on iOS can only fullscreen a <video>
element = document.getElementById("streamingVideo");
} else {
// Everywhere else can fullscreen a <div>
element = document.getElementById("playerUI");
}
if (!element) {
return;
}
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitEnterFullscreen) {
element.webkitEnterFullscreen(); //for iphone this code worked
}
}
if(!element) {
return;
}
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitEnterFullscreen) {
element.webkitEnterFullscreen(); //for iphone this code worked
}
}
onFullscreenChange()
onFullscreenChange()
}
function onFullscreenChange() {
isFullscreen = (document.webkitIsFullScreen
|| document.mozFullScreen
|| (document.msFullscreenElement && document.msFullscreenElement !== null)
|| (document.fullscreenElement && document.fullscreenElement !== null));
isFullscreen = (document.webkitIsFullScreen
|| document.mozFullScreen
|| (document.msFullscreenElement && document.msFullscreenElement !== null)
|| (document.fullscreenElement && document.fullscreenElement !== null));
let minimize = document.getElementById('minimize');
let minimize = document.getElementById('minimize');
let maximize = document.getElementById('maximize');
if(minimize && maximize){
if(isFullscreen) {
if (minimize && maximize) {
if (isFullscreen) {
minimize.style.display = 'inline';
maximize.style.display = 'none';
} else {
minimize.style.display = 'none';
maximize.style.display = 'inline';
}
}
}
}
function parseURLParams() {
let urlParams = new URLSearchParams(window.location.search);
inputOptions.controlScheme = (urlParams.has('hoveringMouse') ? ControlSchemeType.HoveringMouse : ControlSchemeType.LockedMouse);
inputOptions.controlScheme = (urlParams.has('hoveringMouse') ? ControlSchemeType.HoveringMouse : ControlSchemeType.LockedMouse);
let schemeToggle = document.getElementById("control-scheme-text");
switch (inputOptions.controlScheme) {
case ControlSchemeType.HoveringMouse:
@@ -712,12 +712,12 @@ function parseURLParams() {
break;
}
if(urlParams.has('noWatermark')) {
if (urlParams.has('noWatermark')) {
let watermark = document.getElementById("unrealengine");
watermark.style.display = 'none';
}
inputOptions.hideBrowserCursor = (urlParams.has('hideBrowserCursor') ? true : false);
inputOptions.hideBrowserCursor = (urlParams.has('hideBrowserCursor') ? true : false);
}
@@ -754,21 +754,21 @@ function setupHtmlEvents() {
let resizeCheckBox = document.getElementById('enlarge-display-to-fill-window-tgl');
if (resizeCheckBox !== null) {
resizeCheckBox.onchange = function(event) {
resizeCheckBox.onchange = function (event) {
resizePlayerStyle();
};
}
qualityControlOwnershipCheckBox = document.getElementById('quality-control-ownership-tgl');
if (qualityControlOwnershipCheckBox !== null) {
qualityControlOwnershipCheckBox.onchange = function(event) {
qualityControlOwnershipCheckBox.onchange = function (event) {
requestQualityControl();
};
}
let encoderParamsSubmit = document.getElementById('encoder-params-submit');
if (encoderParamsSubmit !== null) {
encoderParamsSubmit.onclick = function(event) {
encoderParamsSubmit.onclick = function (event) {
let minQP = document.getElementById('encoder-min-qp-text').value;
let maxQP = document.getElementById('encoder-max-qp-text').value;
@@ -780,7 +780,7 @@ function setupHtmlEvents() {
let webrtcParamsSubmit = document.getElementById('webrtc-params-submit');
if (webrtcParamsSubmit !== null) {
webrtcParamsSubmit.onclick = function(event) {
webrtcParamsSubmit.onclick = function (event) {
let FPS = document.getElementById('webrtc-fps-text').value;
let minBitrate = document.getElementById('webrtc-min-bitrate-text').value * 1000;
let maxBitrate = document.getElementById('webrtc-max-bitrate-text').value * 1000;
@@ -822,7 +822,7 @@ function setupHtmlEvents() {
let statsCheckBox = document.getElementById('show-stats-tgl');
if (statsCheckBox !== null) {
statsCheckBox.onchange = function(event) {
statsCheckBox.onchange = function (event) {
let stats = document.getElementById('statsContainer');
stats.style.display = event.target.checked ? "block" : "none";
};
@@ -848,7 +848,7 @@ function setupHtmlEvents() {
var streamSelector = document.getElementById('stream-select');
var trackSelector = document.getElementById('track-select');
if (streamSelector) {
streamSelector.onchange = function(event) {
streamSelector.onchange = function (event) {
const stream = webRtcPlayerObj.availableVideoStreams.get(streamSelector.value);
webRtcPlayerObj.video.srcObject = stream;
streamTrackSource = stream;
@@ -857,7 +857,7 @@ function setupHtmlEvents() {
}
if (trackSelector) {
trackSelector.onchange = function(event) {
trackSelector.onchange = function (event) {
if (!streamTrackSource) {
streamTrackSource = webRtcPlayerObj.availableVideoStreams.get(streamSelector.value);
}
@@ -876,9 +876,9 @@ function setupHtmlEvents() {
}
}
function setupToggleWithUrlParams(toggleId, urlParameterKey){
function setupToggleWithUrlParams(toggleId, urlParameterKey) {
let toggleElem = document.getElementById(toggleId);
if(toggleElem) {
if (toggleElem) {
toggleElem.checked = new URLSearchParams(window.location.search).has(urlParameterKey);
toggleElem.addEventListener('change', (event) => {
const urlParams = new URLSearchParams(window.location.search);
@@ -942,7 +942,7 @@ function sendStartLatencyTest() {
return;
}
let onTestStarted = function(StartTimeMs) {
let onTestStarted = function (StartTimeMs) {
let descriptor = {
StartTime: StartTimeMs
};
@@ -988,7 +988,7 @@ function setOverlay(htmlClass, htmlElement, onClickFunction) {
function showConnectOverlay() {
let startText = document.createElement('div');
startText.id = 'playButton';
startText.innerHTML = 'Click to start'.toUpperCase();
startText.innerHTML = '<p class="caption"> Демонстрация запущена <p class="caption1"> Нажмите, чтобы начать </p> <button class="play-btn"><img src="./Play.svg"></img</button>';
setOverlay('clickableState', startText, event => {
connect();
@@ -1004,8 +1004,8 @@ function showTextOverlay(text) {
}
function playStream() {
if(webRtcPlayerObj && webRtcPlayerObj.video) {
if(webRtcPlayerObj.audio.srcObject && autoPlayAudio) {
if (webRtcPlayerObj && webRtcPlayerObj.video) {
if (webRtcPlayerObj.audio.srcObject && autoPlayAudio) {
// Video and Audio are seperate tracks
webRtcPlayerObj.audio.play().then(() => {
// audio play has succeeded, start playing video
@@ -1026,7 +1026,7 @@ function playStream() {
function playVideo() {
webRtcPlayerObj.video.play().catch((onRejectedReason) => {
if(webRtcPlayerObj.audio.srcObject) {
if (webRtcPlayerObj.audio.srcObject) {
webRtcPlayerObj.audio.stop();
}
console.error(onRejectedReason);
@@ -1071,7 +1071,7 @@ function showAfkOverlay() {
document.exitPointerLock();
}
afk.countdownTimer = setInterval(function() {
afk.countdownTimer = setInterval(function () {
afk.countdown--;
if (afk.countdown == 0) {
// The user failed to click so disconnect them.
@@ -1290,7 +1290,7 @@ function setupWebRtcPlayer(htmlElement, config) {
htmlElement.appendChild(webRtcPlayerObj.audio);
htmlElement.appendChild(freezeFrameOverlay);
webRtcPlayerObj.onWebRtcOffer = function(offer) {
webRtcPlayerObj.onWebRtcOffer = function (offer) {
if (ws && ws.readyState === WS_OPEN_STATE) {
let offerStr = JSON.stringify(offer);
console.log("%c[Outbound SS message (offer)]", "background: lightgreen; color: black", offer);
@@ -1298,7 +1298,7 @@ function setupWebRtcPlayer(htmlElement, config) {
}
};
webRtcPlayerObj.onWebRtcCandidate = function(candidate) {
webRtcPlayerObj.onWebRtcCandidate = function (candidate) {
if (ws && ws.readyState === WS_OPEN_STATE) {
ws.send(JSON.stringify({
type: 'iceCandidate',
@@ -1322,7 +1322,7 @@ function setupWebRtcPlayer(htmlElement, config) {
}
};
webRtcPlayerObj.onSFURecvDataChannelReady = function() {
webRtcPlayerObj.onSFURecvDataChannelReady = function () {
if (webRtcPlayerObj.sfu) {
// Send SFU a message to let it know browser data channels are ready
const requestMsg = { type: "peerDataChannelsReady" };
@@ -1331,7 +1331,7 @@ function setupWebRtcPlayer(htmlElement, config) {
}
}
webRtcPlayerObj.onVideoInitialised = function() {
webRtcPlayerObj.onVideoInitialised = function () {
if (ws && ws.readyState === WS_OPEN_STATE) {
if (shouldShowPlayOverlay) {
showPlayOverlay();
@@ -1351,7 +1351,7 @@ function setupWebRtcPlayer(htmlElement, config) {
updateStreamList();
}
webRtcPlayerObj.onDataChannelMessage = function(data) {
webRtcPlayerObj.onDataChannelMessage = function (data) {
let view = new Uint8Array(data);
try {
let messageType = fromStreamerMessages.getFromValue(view[0]);
@@ -1375,8 +1375,8 @@ function setupWebRtcPlayer(htmlElement, config) {
return webRtcPlayerObj.video;
}
function setupStats(){
webRtcPlayerObj.aggregateStats(1 * 1000 /*Check every 1 second*/ );
function setupStats() {
webRtcPlayerObj.aggregateStats(1 * 1000 /*Check every 1 second*/);
let printInterval = 5 * 60 * 1000; /*Print every 5 minutes*/
let nextPrintDuration = printInterval;
@@ -1416,14 +1416,14 @@ function setupStats(){
let qualityStatus = document.getElementById("connectionStrength");
// "blinks" quality status element for 1 sec by making it transparent, speed = number of blinks
let blinkQualityStatus = function(speed) {
let blinkQualityStatus = function (speed) {
let iter = speed;
let opacity = 1; // [0..1]
let tickId = setInterval(
function() {
function () {
opacity -= 0.1;
// map `opacity` to [-0.5..0.5] range, decrement by 0.2 per step and take `abs` to make it blink: 1 -> 0 -> 1
qualityStatus.style.opacity = `${Math.abs((opacity - 0.5) * 2)}`;
qualityStatus.style.opacity = `${Math.abs((opacity - 0.5) * 2)}`;
if (opacity <= 0.1) {
if (--iter == 0) {
clearInterval(tickId);
@@ -1479,10 +1479,9 @@ function setupStats(){
statsText += `<div>Duration: ${timeFormat.format(runTimeHours)}:${timeFormat.format(runTimeMinutes)}:${timeFormat.format(runTimeSeconds)}</div>`;
statsText += `<div>Controls stream input: ${inputController === null ? "Not sent yet" : (inputController ? "true" : "false")}</div>`;
statsText += `<div>Audio codec: ${aggregatedStats.hasOwnProperty('audioCodec') ? aggregatedStats.audioCodec : "Not set" }</div>`;
statsText += `<div>Video codec: ${aggregatedStats.hasOwnProperty('videoCodec') ? aggregatedStats.videoCodec : "Not set" }</div>`;
statsText += `<div>Video Resolution: ${
aggregatedStats.hasOwnProperty('frameWidth') && aggregatedStats.frameWidth && aggregatedStats.hasOwnProperty('frameHeight') && aggregatedStats.frameHeight ?
statsText += `<div>Audio codec: ${aggregatedStats.hasOwnProperty('audioCodec') ? aggregatedStats.audioCodec : "Not set"}</div>`;
statsText += `<div>Video codec: ${aggregatedStats.hasOwnProperty('videoCodec') ? aggregatedStats.videoCodec : "Not set"}</div>`;
statsText += `<div>Video Resolution: ${aggregatedStats.hasOwnProperty('frameWidth') && aggregatedStats.frameWidth && aggregatedStats.hasOwnProperty('frameHeight') && aggregatedStats.frameHeight ?
aggregatedStats.frameWidth + 'x' + aggregatedStats.frameHeight : 'Chrome only'
}</div>`;
statsText += `<div>Received (${receivedBytesMeasurement}): ${numberFormat.format(receivedBytes)}</div>`;
@@ -1515,7 +1514,7 @@ function setupStats(){
}
};
webRtcPlayerObj.latencyTestTimings.OnAllLatencyTimingsReady = function(timings) {
webRtcPlayerObj.latencyTestTimings.OnAllLatencyTimingsReady = function (timings) {
if (!timings.BrowserReceiptTimeMs) {
return;
@@ -1563,7 +1562,7 @@ function onWebRtcSFUPeerDatachannels(webRTCData) {
}
function onWebRtcIce(iceCandidate) {
if (webRtcPlayerObj){
if (webRtcPlayerObj) {
webRtcPlayerObj.handleCandidateFromServer(iceCandidate);
}
}
@@ -1689,7 +1688,7 @@ function invalidateFreezeFrameOverlay() {
freezeFrame.valid = false;
freezeFrameOverlay.classList.remove("freezeframeBackground");
}, freezeFrameDelay);
if (webRtcPlayerObj) {
webRtcPlayerObj.setVideoEnabled(true);
}
@@ -1796,7 +1795,7 @@ function updateVideoStreamSize() {
return;
let descriptor = {
"Resolution.Width": playerElement.clientWidth,
"Resolution.Width": playerElement.clientWidth,
"Resolution.Height": playerElement.clientHeight
};
emitCommand(descriptor);
@@ -1815,14 +1814,14 @@ let _orientationChangeTimeout;
function onOrientationChange(event) {
clearTimeout(_orientationChangeTimeout);
_orientationChangeTimeout = setTimeout(function() {
_orientationChangeTimeout = setTimeout(function () {
resizePlayerStyle();
}, 500);
}
function sendMessageToStreamer(messageType, indata = []) {
messageFormat = toStreamerMessages.getFromKey(messageType);
if(messageFormat === undefined) {
if (messageFormat === undefined) {
console.error(`Attempted to send a message to the streamer with message type: ${messageType}, but the frontend hasn't been configured to send such a message. Check you've added the message type in your cpp`);
return;
}
@@ -1864,7 +1863,7 @@ function emitDescriptor(messageType, descriptor) {
// Convert the descriptor object into a JSON string.
let descriptorAsString = JSON.stringify(descriptor);
let messageFormat = toStreamerMessages.getFromKey(messageType);
if(messageFormat === undefined) {
if (messageFormat === undefined) {
console.error(`Attempted to emit descriptor with message type: ${messageType}, but the frontend hasn't been configured to send such a message. Check you've added the message type in your cpp`);
}
// Add the UTF-16 JSON string to the array byte buffer, going two bytes at
@@ -2102,7 +2101,7 @@ function createOnScreenKeyboardHelpers(htmlElement) {
// Hide the 'edit text' button.
editTextButton.classList.add('hiddenState');
editTextButton.addEventListener('click', function() {
editTextButton.addEventListener('click', function () {
// Show the on-screen keyboard.
hiddenInput.focus();
});
@@ -2126,7 +2125,7 @@ function showOnScreenKeyboard(command) {
}
function registerMouseEnterAndLeaveEvents(playerElement) {
playerElement.onmouseenter = function(e) {
playerElement.onmouseenter = function (e) {
if (print_inputs) {
console.log('mouse enter');
}
@@ -2134,7 +2133,7 @@ function registerMouseEnterAndLeaveEvents(playerElement) {
playerElement.pressMouseButtons(e);
};
playerElement.onmouseleave = function(e) {
playerElement.onmouseleave = function (e) {
if (print_inputs) {
console.log('mouse leave');
}
@@ -2155,7 +2154,7 @@ function registerLockedMouseEvents(playerElement) {
playerElement.requestPointerLock = playerElement.requestPointerLock || playerElement.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
playerElement.onclick = function() {
playerElement.onclick = function () {
playerElement.requestPointerLock();
};
@@ -2221,11 +2220,11 @@ function registerLockedMouseEvents(playerElement) {
toStreamerHandlers.MouseDown("MouseDouble", [e.button, coord.x, coord.y]);
};
playerElement.pressMouseButtons = function(e) {
playerElement.pressMouseButtons = function (e) {
pressMouseButtons(e.buttons, x, y);
};
playerElement.releaseMouseButtons = function(e) {
playerElement.releaseMouseButtons = function (e) {
releaseMouseButtons(e.buttons, x, y);
};
}
@@ -2277,11 +2276,11 @@ function registerHoveringMouseEvents(playerElement) {
toStreamerHandlers.MouseDown("MouseDouble", [e.button, coord.x, coord.y]);
};
playerElement.pressMouseButtons = function(e) {
playerElement.pressMouseButtons = function (e) {
pressMouseButtons(e.buttons, e.offsetX, e.offsetY);
};
playerElement.releaseMouseButtons = function(e) {
playerElement.releaseMouseButtons = function (e) {
releaseMouseButtons(e.buttons, e.offsetX, e.offsetY);
};
}
@@ -2303,7 +2302,7 @@ function registerTouchEvents(playerElement) {
function forgetTouch(touch) {
fingers.push(fingerIds[touch.identifier]);
// Sort array back into descending order. This means if finger '1' were to lift after finger '0', we would ensure that 0 will be the first index to pop
fingers.sort(function(a, b){return b - a});
fingers.sort(function (a, b) { return b - a });
delete fingerIds[touch.identifier];
}
@@ -2317,8 +2316,8 @@ function registerTouchEvents(playerElement) {
console.log(`F${fingerIds[touch.identifier]}=(${x}, ${y})`);
}
let coord = normalizeAndQuantizeUnsigned(x, y);
switch(type) {
switch (type) {
case "TouchStart":
toStreamerHandlers.TouchStart("TouchStart", [numTouches, coord.x, coord.y, fingerIds[touch.identifier], MaxByteValue * touch.force, coord.inRange ? 1 : 0]);
break;
@@ -2336,7 +2335,7 @@ function registerTouchEvents(playerElement) {
let finger = undefined;
playerElement.ontouchstart = function(e) {
playerElement.ontouchstart = function (e) {
if (finger === undefined) {
let firstTouch = e.changedTouches[0];
finger = {
@@ -2354,7 +2353,7 @@ function registerTouchEvents(playerElement) {
e.preventDefault();
};
playerElement.ontouchend = function(e) {
playerElement.ontouchend = function (e) {
for (let t = 0; t < e.changedTouches.length; t++) {
let touch = e.changedTouches[t];
if (touch.identifier === finger.id) {
@@ -2371,7 +2370,7 @@ function registerTouchEvents(playerElement) {
e.preventDefault();
};
playerElement.ontouchmove = function(e) {
playerElement.ontouchmove = function (e) {
for (let t = 0; t < e.touches.length; t++) {
let touch = e.touches[t];
if (touch.identifier === finger.id) {
@@ -2388,7 +2387,7 @@ function registerTouchEvents(playerElement) {
e.preventDefault();
};
} else {
playerElement.ontouchstart = function(e) {
playerElement.ontouchstart = function (e) {
// Assign a unique identifier to each touch.
for (let t = 0; t < e.changedTouches.length; t++) {
rememberTouch(e.changedTouches[t]);
@@ -2401,7 +2400,7 @@ function registerTouchEvents(playerElement) {
e.preventDefault();
};
playerElement.ontouchend = function(e) {
playerElement.ontouchend = function (e) {
if (print_inputs) {
console.log('touch end');
}
@@ -2414,7 +2413,7 @@ function registerTouchEvents(playerElement) {
e.preventDefault();
};
playerElement.ontouchmove = function(e) {
playerElement.ontouchmove = function (e) {
if (print_inputs) {
console.log('touch move');
}
@@ -2556,9 +2555,9 @@ function getKeyCode(e) {
// If we don't have keyCode property because browser API is deprecated then use KeyboardEvent.code instead.
// See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#constants_for_keycode_value
if(!("keyCode" in e)) {
if (!("keyCode" in e)) {
// Convert KeyboardEvent.code string into integer-based key code for backwards compatibility reasons.
if(e.code in CodeToKeyCode) {
if (e.code in CodeToKeyCode) {
return CodeToKeyCode[e.code];
} else {
console.warn(`Keyboard code of ${e.code} is not supported in our mapping, ignoring this key.`);
@@ -2577,10 +2576,10 @@ function getKeyCode(e) {
function registerKeyboardEvents() {
document.onkeydown = function(e) {
document.onkeydown = function (e) {
const keyCode = getKeyCode(e);
if(!keyCode) { return; }
if (!keyCode) { return; }
if (print_inputs) {
console.log(`key down ${keyCode}, repeat = ${e.repeat}`);
@@ -2602,10 +2601,10 @@ function registerKeyboardEvents() {
};
document.onkeyup = function(e) {
document.onkeyup = function (e) {
const keyCode = getKeyCode(e);
if(!keyCode) { return; }
if (!keyCode) { return; }
if (print_inputs) {
console.log(`key up ${keyCode}`);
@@ -2618,8 +2617,8 @@ function registerKeyboardEvents() {
}
};
document.onkeypress = function(e){
if(!("charCode" in e)){
document.onkeypress = function (e) {
if (!("charCode" in e)) {
console.warn("KeyboardEvent.charCode is deprecated in this browser, cannot send key press.");
return;
}
@@ -2632,30 +2631,28 @@ function registerKeyboardEvents() {
};
}
function settingsClicked( /* e */ ) {
function settingsClicked( /* e */) {
/**
* Toggle settings panel. If stats panel is already open, close it and then open settings
*/
let settings = document.getElementById('settings-panel');
let stats = document.getElementById('stats-panel');
if(stats.classList.contains("panel-wrap-visible"))
{
if (stats.classList.contains("panel-wrap-visible")) {
stats.classList.toggle("panel-wrap-visible");
}
settings.classList.toggle("panel-wrap-visible");
}
function statsClicked( /* e */ ) {
function statsClicked( /* e */) {
/**
* Toggle stats panel. If settings panel is already open, close it and then open stats
*/
let settings = document.getElementById('settings-panel');
let stats = document.getElementById('stats-panel');
if(settings.classList.contains("panel-wrap-visible"))
{
if (settings.classList.contains("panel-wrap-visible")) {
settings.classList.toggle("panel-wrap-visible");
}
@@ -2703,21 +2700,21 @@ function connect() {
ws = new WebSocket(connectionUrl);
ws.attemptStreamReconnection = true;
ws.onmessagebinary = function(event) {
if(!event || !event.data) { return; }
ws.onmessagebinary = function (event) {
if (!event || !event.data) { return; }
event.data.text().then(function(messageString){
event.data.text().then(function (messageString) {
// send the new stringified event back into `onmessage`
ws.onmessage({ data: messageString });
}).catch(function(error){
}).catch(function (error) {
console.error(`Failed to parse binary blob from websocket, reason: ${error}`);
});
}
ws.onmessage = function(event) {
ws.onmessage = function (event) {
// Check if websocket message is binary, if so, stringify it.
if(event.data && event.data instanceof Blob) {
if (event.data && event.data instanceof Blob) {
ws.onmessagebinary(event);
return;
}
@@ -2738,7 +2735,7 @@ function connect() {
onWebRtcAnswer(msg);
} else if (msg.type === 'iceCandidate') {
onWebRtcIce(msg.candidate);
} else if(msg.type === 'warning' && msg.warning) {
} else if (msg.type === 'warning' && msg.warning) {
console.warn(msg.warning);
} else if (msg.type === 'peerDataChannels') {
onWebRtcSFUPeerDatachannels(msg);
@@ -2747,27 +2744,25 @@ function connect() {
}
};
ws.onerror = function(event) {
ws.onerror = function (event) {
console.log(`WS error: ${JSON.stringify(event)}`);
};
ws.onclose = function(event) {
ws.onclose = function (event) {
closeStream();
if(ws.attemptStreamReconnection === true){
if (ws.attemptStreamReconnection === true) {
console.log(`WS closed: ${JSON.stringify(event.code)} - ${event.reason}`);
if(event.reason !== "")
{
if (event.reason !== "") {
showTextOverlay(`DISCONNECTED: ${event.reason.toUpperCase()}`);
}
else
{
else {
showTextOverlay(`DISCONNECTED`);
}
let reclickToStart = setTimeout(function(){
let reclickToStart = setTimeout(function () {
start(true)
}, 4000);
}
@@ -2815,7 +2810,7 @@ function clearMouseEvents(playerElement) {
function toggleControlScheme() {
let schemeToggle = document.getElementById("control-scheme-text");
switch (inputOptions.controlScheme) {
case ControlSchemeType.HoveringMouse:
inputOptions.controlScheme = ControlSchemeType.LockedMouse;
@@ -2833,8 +2828,7 @@ function toggleControlScheme() {
}
console.log(`Updating control scheme to: ${inputOptions.controlScheme ? "Hovering Mouse" : "Locked Mouse"}`)
if(webRtcPlayerObj && webRtcPlayerObj.video)
{
if (webRtcPlayerObj && webRtcPlayerObj.video) {
registerMouse(webRtcPlayerObj.video);
}
}
@@ -2847,14 +2841,14 @@ function toggleBrowserCursorVisibility() {
}
function restartStream() {
if(!ws){
if (!ws) {
return;
}
ws.attemptStreamReconnection = false;
let existingOnClose = ws.onclose;
ws.onclose = function(event) {
ws.onclose = function (event) {
existingOnClose(event);
// this is how we restart
connect_on_load = true;
@@ -2870,7 +2864,7 @@ function closeStream() {
if (webRtcPlayerObj) {
// Remove video element from the page.
let playerDiv = document.getElementById('player');
if(playerDiv){
if (playerDiv) {
playerDiv.removeChild(webRtcPlayerObj.video);
}
let outer = document.getElementById("outer");
@@ -2895,6 +2889,6 @@ function load() {
setupFreezeFrameOverlay();
registerKeyboardEvents();
// Example response event listener that logs to console
addResponseEventListener('logListener', (response) => {console.log(`Received response message from streamer: "${response}"`)})
addResponseEventListener('logListener', (response) => { console.log(`Received response message from streamer: "${response}"`) })
start(false);
}