撮影処理とtimestamp追加

engabesi · Dec 1, 2020 · 30ea477 · 30ea477
1 parent e27e589
commit 30ea477
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -15,14 +15,21 @@
         justify-content: center;
         align-items: center;
       }
-
+      .vertical {
+        display: flex;
+        flex-direction: column;
+      }
       canvas {
-        position: absolute;
+        border: 1px solid gray;
       }
     </style>
   </head>
   <body>
-    <video id="video" width="720" height="560" autoplay muted></video>
+    <video id="video" width="720" height="540" autoplay muted></video>
+    <div class="vertical">
+      <canvas id="picture" width="512" height="384"></canvas>
+      <label id="timestamp"></label>
+    </div>
     <script defer src="js/index.js"></script>
   </body>
 </html>
diff --git a/docs/js/index.js b/docs/js/index.js
@@ -48,7 +48,10 @@ const calcExpressionPoint = (expression) => {
 
     // 真顔ポイント
     let seriousPoint = 0;
+    let seriousCount = 0;
 
+    const pictureCanvas = document.querySelector("canvas");
+    const timestampLabel = document.querySelector("#timestamp");
     setInterval(async () => {
       const results = await faceapi
         .detectAllFaces(
@@ -63,7 +66,12 @@ const calcExpressionPoint = (expression) => {
         seriousPoint += calcExpressionPoint(expression);
         if (seriousPoint >= 100) {
           // 画像出力
+          pictureCanvas
+            .getContext("2d")
+            .drawImage(video, 0, 0, pictureCanvas.width, pictureCanvas.height);
           seriousPoint = 0;
+          seriousCount++;
+          timestampLabel.textContent = `${seriousCount}回目 ${new Date()}`;
         }
       });
     }, 100);