Auto resize

wmodes · Dec 16, 2023 · 62426dc · 62426dc
1 parent 0275a1e
commit 62426dc
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 23 deletions.
diff --git a/faces/css/faces.css b/faces/css/faces.css
@@ -4,15 +4,15 @@ document, body {
   padding: 0;
 } 
 
-.video-wrapper {
+.wrapper {
   position: relative;
   border: solid 1px red;
   width: 100vw;
   height: 100vh;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
-.video-wrapper video {
+.wrapper video {
   position: absolute;
   top: 0;
   left: 0;
@@ -21,18 +21,31 @@ document, body {
   /* Maintain aspect ratio and cover entire container */
   object-fit: cover; 
   /* mirror video - flip left to right */
-  transform: scaleX(-1);
+  /* transform: scaleX(-1); */
 }
 
-.video-wrapper video,
-.video-wrapper canvas {
+.wrapper video,
+.wrapper canvas {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh; 
+  /* center the element */
+  left: 50%;
+  top: 50%;
+  /* transform: translate(-50%, -50%) scaleX(-1); */
+  /* initial values here will be reset by js */
+  /* top: 0; */
+  /* left: 0; */
+  /* width: 100vw; */
+  /* height: 100vh;  */
+}
+
+.wrapper video {
+  transform: translate(-50%, -50%) scaleX(-1);
+}
+
+.wrapper canvas {
+  transform: translate(-50%, -50%);
 }
 
-.video-wrapper canvas {
+.wrapper canvas {
   border: solid 1px orange;
 }
diff --git a/faces/index.html b/faces/index.html
@@ -14,7 +14,7 @@
     </head>
     <body>
         <main id=""content">
-            <div class="video-wrapper">
+            <div class="wrapper">
                 <video id="input-video" autoplay muted></video>
                 <canvas id="canvas">
               </div>

diff --git a/faces/js/faces.js b/faces/js/faces.js
@@ -10,14 +10,12 @@ $(document).ready(function() {
   // useful globals
   const videoEl = document.getElementById('input-video');
   const canvasEl = document.getElementById('canvas');
-  const videoWidth = $("#canvas").width();
-  const videoHeight = $("#canvas").height();
-  const displaySize = { width: videoWidth, height: videoHeight };
+  const displayWidth = $("#canvas").width();
+  const displayHeight = $("#canvas").height();
+  const displaySize = { width: displayWidth, height: displayHeight };
 
   // starting things up
   //
-  // resize the canvas canvas to the input dimensions
-  faceapi.matchDimensions(canvasEl, displaySize)
   // get a canvas context
   const ctx = canvasEl.getContext('2d');
 
@@ -46,8 +44,13 @@ $(document).ready(function() {
     // ...
     // console.log("onPlay Loop");
 
-    // const mtcnnResults = await faceapi.mtcnn(document.getElementById('input-video'), mtcnnForwardParams)
-    // Detect faces from https://github.com/justadudewhohacks/face-api.js/
+    const displayWidth = $("#input-video").width();
+    const displayHeight = $("#input-video").height();
+    const displaySize = { width: displayWidth, height: displayHeight };
+    // console.log("displaySize:", displaySize);
+
+    // resize the canvas canvas to the input dimensions
+    faceapi.matchDimensions(canvasEl, displaySize, true)
 
     /* Detect faces and landmarks */
     useTinyModel = true
@@ -59,7 +62,7 @@ $(document).ready(function() {
       const resizedDetections = faceapi.resizeResults(detections, displaySize);
 
       // Clear the entire canvas before drawing the new bounding box
-      ctx.clearRect(0, 0, videoWidth, videoHeight);
+      ctx.clearRect(0, 0, displayWidth, displayHeight);
 
       // draw detections into the canvas
       // faceapi.draw.drawDetections(canvasEl, resizedDetections)
@@ -160,15 +163,65 @@ $(document).ready(function() {
     }
   }
 
+  function resizeVideoAndCanvas() {
+    console.log("resizing video and canvas");
+    var $wrapper = $('.wrapper');
+    var $video = $('#input-video');
+    var $canvas = $('#canvas');
+
+    var videoWidth = $video.width();
+    var videoHeight = $video.height();
+    var wrapperWidth = $wrapper.width();
+    var wrapperHeight = $wrapper.height();
+
+    var videoAspectRatio = videoWidth / videoHeight;
+    var wrapperAspectRatio = wrapperWidth / wrapperHeight;
+
+    if (videoAspectRatio < wrapperAspectRatio) {
+        // Video is wider than the wrapper
+        var videoHeightNew = wrapperWidth / videoAspectRatio;
+        $video.css({
+          'width': 'auto',
+          'height': videoHeightNew + 'px'
+      });
+        $canvas.css({
+          'width': '100%',
+          'height': videoHeightNew + 'px'
+      });
+    } else {
+        // Video is narrower than the wrapper
+        var videoWidthNew = wrapperHeight * videoAspectRatio;
+        $video.css({
+          'width': videoWidthNew + 'px',
+          'height': 'auto'
+      });
+        $canvas.css({
+          'width': videoWidthNew + 'px',
+          'height': '100%'
+      });
+    }
+}
+
+
+  // Attach event listener for window resize
+  $(window).on('resize', function() {
+    resizeVideoAndCanvas(); // Call the function on window resize
+  });
+
   // let's get this party started
   //
-  // get canvas dimensions
-  // const displaySize = { width: videoEl.videoWidth, height: videoEl.videoHeight };
-  // const displaySize = { width: 800, height: 600 };
+  // resize canvas and video
+  resizeVideoAndCanvas()
+  // run the app
   run()
   $('#input-video').on('play', function() {
     // Call the onPlay function when the video starts playing
     onPlay(this);
   });
 
+  // Attach event listener for window resize
+  $(window).on('resize', function() {
+      resizeVideoAndCanvas(); // Call the function on window resize
+  });
+
 })