kopia lustrzana https://github.com/alanesq/esp32cam-demo
View multiple esp32cams with zoom facility
Alan
GitHub
rodzic
de4b090934
commit
187b9ffae1
|
|
@ -0,0 +1,276 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Display all cameras with resize and zoom
|
||||||
|
Hold shift to zoom/pan the image
|
||||||
|
|
||||||
|
enter camera IP details under "const cameras"
|
||||||
|
|
||||||
|
16May25
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Camera Viewer Shift-Flipped</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: #111;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
#toolbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
background: #222;
|
||||||
|
color: #fff;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
#toolbar button {
|
||||||
|
margin-right: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
background: #333;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.img-container {
|
||||||
|
position: absolute;
|
||||||
|
border: 2px solid #444;
|
||||||
|
overflow: hidden;
|
||||||
|
user-select: none;
|
||||||
|
z-index: 1;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.img-container.active {
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.img-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
cursor: grab;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.img-inner img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transform-origin: top left;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.close-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 4px;
|
||||||
|
background: red;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="toolbar"></div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
|
||||||
|
<script>
|
||||||
|
let isShiftPressed = false;
|
||||||
|
window.addEventListener('keydown', e => { if (e.key === 'Shift') isShiftPressed = true; });
|
||||||
|
window.addEventListener('keyup', e => { if (e.key === 'Shift') isShiftPressed = false; });
|
||||||
|
window.addEventListener('wheel', e => { if (e.ctrlKey) e.preventDefault(); }, { passive: false });
|
||||||
|
|
||||||
|
// Camera details
|
||||||
|
// Camera should supply a jpg image - for esp32cam see: https://github.com/alanesq/esp32cam-demo
|
||||||
|
const cameras = [
|
||||||
|
{ src: "http://192.168.1.100/jpg", id: "Front" },
|
||||||
|
{ src: "http://192.168.1.110/jpg", id: "Side" },
|
||||||
|
{ src: "http://192.168.1.120/jpg", id: "Back" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const toolbar = document.getElementById('toolbar');
|
||||||
|
cameras.forEach(cam => {
|
||||||
|
const btn = document.createElement('button');
|
||||||
|
btn.textContent = cam.id;
|
||||||
|
btn.onclick = () => createCameraWindow(cam);
|
||||||
|
toolbar.appendChild(btn);
|
||||||
|
});
|
||||||
|
|
||||||
|
function createCameraWindow(cam) {
|
||||||
|
if (document.getElementById(cam.id)) return;
|
||||||
|
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'img-container';
|
||||||
|
div.id = cam.id;
|
||||||
|
div.style = 'left:10px; top:60px; width:320px; height:240px;';
|
||||||
|
div.innerHTML = `
|
||||||
|
<button class="close-btn" onclick="this.parentElement.remove()">×</button>
|
||||||
|
<div class="img-inner"><img /></div>
|
||||||
|
`;
|
||||||
|
document.body.appendChild(div);
|
||||||
|
initContainer(div, cam.src);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initContainer(container, src) {
|
||||||
|
const inner = container.querySelector('.img-inner');
|
||||||
|
const img = inner.querySelector('img');
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
scale: 1,
|
||||||
|
panX: 0,
|
||||||
|
panY: 0,
|
||||||
|
isPanning: false,
|
||||||
|
startX: 0,
|
||||||
|
startY: 0,
|
||||||
|
imgNaturalWidth: 0,
|
||||||
|
imgNaturalHeight: 0,
|
||||||
|
};
|
||||||
|
container._zoomPanState = state;
|
||||||
|
|
||||||
|
interact(container)
|
||||||
|
.draggable({
|
||||||
|
listeners: {
|
||||||
|
start(event) { if (isShiftPressed) event.interaction.stop(); },
|
||||||
|
move(event) {
|
||||||
|
if (isShiftPressed) return;
|
||||||
|
container.style.left = (parseFloat(container.style.left) || 0) + event.dx + 'px';
|
||||||
|
container.style.top = (parseFloat(container.style.top) || 0) + event.dy + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.resizable({
|
||||||
|
edges: { left: true, right: true, bottom: true, top: true },
|
||||||
|
modifiers: [
|
||||||
|
interact.modifiers.aspectRatio({ ratio: 4 / 3 }),
|
||||||
|
interact.modifiers.restrictSize({ min: { width: 100, height: 75 } })
|
||||||
|
],
|
||||||
|
listeners: {
|
||||||
|
move(event) {
|
||||||
|
container.style.width = event.rect.width + 'px';
|
||||||
|
container.style.height = event.rect.height + 'px';
|
||||||
|
const scaleX = container.clientWidth / state.imgNaturalWidth;
|
||||||
|
const scaleY = container.clientHeight / state.imgNaturalHeight;
|
||||||
|
state.scale = Math.min(scaleX, scaleY);
|
||||||
|
state.panX = 0;
|
||||||
|
state.panY = 0;
|
||||||
|
updateImageTransform(img, state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
inner.addEventListener('wheel', e => {
|
||||||
|
if (!isShiftPressed) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const rect = inner.getBoundingClientRect();
|
||||||
|
const mouseX = e.clientX - rect.left;
|
||||||
|
const mouseY = e.clientY - rect.top;
|
||||||
|
const prevScale = state.scale;
|
||||||
|
state.scale += -e.deltaY * 0.001;
|
||||||
|
state.scale = Math.min(Math.max(0.5, state.scale), 5);
|
||||||
|
state.panX = mouseX - ((mouseX - state.panX) * (state.scale / prevScale));
|
||||||
|
state.panY = mouseY - ((mouseY - state.panY) * (state.scale / prevScale));
|
||||||
|
clampPan();
|
||||||
|
updateImageTransform(img, state);
|
||||||
|
});
|
||||||
|
|
||||||
|
inner.addEventListener('mousedown', e => {
|
||||||
|
if (!isShiftPressed) return;
|
||||||
|
e.preventDefault();
|
||||||
|
state.isPanning = true;
|
||||||
|
state.startX = e.clientX - state.panX;
|
||||||
|
state.startY = e.clientY - state.panY;
|
||||||
|
inner.style.cursor = 'grabbing';
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('mousemove', e => {
|
||||||
|
if (!state.isPanning) return;
|
||||||
|
state.panX = e.clientX - state.startX;
|
||||||
|
state.panY = e.clientY - state.startY;
|
||||||
|
clampPan();
|
||||||
|
updateImageTransform(img, state);
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('mouseup', () => {
|
||||||
|
if (state.isPanning) {
|
||||||
|
state.isPanning = false;
|
||||||
|
inner.style.cursor = 'grab';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
img.ondragstart = () => false;
|
||||||
|
|
||||||
|
function clampPan() {
|
||||||
|
const cw = container.clientWidth, ch = container.clientHeight;
|
||||||
|
const iw = state.imgNaturalWidth * state.scale;
|
||||||
|
const ih = state.imgNaturalHeight * state.scale;
|
||||||
|
state.panX = Math.max(Math.min(0, cw - iw), state.panX);
|
||||||
|
state.panY = Math.max(Math.min(0, ch - ih), state.panY);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateImageTransform(image, s) {
|
||||||
|
image.style.left = s.panX + 'px';
|
||||||
|
image.style.top = s.panY + 'px';
|
||||||
|
image.style.transform = `scale(${s.scale})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.addEventListener('mousedown', () => {
|
||||||
|
document.querySelectorAll('.img-container').forEach(c => c.classList.remove('active'));
|
||||||
|
container.classList.add('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
function fetchNextFrame() {
|
||||||
|
const imgUrl = `${src}?t=${Date.now()}`;
|
||||||
|
let timedOut = false;
|
||||||
|
|
||||||
|
const timeoutId = setTimeout(() => {
|
||||||
|
timedOut = true;
|
||||||
|
fetchNextFrame();
|
||||||
|
}, 4000);
|
||||||
|
|
||||||
|
const tempImg = new Image();
|
||||||
|
tempImg.onload = () => {
|
||||||
|
if (timedOut) return;
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
img.src = tempImg.src;
|
||||||
|
state.imgNaturalWidth = tempImg.naturalWidth;
|
||||||
|
state.imgNaturalHeight = tempImg.naturalHeight;
|
||||||
|
|
||||||
|
if (!state.initialized) {
|
||||||
|
const scaleX = container.clientWidth / state.imgNaturalWidth;
|
||||||
|
const scaleY = container.clientHeight / state.imgNaturalHeight;
|
||||||
|
state.scale = Math.min(scaleX, scaleY);
|
||||||
|
state.panX = 0;
|
||||||
|
state.panY = 0;
|
||||||
|
state.initialized = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateImageTransform(img, state);
|
||||||
|
setTimeout(fetchNextFrame, 600);
|
||||||
|
};
|
||||||
|
tempImg.onerror = () => {
|
||||||
|
if (!timedOut) {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
setTimeout(fetchNextFrame, 600);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
tempImg.src = imgUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchNextFrame();
|
||||||
|
}
|
||||||
|
|
||||||
|
// cameras.forEach(cam => createCameraWindow(cam)); // display cameras at startup
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
Ładowanie…
Reference in New Issue