working

vangj · vangj · commit af6421a6fb5d · 2020-07-06T17:11:50.000-04:00
diff --git a/html/rps-tf/index.html b/html/rps-tf/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Display Webcam Stream</title>
+
+    <style>
+        #videoContainer {
+            margin: 0px auto;
+            width: 500px;
+            height: 375px;
+            border: 1px #333 solid;
+        }
+
+        #videoOutput {
+            width: 500px;
+            height: 375px;
+            background-color: #666;
+            -webkit-transform: scaleX(-1);
+            transform: scaleX(-1);
+        }
+    </style>
+</head>
+
+<body onload="init()">
+    <div id="videoContainer">
+        <video autoplay id="videoOutput"></video>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose"></script>
+    <script>
+        function init() {
+            const video = document.querySelector('#videoOutput');
+
+            if (navigator.mediaDevices.getUserMedia) {
+                navigator.mediaDevices.getUserMedia({ video: true })
+                    .then(function (stream) {
+                        video.srcObject = stream;
+                        main();
+                    })
+                    .catch(function (error) {
+                        console.log('Something went wrong!');
+                    });
+            } else {
+                console.log('no webcam!');
+            }
+        }
+
+        async function main() {
+            // Load the MediaPipe handpose model.
+            const model = await handpose.load();
+            console.log('model loaded');
+            // Pass in a video stream (or an image, canvas, or 3D tensor) to obtain a
+            // hand prediction from the MediaPipe graph.
+            const predictions = await model.estimateHands(document.querySelector('#videoOutput'));
+            console.log(predictions);
+            if (predictions.length > 0) {
+                /*
+                `predictions` is an array of objects describing each detected hand, for example:
+                [
+                  {
+                    handInViewConfidence: 1, // The probability of a hand being present.
+                    boundingBox: { // The bounding box surrounding the hand.
+                      topLeft: [162.91, -17.42],
+                      bottomRight: [548.56, 368.23],
+                    },
+                    landmarks: [ // The 3D coordinates of each hand landmark.
+                      [472.52, 298.59, 0.00],
+                      [412.80, 315.64, -6.18],
+                      ...
+                    ],
+                    annotations: { // Semantic groupings of the `landmarks` coordinates.
+                      thumb: [
+                        [412.80, 315.64, -6.18]
+                        [350.02, 298.38, -7.14],
+                        ...
+                      ],
+                      ...
+                    }
+                  }
+                ]
+                */
+
+                for (let i = 0; i < predictions.length; i++) {
+                    const keypoints = predictions[i].landmarks;
+
+                    // Log hand keypoints.
+                    for (let i = 0; i < keypoints.length; i++) {
+                        const [x, y, z] = keypoints[i];
+                        console.log(`Keypoint ${i}: [${x}, ${y}, ${z}]`);
+                    }
+                }
+            }
+        }
+
+    </script>
+</body>
+
+</html>
