mobile: both modes use the branded .pjs player
Replace the split mobile UI (live = round pause button, archive = native <video controls>) with one branded player for both modes, ported from the desktop ArchivePlayer (.pjs) and kept self-contained in the mobile bundle so the live desktop is untouched. - Live: branded player with pause/play + fullscreen only (no seekbar). - Archive: branded player with full seek (transcode virtual timeline, seek = restart transcode with -ss) + playback speed (0.5/1/2/5x). - H.264 server transcode path unchanged; touch-friendly always-on bar. Verified end-to-end on .79: live.mp4 200 video/mp4, play.mp4 200, duration_s present for the seek timeline. VERSION 0.0.153 -> 0.0.154 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+150
-48
@@ -1,11 +1,17 @@
|
||||
// CoRE.Vizion+ — мобильный dashboard. 2 режима: Live (1 камера + выбор) и Архив.
|
||||
// Видео отдаётся сервером уже перекодированным в H.264 (обычный <video>, играет на любом телефоне).
|
||||
// CoRE.Vizion+ — мобильный dashboard. Оба режима через фирменный плеер (.pjs):
|
||||
// Live — только пауза/плей + во весь экран; Архив — перемотка + скорость.
|
||||
// Видео отдаётся сервером уже перекодированным в H.264 (играет на любом телефоне).
|
||||
"use strict";
|
||||
|
||||
// фиксированный профиль H.264 для телефона (макс. совместимость)
|
||||
const TR = "codec=h264&profile=baseline&bitrate=2000k&preset=ultrafast&keyint=2&rc=vbr&qp=23";
|
||||
|
||||
function pad(n) { return String(n).padStart(2, "0"); }
|
||||
function fmt(s) {
|
||||
if (!isFinite(s) || s < 0) s = 0;
|
||||
const m = Math.floor(s / 60), sec = Math.floor(s % 60);
|
||||
return m + ":" + String(sec).padStart(2, "0");
|
||||
}
|
||||
async function api(url) {
|
||||
const r = await fetch(url, { credentials: "same-origin" });
|
||||
if (r.status === 401) { location.href = "/login"; throw new Error("unauthorized"); }
|
||||
@@ -13,8 +19,119 @@ async function api(url) {
|
||||
return r.json();
|
||||
}
|
||||
|
||||
// ── фирменный плеер (.pjs) ──────────────────────────────────────────────
|
||||
// opts: { live:bool, duration, srcFor(startSec)->url, src }
|
||||
// live — без таймлайна: только пауза/плей + fullscreen.
|
||||
// архив — серверный транскод без Range: виртуальный таймлайн на duration,
|
||||
// перемотка = перезапуск транскода с -ss (srcFor(t)).
|
||||
class Player {
|
||||
constructor(wrap, opts = {}) {
|
||||
this.live = !!opts.live;
|
||||
this.total = opts.duration || 0;
|
||||
this.srcFor = opts.srcFor || null;
|
||||
this.startOffset = 0;
|
||||
this.speeds = [0.5, 1, 2, 5]; this.spIdx = 1;
|
||||
this.dragging = false; this.dragP = 0;
|
||||
wrap.innerHTML = "";
|
||||
const root = document.createElement("div");
|
||||
root.className = "pjs" + (this.live ? " live" : "");
|
||||
root.tabIndex = 0;
|
||||
root.innerHTML =
|
||||
'<video class="pjs-video" playsinline' + (this.live ? " muted autoplay" : " autoplay") + '></video>' +
|
||||
'<div class="pjs-center"><div class="pjs-spinner"></div><button class="pjs-bigplay" aria-label="Play">▶</button></div>' +
|
||||
'<div class="pjs-bar">' +
|
||||
'<button class="pjs-btn pjs-play" title="Пауза / воспроизведение">⏸</button>' +
|
||||
'<span class="pjs-time">0:00</span>' +
|
||||
'<div class="pjs-seek"><div class="pjs-buf"></div><div class="pjs-prog"></div><div class="pjs-knob"></div></div>' +
|
||||
'<span class="pjs-dur">0:00</span>' +
|
||||
'<button class="pjs-btn pjs-speed" title="Скорость воспроизведения">1×</button>' +
|
||||
'<button class="pjs-btn pjs-fs" title="Во весь экран">⛶</button>' +
|
||||
'</div>';
|
||||
wrap.appendChild(root);
|
||||
this.root = root;
|
||||
this.v = root.querySelector(".pjs-video");
|
||||
this.seek = root.querySelector(".pjs-seek");
|
||||
this.prog = root.querySelector(".pjs-prog");
|
||||
this.buf = root.querySelector(".pjs-buf");
|
||||
this.knob = root.querySelector(".pjs-knob");
|
||||
this.timeEl = root.querySelector(".pjs-time");
|
||||
this.durEl = root.querySelector(".pjs-dur");
|
||||
this.playBtn = root.querySelector(".pjs-play");
|
||||
this.speedBtn = root.querySelector(".pjs-speed");
|
||||
this.v.src = this.live ? opts.src : this.srcFor(0);
|
||||
this._bind();
|
||||
this.v.play().catch(() => {});
|
||||
}
|
||||
_total() { return this.total || 0; }
|
||||
_curTime() { return this.startOffset + (this.v.currentTime || 0); }
|
||||
_applyRate() { this.v.playbackRate = this.speeds[this.spIdx]; }
|
||||
_seekToFrac(p) {
|
||||
const total = this._total(); if (!total || this.live) return;
|
||||
const t = Math.min(total, Math.max(0, p * total));
|
||||
this.startOffset = t; // перезапуск транскода с нужной секунды
|
||||
this.v.src = this.srcFor(t);
|
||||
this.v.play().catch(() => {});
|
||||
this._sync();
|
||||
}
|
||||
_bind() {
|
||||
const v = this.v, root = this.root;
|
||||
v.addEventListener("loadedmetadata", () => { this.durEl.textContent = fmt(this._total()); this._applyRate(); });
|
||||
v.addEventListener("timeupdate", () => this._sync());
|
||||
v.addEventListener("progress", () => this._syncBuf());
|
||||
v.addEventListener("play", () => { this.playBtn.textContent = "⏸"; root.classList.remove("paused"); });
|
||||
v.addEventListener("pause", () => { this.playBtn.textContent = "▶"; root.classList.add("paused"); });
|
||||
v.addEventListener("waiting", () => root.classList.add("buffering"));
|
||||
v.addEventListener("playing", () => root.classList.remove("buffering"));
|
||||
|
||||
const toggle = () => { if (v.paused) v.play().catch(() => {}); else v.pause(); };
|
||||
this.playBtn.onclick = toggle;
|
||||
root.querySelector(".pjs-bigplay").onclick = toggle;
|
||||
v.onclick = toggle;
|
||||
root.querySelector(".pjs-fs").onclick = () => this._fs();
|
||||
this.speedBtn.onclick = () => {
|
||||
this.spIdx = (this.spIdx + 1) % this.speeds.length;
|
||||
const r = this.speeds[this.spIdx]; v.playbackRate = r; this.speedBtn.textContent = r + "×";
|
||||
};
|
||||
|
||||
if (!this.live) { // перемотка по шкале (тач): превью при drag, seek на отпускании
|
||||
const fracAt = (x) => { const r = this.seek.getBoundingClientRect(); return Math.min(1, Math.max(0, (x - r.left) / r.width)); };
|
||||
const preview = (p) => { this.prog.style.width = (p * 100) + "%"; this.knob.style.left = (p * 100) + "%"; this.timeEl.textContent = fmt(p * this._total()); };
|
||||
this.seek.addEventListener("pointerdown", (e) => { this.dragging = true; this.dragP = fracAt(e.clientX); try { this.seek.setPointerCapture(e.pointerId); } catch (er) {} preview(this.dragP); });
|
||||
this.seek.addEventListener("pointermove", (e) => { if (this.dragging) { this.dragP = fracAt(e.clientX); preview(this.dragP); } });
|
||||
this.seek.addEventListener("pointerup", () => { if (this.dragging) { this.dragging = false; this._seekToFrac(this.dragP); } });
|
||||
}
|
||||
}
|
||||
_sync() {
|
||||
if (this.dragging || this.live) return;
|
||||
const cur = this._curTime(), total = this._total();
|
||||
const p = total ? Math.min(1, cur / total) : 0;
|
||||
this.prog.style.width = (p * 100) + "%";
|
||||
this.knob.style.left = (p * 100) + "%";
|
||||
this.timeEl.textContent = fmt(cur);
|
||||
this.durEl.textContent = fmt(total);
|
||||
}
|
||||
_syncBuf() {
|
||||
const v = this.v; if (this.live || !v.buffered.length) return;
|
||||
const total = this._total(); if (!total) return;
|
||||
const end = this.startOffset + v.buffered.end(v.buffered.length - 1);
|
||||
this.buf.style.width = Math.min(100, end / total * 100) + "%";
|
||||
}
|
||||
_fs() {
|
||||
const r = this.root;
|
||||
if (document.fullscreenElement || document.webkitFullscreenElement) {
|
||||
(document.exitFullscreen || document.webkitExitFullscreen || function () {}).call(document);
|
||||
} else if (r.requestFullscreen) { r.requestFullscreen().catch(() => {}); }
|
||||
else if (r.webkitRequestFullscreen) { r.webkitRequestFullscreen(); }
|
||||
else if (this.v.webkitEnterFullscreen) { this.v.webkitEnterFullscreen(); } // iOS: только видео
|
||||
}
|
||||
destroy() {
|
||||
try { this.v.pause(); this.v.removeAttribute("src"); this.v.load(); } catch (e) { /**/ }
|
||||
if (this.root && this.root.parentNode) this.root.parentNode.removeChild(this.root);
|
||||
}
|
||||
}
|
||||
|
||||
const M = {
|
||||
cams: [], liveId: null, archId: null, date: null, view: "live",
|
||||
cams: [], segs: [], liveId: null, archId: null, date: null, view: "live", player: null,
|
||||
|
||||
async init() {
|
||||
let data;
|
||||
@@ -37,13 +154,6 @@ const M = {
|
||||
dt.value = this.date;
|
||||
dt.onchange = () => { this.date = dt.value; this.loadArch(); };
|
||||
|
||||
// тап по живому видео — на весь экран
|
||||
const lv = document.getElementById("m-live-video");
|
||||
lv.addEventListener("click", () => {
|
||||
if (lv.requestFullscreen) lv.requestFullscreen().catch(() => {});
|
||||
else if (lv.webkitEnterFullscreen) lv.webkitEnterFullscreen(); // iOS
|
||||
});
|
||||
|
||||
// бутерброд-меню сверху: выбор режима (Live / Архив)
|
||||
const drawer = document.getElementById("m-drawer");
|
||||
const scrim = document.getElementById("m-scrim");
|
||||
@@ -54,76 +164,68 @@ const M = {
|
||||
b.onclick = () => { this.showView(b.dataset.view); setMenu(false); };
|
||||
});
|
||||
|
||||
// live: только пауза / воспроизведение
|
||||
const lt = document.getElementById("m-live-toggle");
|
||||
lt.onclick = () => { if (lv.paused) lv.play().catch(() => {}); else lv.pause(); };
|
||||
lv.addEventListener("play", () => { lt.textContent = "⏸"; });
|
||||
lv.addEventListener("pause", () => { lt.textContent = "▶"; });
|
||||
|
||||
this.showView("live");
|
||||
},
|
||||
|
||||
_kill() { if (this.player) { this.player.destroy(); this.player = null; } },
|
||||
|
||||
showView(v) {
|
||||
this.view = v;
|
||||
document.getElementById("m-title").textContent = v === "live" ? "Live" : "Архив";
|
||||
document.querySelectorAll(".m-nav").forEach((b) => b.classList.toggle("active", b.dataset.view === v));
|
||||
document.getElementById("view-live").hidden = v !== "live";
|
||||
document.getElementById("view-arch").hidden = v !== "arch";
|
||||
if (v === "live") { this.stopArch(); this.startLive(); }
|
||||
else { this.stopLive(); this.loadArch(); }
|
||||
this._kill();
|
||||
if (v === "live") this.startLive();
|
||||
else this.loadArch();
|
||||
},
|
||||
|
||||
// ── Live ──
|
||||
startLive() {
|
||||
const v = document.getElementById("m-live-video");
|
||||
const hint = document.getElementById("m-live-hint");
|
||||
if (!this.liveId) { this.stopLive(); hint.textContent = "Нет доступных камер"; hint.hidden = false; return; }
|
||||
hint.hidden = true;
|
||||
v.src = `/api/cameras/${this.liveId}/live.mp4?stream=sub&${TR}`;
|
||||
v.play().catch(() => {});
|
||||
},
|
||||
stopLive() {
|
||||
const v = document.getElementById("m-live-video");
|
||||
v.pause(); v.removeAttribute("src"); v.load(); // обрыв запроса → сервер гасит ffmpeg
|
||||
this._kill();
|
||||
const box = document.getElementById("m-live-box");
|
||||
if (!this.liveId) { box.innerHTML = '<div class="m-empty">Нет доступных камер</div>'; return; }
|
||||
this.player = new Player(box, { live: true, src: `/api/cameras/${this.liveId}/live.mp4?stream=sub&${TR}` });
|
||||
},
|
||||
|
||||
// ── Архив ──
|
||||
async loadArch() {
|
||||
const box = document.getElementById("m-seglist");
|
||||
this.stopArch();
|
||||
document.getElementById("m-arch-hint").hidden = false;
|
||||
if (!this.archId || !this.date) { box.innerHTML = ""; return; }
|
||||
this._kill();
|
||||
const box = document.getElementById("m-arch-box");
|
||||
const list = document.getElementById("m-seglist");
|
||||
box.innerHTML = '<div class="m-empty">Выберите запись ниже</div>';
|
||||
if (!this.archId || !this.date) { list.innerHTML = ""; return; }
|
||||
const [y, m, d] = this.date.split("-").map(Number);
|
||||
const from = Math.floor(new Date(y, m - 1, d, 0, 0, 0).getTime() / 1000);
|
||||
const to = from + 86400;
|
||||
box.innerHTML = '<div class="m-empty">Загрузка…</div>';
|
||||
list.innerHTML = '<div class="m-empty">Загрузка…</div>';
|
||||
let recs = [];
|
||||
try { recs = (await api(`/api/recordings?camera=${this.archId}&from=${from}&to=${to}`)).recordings || []; }
|
||||
catch (e) { box.innerHTML = '<div class="m-empty">Ошибка загрузки</div>'; return; }
|
||||
if (!recs.length) { box.innerHTML = '<div class="m-empty">За выбранный день записей нет</div>'; return; }
|
||||
box.innerHTML = recs.map((r) => {
|
||||
const t = new Date(r.started_at * 1000);
|
||||
catch (e) { list.innerHTML = '<div class="m-empty">Ошибка загрузки</div>'; return; }
|
||||
if (!recs.length) { list.innerHTML = '<div class="m-empty">За выбранный день записей нет</div>'; return; }
|
||||
this.segs = recs;
|
||||
list.innerHTML = recs.map((r) => {
|
||||
const tt = new Date(r.started_at * 1000);
|
||||
const mins = Math.round((r.duration_s || 0) / 60);
|
||||
return `<button class="m-seg" data-id="${r.id}">` +
|
||||
`${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}` +
|
||||
`${pad(tt.getHours())}:${pad(tt.getMinutes())}:${pad(tt.getSeconds())}` +
|
||||
`<span class="m-dur">${mins} мин</span></button>`;
|
||||
}).join("");
|
||||
box.onclick = (e) => {
|
||||
list.onclick = (e) => {
|
||||
const b = e.target.closest(".m-seg");
|
||||
if (!b) return;
|
||||
box.querySelectorAll(".m-seg").forEach((x) => x.classList.toggle("active", x === b));
|
||||
list.querySelectorAll(".m-seg").forEach((x) => x.classList.toggle("active", x === b));
|
||||
this.playSeg(+b.dataset.id);
|
||||
};
|
||||
},
|
||||
playSeg(id) {
|
||||
const v = document.getElementById("m-arch-video");
|
||||
document.getElementById("m-arch-hint").hidden = true;
|
||||
v.src = `/api/recordings/${id}/play.mp4?${TR}`;
|
||||
v.play().catch(() => {});
|
||||
},
|
||||
stopArch() {
|
||||
const v = document.getElementById("m-arch-video");
|
||||
v.pause(); v.removeAttribute("src"); v.load();
|
||||
this._kill();
|
||||
const seg = this.segs.find((r) => r.id === id);
|
||||
const box = document.getElementById("m-arch-box");
|
||||
this.player = new Player(box, {
|
||||
duration: seg ? (seg.duration_s || 0) : 0,
|
||||
srcFor: (t) => `/api/recordings/${id}/play.mp4?${TR}&start=${(t || 0).toFixed(3)}`,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user