Doni/3588AdminBackend
5
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 = [
{{range .Devices}}{{if .Online}}
{id:"{{.DeviceID}}",name:"{{.DisplayName}}",ip:"{{.IP}}",media:"{{.MediaPort}}"},
{id:"{{.DeviceID}}",name:"{{.DisplayName}}"},
{{end}}{{end}}
];
if (devices.length === 0) {
@ -33,12 +33,7 @@ function loadAll() {
var promises = devices.map(function(dev) {
return fetch('/ui/api/monitor/channels?device_id=' + encodeURIComponent(dev.id))
.then(function(r) { return r.json(); })
.then(function(data) {
var chs = data.channels || [];
return chs.map(function(ch) {
return {device:dev.name, channel:ch.name, ip:dev.ip, media:dev.media};
});
})
.then(function(data) { return (data.channels||[]).map(function(ch) { ch._dev = dev.name; return ch; }); })
.catch(function() { return []; });
});
@ -52,11 +47,19 @@ function loadAll() {
var cols = all.length <= 2 ? all.length : 2;
wall.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))";
var html = "";
all.forEach(function(item) {
all.forEach(function(ch) {
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>';
var player = 'http://' + item.ip + ':' + item.media + '/hls_player.html';
html += '<iframe src="' + esc(player) + '" style="width:100%;height:420px;border:none;background:#000" allowfullscreen></iframe>';
html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">';
html += '<span style="font-size:12px;font-weight:500">' + esc(ch._dev) + ' · ' + esc(ch.name) + '</span>';
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>';
});
wall.innerHTML = html;