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/Public/Play.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M54 35.9999L27.0001 53.9999L27.0001 18L54 35.9999Z" fill="white" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 241 B

WebServers/SignallingWebServer/Public/playbutton.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="53" cy="53" r="53" fill="#454545"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 155 B

WebServers/SignallingWebServer/Public/player.css
+208 -122
View File
@@ -1,20 +1,20 @@
/*Copyright Epic Games, Inc. All Rights Reserved.*/
:root {
/*Using colour scheme https://color.adobe.com/TD-Colors---Option-3-color-theme-10394433/*/
--colour1:#000000;
--colour2:#FFFFFF;
--colour3:#0585fe;
--colour4:#35b350;
--colour5:#ffab00;
--colour6:#1e1d22;
--colour7:#3c3b40;
--colour1: #000000;
--colour2: #FFFFFF;
--colour3: #0585fe;
--colour4: #35b350;
--colour5: #ffab00;
--colour6: #1e1d22;
--colour7: #3c3b40;
}
body{
margin: 0px;
background-color: black;
body {
margin: 0px;
background-color: black;
font-family: 'Montserrat', sans-serif;
}
}
#playerUI {
width: 100%;
@@ -22,8 +22,8 @@ body{
}
canvas {
image-rendering: crisp-edges;
position: absolute;
image-rendering: crisp-edges;
position: absolute;
}
video {
@@ -32,14 +32,14 @@ video {
height: 100%;
}
#player{
#player {
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
}
#videoPlayOverlay{
#videoPlayOverlay {
position: absolute;
font-size: 1.8em;
width: 100%;
@@ -48,7 +48,7 @@ video {
}
/* State for element to be clickable */
.clickableState{
.clickableState {
align-items: center;
justify-content: center;
display: flex;
@@ -56,7 +56,7 @@ video {
}
/* State for element to show text, this is for informational use*/
.textDisplayState{
.textDisplayState {
align-items: center;
justify-content: center;
display: flex;
@@ -64,17 +64,68 @@ video {
}
/* State to hide overlay, WebRTC communication is in progress and or is playing */
.hiddenState{
.hiddenState {
display: none;
}
#playButton{
display: inline-block;
height: auto;
#playButton {
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 30;
background: #262626;
width: 494px;
height: 282px;
border: 1px solid #404040;
border-radius: 32px;
align-items: center;
justify-content: center;
}
img#playButton{
.caption {
font-style: normal;
font-weight: 400;
font-size: 22px;
line-height: 130%;
/* identical to box height, or 29px */
text-align: center;
/* Landing/White */
margin: 0;
color: #EBEBEB;
}
.caption1 {
margin: 0;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 130%;
/* or 18px */
text-align: center;
/* Landing/LightGray */
color: #888888;
}
.play-btn {
margin-top: 17px;
background: #454545;
border-radius: 50%;
outline: none;
border: none;
cursor: pointer;
width: 106px;
height: 106px;
}
img#playButton {
max-width: 241px;
width: 10%;
}
@@ -117,14 +168,14 @@ img#playButton{
border: 3px solid var(--colour3);
transition: 0.25s ease;
padding-left: 0.55rem;
padding-top: 0.55rem;
padding-top: 0.55rem;
}
#overlay button:active {
border: 3px solid var(--colour3);
background-color: var(--colour7);
padding-left: 0.55rem;
padding-top: 0.55rem;
padding-top: 0.55rem;
}
#overlay img {
@@ -146,7 +197,7 @@ img#playButton{
position: absolute;
top: 0;
transform: translateY(25%);
left: 125%;
left: 125%;
z-index: 20;
}
@@ -158,19 +209,19 @@ img#playButton{
#connection .tooltiptext {
top: 125%;
transform: translateX(-25%);
left: 0;
left: 0;
z-index: 20;
padding: 5px 10px;
}
#settings-panel .tooltiptext {
display: block;
top: 125%;
transform: translateX(-50%);
left: 0;
z-index: 20;
padding: 5px 10px;
border: 3px solid var(--colour5);
top: 125%;
transform: translateX(-50%);
left: 0;
z-index: 20;
padding: 5px 10px;
border: 3px solid var(--colour5);
width: max-content;
}
@@ -183,7 +234,7 @@ img#playButton{
display: block;
}
#controls > * {
#controls>* {
margin-bottom: 0.5rem;
border-radius: 50%;
display: block;
@@ -222,12 +273,18 @@ img#playButton{
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
@@ -261,10 +318,10 @@ img#playButton{
#heading {
display: inline-block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
position: relative;
padding: 0 0 0 2rem;
}
@@ -281,7 +338,8 @@ img#playButton{
#close:after {
padding-left: 0.5rem;
display: inline-block;
content: "\00d7"; /* This will render the 'X' */
content: "\00d7";
/* This will render the 'X' */
}
#close:hover {
@@ -301,7 +359,7 @@ img#playButton{
margin: 0.5rem 0;
}
.settings-text{
.settings-text {
margin-right: 2rem;
display: flex;
}
@@ -310,24 +368,44 @@ img#playButton{
.tgl-switch {
vertical-align: middle;
display: inline-block;
}
.tgl-switch .tgl {
display:none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-slider {
}
.tgl-switch .tgl {
display: none;
}
.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl+.tgl-slider {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-slider::-moz-selection {
box-sizing: border-box;
}
.tgl::-moz-selection,
.tgl:after::-moz-selection,
.tgl:before::-moz-selection,
.tgl *::-moz-selection,
.tgl *:after::-moz-selection,
.tgl *:before::-moz-selection,
.tgl+.tgl-slider::-moz-selection {
background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-slider::selection {
}
.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl+.tgl-slider::selection {
background: none;
}
.tgl + .tgl-slider {
}
.tgl+.tgl-slider {
outline: 0;
display: block;
width: 40px;
@@ -335,50 +413,53 @@ img#playButton{
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tgl + .tgl-slider:after, .tgl + .tgl-slider:before {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tgl+.tgl-slider:after,
.tgl+.tgl-slider:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
.tgl + .tgl-slider:after {
}
.tgl+.tgl-slider:after {
left: 0;
}
.tgl + .tgl-slider:before {
}
.tgl+.tgl-slider:before {
display: none;
}
.tgl-flat + .tgl-slider {
}
.tgl-flat+.tgl-slider {
padding: 2px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
background: var(--colour6);
border: 3px solid var(--colour7);
border-radius: 2em;
}
.tgl-flat + .tgl-slider:after {
}
.tgl-flat+.tgl-slider:after {
-webkit-transition: all .2s ease;
transition: all .2s ease;
background: var(--colour7);
content: "";
border-radius: 1em;
}
.tgl-flat:checked + .tgl-slider {
}
.tgl-flat:checked+.tgl-slider {
border: 3px solid var(--colour3);
}
.tgl-flat:checked + .tgl-slider:after {
}
.tgl-flat:checked+.tgl-slider:after {
left: 50%;
background: var(--colour3);
}
}
.subtitle-text {
margin: 0 0 0 1rem;
@@ -411,7 +492,8 @@ img#playButton{
#hiddenInput {
position: absolute;
left: -10%; /* Although invisible, push off-screen to prevent user interaction. */
left: -10%;
/* Although invisible, push off-screen to prevent user interaction. */
width: 0px;
opacity: 0;
}
@@ -428,47 +510,50 @@ img#playButton{
}
input {
text-align: right;
text-align: right;
}
.warning {
box-sizing: border-box;
position: relative;
transform: scale(var(--ggs,1));
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 40px;
box-sizing: border-box;
position: relative;
transform: scale(var(--ggs, 1));
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 40px;
display: none;
}
.warning::after,
.warning::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
border-radius: 3px;
width: 2px;
background: currentColor;
left: 7px
content: "";
display: block;
box-sizing: border-box;
position: absolute;
border-radius: 3px;
width: 2px;
background: currentColor;
left: 7px
}
.warning::after {
top: 2px;
height: 8px
top: 2px;
height: 8px
}
.warning::before {
height: 2px;
bottom: 2px
height: 2px;
bottom: 2px
}
/* Flat buttons */
input[type="button"] {
background-color: transparent;
color: var(--colour2);
font-family: 'Montserrat';
border: 3px solid var(--colour3);
border-radius: 1rem;
font-size: 0.75rem;
color: var(--colour2);
font-family: 'Montserrat';
border: 3px solid var(--colour3);
border-radius: 1rem;
font-size: 0.75rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
@@ -477,6 +562,7 @@ input[type="button"]:hover {
background-color: var(--colour3);
transition: ease 0.3s;
}
input[type="button"]:active {
background-color: transparent;
}
@@ -489,11 +575,11 @@ input[type="button"]:active {
select,
input[type="number"] {
background-color: var(--colour7);
color: var(--colour2);
border: 1px solid var(--colour6);
padding: 0.25rem;
font-family: 'Montserrat';
border-radius: 0.25rem;
color: var(--colour2);
border: 1px solid var(--colour6);
padding: 0.25rem;
font-family: 'Montserrat';
border-radius: 0.25rem;
}
input[type=number]::-webkit-inner-spin-button {
@@ -543,17 +629,17 @@ object {
#afkOverlay {
z-index: 999;
background-color: rgba(30, 29, 34, 0.5);
display: inline-block;
height: 100vh;
width: 100vw;
line-height: 100vh;
text-align: center;
background-color: rgba(30, 29, 34, 0.5);
display: inline-block;
height: 100vh;
width: 100vw;
line-height: 100vh;
text-align: center;
overflow: hidden;
}
#afkOverlay center {
display: inline-block;
line-height: 1.5;
height: 100vh;
line-height: 1.5;
height: 100vh;
}
WebServers/SignallingWebServer/Public/player.html
+1 -1
View File
@@ -9,7 +9,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="player.css">
<script type="text/javascript">
// This horrible hack is to make Fippo's adapter-latest.js work with Firefox when not on https
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);
}