ChK/appRobotVideoControls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Committed and Pushed by ButtonClick

Browse Source
This commit is contained in:
ChK
2025-12-22 18:12:25 +01:00
parent 203894c739
commit 59875f80e2
2 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -20,7 +20,7 @@
<div class="video-wrap"> <div class="video-wrap">
<canvas id="canvas0" width="1280" height="720"></canvas> <canvas id="canvas0" width="1280" height="960"></canvas>
<img id="overlayImg" <img id="overlayImg"
src="/snapshots/snapshot_video0_1765356085372_two_cam_overlay.png"> src="/snapshots/snapshot_video0_1765356085372_two_cam_overlay.png">
</div> </div>
@@ -31,7 +31,7 @@
<section class="panel"> <section class="panel">
<h2>Camera 1</h2> <h2>Camera 1</h2>
<div class="video-wrap"> <div class="video-wrap">
<canvas id="canvas1" width="1280" height="720"></canvas> <canvas id="canvas1" width="1280" height="960"></canvas>
</div> </div>
<div id="status1" class="status">Connecting…</div> <div id="status1" class="status">Connecting…</div>
</section> </section>

9
public/indexA.css
View File

@@ -42,9 +42,8 @@ h1, h2 {
background: #000; background: #000;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
width: 100%; width: 1280px;
max-width: 1280px; height: 960px;
aspect-ratio: 4 / 3;
margin: 0 auto; margin: 0 auto;
} }
@@ -56,8 +55,8 @@ h1, h2 {
position: absolute; position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */ inset: 0; /* top:0; right:0; bottom:0; left:0 */
/*width: 100%;*/ /*width: 100%;*/
width: 1280px; width: 1280px;
height: 100%; height: 960px;
/* Use `contain` so both layers scale uniformly and show letterboxing instead /* Use `contain` so both layers scale uniformly and show letterboxing instead
of stretching or cropping when the container size differs from the image. */ of stretching or cropping when the container size differs from the image. */
object-fit: contain; object-fit: contain;