Doni/safesight-control
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use video tag with HLS URL, add open-in-new-window link

Browse Source
This commit is contained in:
tian 2026-05-07 14:43:17 +08:00
parent 531581eb04
commit cbc5f90b84
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
internal/web/ui/templates/monitor.html
View File

@ -22,7 +22,7 @@ function loadAll() {
var devices = [ var devices = [
{{range .Devices}}{{if .Online}} {{range .Devices}}{{if .Online}}
{id:"{{.DeviceID}}",name:"{{.DisplayName}}",ip:"{{.IP}}",media:"{{.MediaPort}}"}, {id:"{{.DeviceID}}",name:"{{.DisplayName}}"},
{{end}}{{end}} {{end}}{{end}}
]; ];
if (devices.length === 0) { if (devices.length === 0) {
@ -33,12 +33,7 @@ function loadAll() {
var promises = devices.map(function(dev) { var promises = devices.map(function(dev) {
return fetch('/ui/api/monitor/channels?device_id=' + encodeURIComponent(dev.id)) return fetch('/ui/api/monitor/channels?device_id=' + encodeURIComponent(dev.id))
.then(function(r) { return r.json(); }) .then(function(r) { return r.json(); })
.then(function(data) { .then(function(data) { return (data.channels||[]).map(function(ch) { ch._dev = dev.name; return ch; }); })
var chs = data.channels || [];
return chs.map(function(ch) {
return {device:dev.name, channel:ch.name, ip:dev.ip, media:dev.media};
});
})
.catch(function() { return []; }); .catch(function() { return []; });
}); });
@ -52,11 +47,19 @@ function loadAll() {
var cols = all.length <= 2 ? all.length : 2; var cols = all.length <= 2 ? all.length : 2;
wall.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))"; wall.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))";
var html = ""; var html = "";
all.forEach(function(item) { all.forEach(function(ch) {
html += '<div class="card" style="padding:8px">'; html += '<div class="card" style="padding:8px">';
html += '<div style="font-size:12px;font-weight:500;margin-bottom:6px">' + esc(item.device) + ' · ' + esc(item.channel) + '</div>'; html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">';
var player = 'http://' + item.ip + ':' + item.media + '/hls_player.html'; html += '<span style="font-size:12px;font-weight:500">' + esc(ch._dev) + ' · ' + esc(ch.name) + '</span>';
html += '<iframe src="' + esc(player) + '" style="width:100%;height:420px;border:none;background:#000" allowfullscreen></iframe>'; if (ch.hls_url) {
html += '<a class="btn ghost" href="' + esc(ch.hls_url) + '" target="_blank" style="font-size:11px;padding:2px 8px">新窗口</a>';
}
html += '</div>';
if (ch.hls_url) {
html += '<video controls autoplay muted style="width:100%;max-height:340px;background:#000" src="' + esc(ch.hls_url) + '"></video>';
} else {
html += '<div class="muted" style="height:200px;display:flex;align-items:center;justify-content:center">无预览地址</div>';
}
html += '</div>'; html += '</div>';
}); });
wall.innerHTML = html; wall.innerHTML = html;