From bc871f8a4e76ff1fccb5a39614f2dd7b6567aab6 Mon Sep 17 00:00:00 2001 From: Epicminer256 Date: Tue, 12 Dec 2023 13:51:02 -0600 Subject: [PATCH] Added files --- index.html | 12 +++ index.js | 271 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 99 +++++++++++++++++++ 3 files changed, 382 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..8c19abb --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + Capture Card Viewer + + + + +

Waiting for javascript...

+ + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..1e5f97f --- /dev/null +++ b/index.js @@ -0,0 +1,271 @@ +// Remove loading screen +document.getElementById('waitjs').remove() + +var timer +var clicks = 0; +var DCtimeout = 250; +var lastGroupSel; +var mediaDevices = navigator.mediaDevices; +var videoDeviceID = false; +var audioDeviceID = false; +var currentwidth=1280; +var currentheight=720 +var currentfps=60; + +var settingbar = document.createElement('div'); +var hoverbar = document.createElement('div'); +var devices = document.createElement('div'); +var buttons = document.createElement('div'); +var video = document.createElement('video'); +video.muted = true; +var videobottom = document.createElement('div'); +var wInEl = document.createElement('input'); +var hInEl = document.createElement('input'); +var fpsInEl = document.createElement('input'); + +settingbar.id = "settingbar"; +hoverbar.id = "hoverbar"; +devices.id = "devices"; +buttons.id = "buttons"; +video.id = "video"; +videobottom.id = "videobottom"; +wInEl.id = "wInEl"; +hInEl.id = "hInEl"; +fpsInEl.id = "fpsInEl"; + +document.body.appendChild(hoverbar); +document.body.appendChild(settingbar); +document.body.appendChild(video) +settingbar.appendChild(devices); +settingbar.appendChild(buttons); +settingbar.appendChild(videobottom); +videobottom.innerHTML = ` +Width:Height:FPS: +` +document.getElementById('wInEl').value = currentwidth; +document.getElementById('hInEl').value = currentheight; +document.getElementById('fpsInEl').value = currentfps; + +// Input handlers +var singleClick = function(e) { + if (document.pointerLockElement === document.body) { + document.exitPointerLock() + }else{ + document.body.requestPointerLock() + } +} +var doubleClick = function(e) { + if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { + if (document.documentElement.requestFullscreen) { + document.documentElement.requestFullscreen(); + } else if (document.documentElement.mozRequestFullScreen) { + document.documentElement.mozRequestFullScreen(); + } else if (document.documentElement.webkitRequestFullscreen) { + document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); + } + } else { + if (document.cancelFullScreen) { + document.cancelFullScreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitCancelFullScreen) { + document.webkitCancelFullScreen(); + } + } +} + +// click timer +document.body.addEventListener('mousedown', function(e) { + if(e.srcElement == video || document.pointerLockElement === document.body){ + clearTimeout(timer); + clicks++; + var evt = e; + timer = setTimeout(function() { + if(clicks==1) singleClick(evt); + if(clicks==2) doubleClick(evt); + clicks = 0; + }, DCtimeout); + } +}); + +function openHelp(){ + alert(`Keybinds: + ? or / : Show Help page + + f : Fullscreen (or double click video) + l : Lock/Hide mouse cursor (or single click video) + m : Mutes and unmutes + + c : change devices + w : Set width + h : Set height + s : Set FPS + `) +} +window.addEventListener('keydown', function (e) { + if(e.key == "f"){ + document.body.requestFullscreen(); + } + if(e.key == "l"){ + document.body.requestPointerLock(); + } + if(e.key == "c"){ + getDevices() + let arr = [] + let finalstring = "" + for(let devi in d){ + arr.push(d[devi]) + } + for(let devi in arr){ + finalstring += devi+": "+arr[devi].label+"\n"; + } + a = arr[prompt("What device do you want to use?\n"+finalstring)] + console.log(a) + if(typeof a['video'] == 'string'){ + videoDeviceID = a['video'] + } + if(typeof a['audio'] == 'string'){ + audioDeviceID = a['audio'] + } + updateVideo() + } + + if(e.key == "w"){ + currentwidth = prompt("What width do you want to set?", currentwidth); + } + if(e.key == "h"){ + currentheight = prompt("What height do you want to set?", currentheight); + } + if(e.key == "s"){ + currentfps = prompt("What FPS do you want to set?", currentfps); + } + if(e.key == "m"){ + toggleMute(); + } + if(e.key == "p"){ + video.requestPictureInPicture(); + } + if(e.key == "?" || e.key == "/"){ + openHelp(); + } +}, false); +function toggleMute(){ + video.muted = !video.muted + if(video.muted == true){ + document.getElementById('mute').textContent = "Unmute (m)" + }else{ + document.getElementById('mute').textContent = "Mute (m)" + } +} +document.getElementById('wInEl').onchange = (object) => { + currentwidth = object.srcElement.value + updateVideo() +} +document.getElementById('hInEl').onchange = (object) => { + currentheight = object.srcElement.value + updateVideo() +} +document.getElementById('fpsInEl').onchange = (object) => { + currentfps = object.srcElement.value + updateVideo() +} +function changeDeviceHandler(element){ + if(element.srcElement.getAttribute('videoDevice') == null){}else{ + videoDeviceID = element.srcElement.getAttribute('videoDevice') + } + if(element.srcElement.getAttribute('audioDevice') == null){}else{ + audioDeviceID = element.srcElement.getAttribute('audioDevice') + } + updateVideo() +} +function updateVideo(){ + constraints = { + video: { + width: currentwidth, + height: currentheight, + frameRate: currentfps + }, + audio: { + echoCancellation: false, + autoGainControl: false, + noiseSuppression: false, + } + } + if(typeof videoDeviceID == "string"){ + constraints.video.deviceId = videoDeviceID + } + if(typeof audioDeviceID == "string"){ + constraints.audio.deviceId = audioDeviceID + } + mediaDevices.getUserMedia(constraints).then((stream) => { + video.srcObject = stream; + video.addEventListener("loadedmetadata", () => { + video.play(); + }); + }).catch(alert); + +} +function getDevices(){ + mediaDevices.enumerateDevices().then((mediaDevices) => { + devices.innerHTML = ` + + + + +
`; + d = {} + mediaDevices.forEach(mediaDevice => { + if(mediaDevice.label == ""){ + label = "Null/Default" + }else{ + label = mediaDevice.label + } + if(mediaDevice.kind == 'videoinput') { + if(typeof devices[mediaDevice.groupId] == "undefined"){ + d[mediaDevice.groupId] = { + "label": label + } + } + d[mediaDevice.groupId]["video"] = mediaDevice.deviceId + } + if(mediaDevice.kind == 'audioinput') { + if(typeof devices[mediaDevice.groupId] == "undefined"){ + d[mediaDevice.groupId] = { + "label": label + } + } + d[mediaDevice.groupId]["audio"] = mediaDevice.deviceId + } + }); + for(e in d){ + if(typeof d[e]["video"] == "string" || typeof d[e]["audio"] == "string"){ + a = document.createElement('button'); + iconhtml = "" + if(typeof d[e]["video"] == "string" && typeof d[e]["audio"] == "string"){ + a.id = "vaButton"; + iconhtml = iconhtml + `` + a.setAttribute('videoDevice', d[e]["video"]) + a.setAttribute('audioDevice', d[e]["audio"]) + }else{ + if(typeof d[e]["video"] == "string"){ + a.id = "videoButton"; + iconhtml = iconhtml + `` + a.setAttribute('videoDevice', d[e]["video"]) + } + if(typeof d[e]["audio"] == "string"){ + a.id = "audioButton"; + iconhtml = iconhtml + `` + a.setAttribute('audioDevice', d[e]["audio"]) + } + a.innerHTML = iconhtml + d[e]["label"]; + a.onclick = changeDeviceHandler + devices.appendChild(a); + } + } + } + }); +} + +// Starts the video +getDevices() +updateVideo() diff --git a/style.css b/style.css new file mode 100644 index 0000000..b846b70 --- /dev/null +++ b/style.css @@ -0,0 +1,99 @@ +html, body{ + background-color: black; + color: white; + font-family: Arial, Helvetica, sans-serif; +} +@keyframes pulse{ + from {color: white;} + to {color: rgb(70, 70, 70);} +} +.centerscreen{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.pulse{ + animation-name: pulse; + animation-duration: .75s; + animation-iteration-count: infinite; + animation-direction: alternate; +} +#hoverbar{ + position: absolute; + top:0; + left:0; + width: 20%; + height: 100%; + z-index: 9; +} +#settingbar{ + transition: left 1s; + background-color: rgba(100, 100, 100, 0.5); + position: absolute; + top:0; + left:-40%; + width: 30%; + height: 100%; + z-index: 10; +} +#hoverbar:hover~#settingbar { + left:0; +} +#settingbar:hover { + left:0; +} +#video{ + position: absolute; + top:0; + left:0; + width: 100%; + height: 100%; + z-index: 8; +} +#videobottom{ + position: absolute; + left: 0; + bottom: 0; + width: 100% +} +#devices{ + overflow-y: auto; + height: 100%; + overflow-x: hidden; +} +#devices svg { + margin-right: 5px; +} +#devices > *{ + cursor: pointer; + font-size: 18px; + margin-right: 2px; + color:white; + background-color: rgba(100, 100, 100, 0.75); + border: 1px solid rgba(100, 100, 100, 0.75); + width: 100%; + text-align: left; +} +#audioButton{ + background-color: rgba(150, 100, 100, 0.75); + border: 1px solid rgba(150, 100, 100, 0.75); +} +#videoButton{ + background-color: rgba(100, 100, 150, 0.75); + border: 1px solid rgba(100, 100, 150, 0.75); +} +#vaButton{ + background-color: rgba(150, 100, 150, 0.75); + border: 1px solid rgba(150, 100, 150, 0.75); +} +#videobottom{ + display: flex; +} +#videobottom > *{ + width: 1px; + flex: 1; + background-color: rgba(100, 100, 100, 0.75); + border: 1px solid rgba(100, 100, 100, 0.95); + color:white; +}