-
Notifications
You must be signed in to change notification settings - Fork 4
/
scanconnect.html
132 lines (117 loc) · 3.79 KB
/
scanconnect.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QR-Code Connector</title>
<script>
let stream = null;
let detection = null;
let player = null;
let [host, password] = ["null", "null"];
window.addEventListener("DOMContentLoaded", init);
async function init() {
player = document.getElementById("player");
document.getElementById("bttConnect").addEventListener("click", connect);
await getMedia();
}
const barcodeDetector = new BarcodeDetector({ formats: ["qr_code"] });
async function runBarcodeDetection() {
// Try to read barcode
let result = await barcodeDetector.detect(player);
// Keep scanning while no qrcode is found
if (result.length == 0) return;
// Get first obsws barcode we find
let wscode = result.find(barcode => barcode.rawValue.startsWith("obsws://"))?.rawValue;
if (!wscode) return;
// Stop scanning on ok-read
clearInterval(detection);
// Handle further processing
handleUrlScan(wscode);
}
async function handleUrlScan(url) {
await closeCamera();
// Show resultbox div
document.getElementById("resultbox").style.display = "block";
// Parse url
[host, password] = url.replace("obsws://", "").split("/", 2);
document.getElementById("infotext").innerHTML = `Host: ${host}<br>Password: ${password}`;
}
function connect(event) {
let urlparams = `?host=${encodeURIComponent(host)}&password=${password}`;
console.log(urlparams);
const cl = window.location;
if (cl.protocol == "file:" || cl.protocol == "http:") {
// for file or http url, we can just toss the parameter
window.location.href = "OBSliveTally.html" + urlparams;
} else if (cl.protocol == "https:") {
// for https redirect to http page
window.location.href = `http://${cl.host}/OBSliveTally.html${urlparams}`;
}
}
async function closeCamera() {
// Hide scanbox
document.getElementById("scanbox").style.display = "none";
// Stop media stream
stream.getTracks().forEach(track => track.readyState == "live" && track.stop());
}
async function getMedia() {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
console.log("getUserMedia Supported");
} else {
console.log("getUserMedia not Supported");
}
try {
const constraints = {
video: {
width: 1920,
hight: 1080,
framerate: 15,
facingMode: "environment"
},
audio: false
};
stream = await navigator.mediaDevices.getUserMedia(constraints);
player.srcObject = stream;
console.log(stream);
console.log(stream.getVideoTracks());
detection = setInterval(runBarcodeDetection, 200);
} catch (err) {
console.error(err);
}
}
</script>
<style>
body {
margin: 5px;
padding: 0;
}
button {
height: 8em;
width: 99%;
}
#scanbox {
width: 95%;
margin: auto;
}
#player {
max-width: 100%;
border: 2px solid;
}
#resultbox {
display: none;
}
#infotext {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="scanbox">
<div>Open Tools -> WebSocket Server Settings -> Show Connect Info and scan the QR Code to connect</div>
<video id="player" autoplay muted></video>
</div>
<div id="resultbox">
<div id="infotext"></div>
<button id="bttConnect">Connect</button>
</div>
</body>