공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
정지호
12257454 1 parent 99ae40b4

showing squat videos

Inline Side-by-side
Showing 2 changed files with 15 additions and 16 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 -<head> 3 + <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Squart Page</title> 7 <title>Squart Page</title>
8 -</head> 8 + </head>
9 -<body> 9 + <body>
10 <div>Teachable Machine Pose Model - Squart</div> 10 <div>Teachable Machine Pose Model - Squart</div>
11 -<button type="button" onclick="init()">Start</button> 11 + <button type="button" onclick="init()">Start</button>
12 -<div><canvas id="canvas"></canvas></div> 12 + <div><canvas id="canvas"></canvas></div>
13 -<div id="label-container"></div> 13 + <div id="label-container"></div>
14 -<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 14 + <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
15 -<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script> 15 + <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
16 -<script type="text/javascript"> 16 + <script type="text/javascript">
17 // More API functions here: 17 // More API functions here:
18 // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose 18 // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
19 -
20 // the link to your model provided by Teachable Machine export panel 19 // the link to your model provided by Teachable Machine export panel
21 const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습. 20 const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
22 let model, webcam, ctx, labelContainer, maxPredictions; 21 let model, webcam, ctx, labelContainer, maxPredictions;
...@@ -30,15 +29,13 @@ ...@@ -30,15 +29,13 @@
30 // Note: the pose library adds a tmPose object to your window (window.tmPose) 29 // Note: the pose library adds a tmPose object to your window (window.tmPose)
31 model = await tmPose.load(modelURL, metadataURL); 30 model = await tmPose.load(modelURL, metadataURL);
32 maxPredictions = model.getTotalClasses(); 31 maxPredictions = model.getTotalClasses();
33 -
34 // Convenience function to setup a webcam 32 // Convenience function to setup a webcam
35 - const size = 200; 33 + const size = 600;
36 const flip = true; // whether to flip the webcam 34 const flip = true; // whether to flip the webcam
37 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip 35 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
38 await webcam.setup(); // request access to the webcam 36 await webcam.setup(); // request access to the webcam
39 await webcam.play(); 37 await webcam.play();
40 window.requestAnimationFrame(loop); 38 window.requestAnimationFrame(loop);
41 -
42 // append/get elements to the DOM 39 // append/get elements to the DOM
43 const canvas = document.getElementById("canvas"); 40 const canvas = document.getElementById("canvas");
44 canvas.width = size; canvas.height = size; 41 canvas.width = size; canvas.height = size;
...@@ -108,7 +105,8 @@ ...@@ -108,7 +105,8 @@
108 } 105 }
109 } 106 }
110 } 107 }
111 -</script> 108 + </script>
112 - 109 + <!-- 유튜브 영상 띄우기 -->
113 -</body> 110 + <iframe width="560" height="315" src="https://www.youtube.com/embed/9WhpAVOSyl8?start=22" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
111 + </body>
114 </html> 112 </html>
......