mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
134 lines
3.7 KiB
HTML
134 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>WebHID Demo</title>
|
|
<style>
|
|
body {
|
|
text-align: center;
|
|
}
|
|
|
|
.button {
|
|
background-color: black;
|
|
border: none;
|
|
color: #00FF00;
|
|
padding: 15px 32px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
font-size: 24px;
|
|
}
|
|
|
|
#connected {
|
|
font-size: 24px;
|
|
max-height:700px;
|
|
overflow-y:scroll
|
|
}
|
|
#disconnectButton {
|
|
font-size: 24px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>STREAMDECK DEMO</h1>
|
|
<img src="../media/streamdeck.png" /><br />
|
|
<input class="button" type="button" id="connectButton" value="Connect" />
|
|
<input class="button" type="button" id="disconnectButton" style="display:none" value="Disconnect" />
|
|
<div id="connected" style>
|
|
</div>
|
|
|
|
<script>
|
|
const connectButton = document.getElementById("connectButton");
|
|
const disconnectButton = document.getElementById("disconnectButton");
|
|
const connect = document.getElementById("connect");
|
|
const deviceButtonPressed = document.getElementById("deviceButtonPressed");
|
|
var lastState = false;
|
|
//productId: 0x0060,
|
|
//class: models_1.StreamDeckOriginal,
|
|
|
|
//productId: 0x0063,
|
|
//class: models_1.StreamDeckMini,
|
|
|
|
//productId: 0x006c,
|
|
//class: models_1.StreamDeckXL,
|
|
|
|
//productId: 0x006d,
|
|
//class: models_1.StreamDeckOriginalV2,
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
let devices = await navigator.hid.getDevices();
|
|
devices.forEach(device => {
|
|
console.log(`HID: ${device.productName}`);
|
|
});
|
|
});
|
|
|
|
function handleInputReport(e) {
|
|
console.log(e.device.productName + ": got input report " + e.reportId);
|
|
console.log(new Uint8Array(e.data.buffer));
|
|
var data = new Uint8Array(e.data.buffer);
|
|
if (lastState!==false){
|
|
for (var i=0;i<data.length;i++){
|
|
|
|
if (parseInt(data[i])!=data[i]){continue;}
|
|
if (lastState[i]!==data[i]){
|
|
if (data[i]){
|
|
document.getElementById("connected").innerHTML = "<br />Button "+(i+1)+" Pressed"+document.getElementById("connected").innerHTML;
|
|
} else {
|
|
document.getElementById("connected").innerHTML = "<br />Button "+(i+1)+" Released"+document.getElementById("connected").innerHTML;
|
|
}
|
|
} else {
|
|
if (data[i]){
|
|
document.getElementById("connected").innerHTML = "<br />Button "+(i+1)+" Pressed"+document.getElementById("connected").innerHTML;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
lastState = data;
|
|
}
|
|
|
|
let device;
|
|
|
|
connectButton.onclick = async () => {
|
|
navigator.hid.requestDevice({
|
|
filters: [{ vendorId: 0x0fd9}] // elgato?
|
|
}).then((devices)=>{
|
|
console.log(devices);
|
|
|
|
device = devices[0];
|
|
|
|
console.log(`HID connected: ${device.productName}`);
|
|
document.getElementById("connected").innerHTML = "<br />Connected" +document.getElementById("connected").innerHTML;
|
|
document.getElementById("disconnectButton").style.display = "inline-block";
|
|
device.addEventListener("inputreport", handleInputReport);
|
|
|
|
//device.sendReport(outputReportId, outputReport).then(() => {
|
|
// console.log("Sent output report " + outputReportId);
|
|
//});
|
|
|
|
if (!device.opened){
|
|
device.open().then(()=>{
|
|
window.addEventListener("onbeforeunload", async () => {
|
|
await device.close();
|
|
});
|
|
}).catch(function(err){console.error(err);});
|
|
}
|
|
}).catch(function(err){console.error(err);});
|
|
|
|
};
|
|
|
|
disconnectButton.onclick = async () => {
|
|
await device.close();
|
|
|
|
//connected.style.display = "none";
|
|
//connectButton.style.display = "initial";
|
|
disconnectButton.style.display = "none";
|
|
};
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|