html: fix id_key to use device.name (#92)

* html: use const/let; add baseURL constant

* html: fix id_key [Object object]
This commit is contained in:
Christoph Wiechert 2025-06-08 18:47:38 +02:00 committed by GitHub
parent f73ac32944
commit 3fe5d2106f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -472,9 +472,10 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function (event) { document.addEventListener('DOMContentLoaded', function (event) {
var streamURL = 'stream'; const streamURL = 'stream';
var snapshotURL = 'snapshot'; const snapshotURL = 'snapshot';
var webrtcURL = 'webrtc'; const webrtcURL = 'webrtc';
const baseURL = '';
const header = document.getElementById('logo') const header = document.getElementById('logo')
const settings = document.getElementById('sidebar') const settings = document.getElementById('sidebar')
@ -539,7 +540,7 @@
key = encodeURIComponent(key); key = encodeURIComponent(key);
value = encodeURIComponent(value); value = encodeURIComponent(value);
return fetch(`option?device=${device}&key=${key}&value=${value}`, { return fetch(`${baseURL}option?device=${device}&key=${key}&value=${value}`, {
method: 'POST' method: 'POST'
}).then(function (response) { }).then(function (response) {
return response return response
@ -554,7 +555,7 @@
} }
const createDeviceOption = (device, key, option) => { const createDeviceOption = (device, key, option) => {
const id_key = `${device}_${key}`; const id_key = `${device.name}_${key}`;
const groupEl = insertControl("div"); const groupEl = insertControl("div");
groupEl.className = "input-group"; groupEl.className = "input-group";
@ -603,7 +604,7 @@
selectEl.add(optionEl); selectEl.add(optionEl);
} }
for (var value in option.menu) { for (let value in option.menu) {
const optionEl = document.createElement("option"); const optionEl = document.createElement("option");
optionEl.value = value; optionEl.value = value;
optionEl.text = option.menu[value]; optionEl.text = option.menu[value];
@ -695,24 +696,24 @@
} }
const createControls = (state) => { const createControls = (state) => {
for (var device of state.devices) { for (let device of state.devices) {
const heading = insertControl("h1"); const heading = insertControl("h1");
heading.textContent = device.name; heading.textContent = device.name;
for (var key in device.options) { for (let key in device.options) {
createDeviceOption(device, key, device.options[key]); createDeviceOption(device, key, device.options[key]);
} }
} }
}; };
var rtcPeerConfig = { const rtcPeerConfig = {
sdpSemantics: 'unified-plan' sdpSemantics: 'unified-plan'
}; };
rtcPeerConnection = new RTCPeerConnection(rtcPeerConfig); let rtcPeerConnection = new RTCPeerConnection(rtcPeerConfig);
// read initial values // read initial values
fetch(`status`) fetch(`${baseURL}status`)
.then(function (response) { .then(function (response) {
return response.json() return response.json()
}) })
@ -757,7 +758,7 @@
{ urls: ['stun:stun.l.google.com:19302'] } { urls: ['stun:stun.l.google.com:19302'] }
]; ];
fetch(webrtcURL, { fetch(baseURL + webrtcURL, {
body: JSON.stringify({type: 'request', iceServers: iceServers}), body: JSON.stringify({type: 'request', iceServers: iceServers}),
headers: {'Content-Type': 'application/json'}, headers: {'Content-Type': 'application/json'},
method: 'POST' method: 'POST'
@ -780,7 +781,7 @@
}); });
rtcPeerConnection.addEventListener("icecandidate", function(e) { rtcPeerConnection.addEventListener("icecandidate", function(e) {
if (e.candidate) { if (e.candidate) {
return fetch(webrtcURL, { return fetch(baseURL + webrtcURL, {
body: JSON.stringify({ body: JSON.stringify({
type: 'remote_candidate', type: 'remote_candidate',
id: rtcPeerConnection.remote_pc_id, id: rtcPeerConnection.remote_pc_id,
@ -800,9 +801,9 @@
}).then(function(answer) { }).then(function(answer) {
return rtcPeerConnection.setLocalDescription(answer); return rtcPeerConnection.setLocalDescription(answer);
}).then(function(answer) { }).then(function(answer) {
var offer = rtcPeerConnection.localDescription; const offer = rtcPeerConnection.localDescription;
return fetch(webrtcURL, { return fetch(baseURL + webrtcURL, {
body: JSON.stringify({ body: JSON.stringify({
type: offer.type, type: offer.type,
id: rtcPeerConnection.remote_pc_id, id: rtcPeerConnection.remote_pc_id,