공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
정지호
12e6311b 1 parent 95a6187e

Line up webcam and youtube

Inline Side-by-side
Showing 14 changed files with 36 additions and 7 deletions
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 2
3 button { 3 button {
4 margin: 10px; 4 margin: 10px;
5 + margin-bottom: 40px;
5 } 6 }
6 7
7 .w-btn { 8 .w-btn {
...@@ -47,6 +48,19 @@ button { ...@@ -47,6 +48,19 @@ button {
47 font-size : 60px; 48 font-size : 60px;
48 font-family: fantasy; 49 font-family: fantasy;
49 color : aliceblue; 50 color : aliceblue;
50 - margin: 20px; 51 + margin-top: 60px;
52 + margin-bottom: 20px;
51 text-align: center; 53 text-align: center;
52 } 54 }
55 +
56 +.label-container {
57 + visibility: hidden;
58 +}
59 +
60 +.hidden {
61 + visibility: hidden;
62 +}
63 +
64 +.visible {
65 + visibility: visible;
66 +}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -9,12 +9,22 @@ ...@@ -9,12 +9,22 @@
9 </head> 9 </head>
10 <body bgcolor= "#353535"> 10 <body bgcolor= "#353535">
11 <div class="Title">Squat Page</div> 11 <div class="Title">Squat Page</div>
12 - <center><button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button></center>
13 - <div><canvas id="canvas"></canvas></div>
14 - <div id="label-container"></div>
15 <center> 12 <center>
16 - <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> 13 + <button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button>
14 + <div>
15 + <canvas id="canvas"></canvas>
16 + <iframe
17 + id="youtube"
18 + class="hidden"
19 + width="560" height="315"
20 + src="https://www.youtube.com/embed/9WhpAVOSyl8?start=22"
21 + title="YouTube video player"
22 + frameborder="0"
23 + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
24 + </iframe>
25 + </div>
17 </center> 26 </center>
27 + <div id="label-container" class="label-container"></div>
18 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 28 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
19 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script> 29 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
20 <script src="./squat.js"></script> 30 <script src="./squat.js"></script>
......
...@@ -4,10 +4,15 @@ ...@@ -4,10 +4,15 @@
4 const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습. 4 const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
5 let model, webcam, ctx, labelContainer, maxPredictions; 5 let model, webcam, ctx, labelContainer, maxPredictions;
6 6
7 +
8 +
7 async function init() { 9 async function init() {
8 const modelURL = URL + "model.json"; 10 const modelURL = URL + "model.json";
9 const metadataURL = URL + "metadata.json"; 11 const metadataURL = URL + "metadata.json";
10 12
13 + var target = document.getElementById("youtube");
14 + target.className = "visible";
15 +
11 // load the model and metadata 16 // load the model and metadata
12 // Refer to tmImage.loadFromFiles() in the API to support files from a file picker 17 // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
13 // Note: the pose library adds a tmPose object to your window (window.tmPose) 18 // Note: the pose library adds a tmPose object to your window (window.tmPose)
...@@ -52,7 +57,7 @@ async function predict() { ...@@ -52,7 +57,7 @@ async function predict() {
52 if (prediction[0].probability.toFixed(2) > 0.9) { // 서있는 상태 57 if (prediction[0].probability.toFixed(2) > 0.9) { // 서있는 상태
53 if (status == "squat"){ // 전에 스쿼트 상태였다면, 일어날 때 카운트를 하나 올려줘야 함. 58 if (status == "squat"){ // 전에 스쿼트 상태였다면, 일어날 때 카운트를 하나 올려줘야 함.
54 count++; 59 count++;
55 - var audio = new Audio(count%10 + '.wav'); 60 + var audio = new Audio('./sound/' + count%10 + '.wav');
56 audio.play(); 61 audio.play();
57 console.log(count); 62 console.log(count);
58 } 63 }
...@@ -61,7 +66,7 @@ async function predict() { ...@@ -61,7 +66,7 @@ async function predict() {
61 status = "squat" 66 status = "squat"
62 } else if (prediction[2].probability.toFixed(2) == 1.00) { // 굽은 자세(잘못된 케이스) 67 } else if (prediction[2].probability.toFixed(2) == 1.00) { // 굽은 자세(잘못된 케이스)
63 if (status == "squart" || status == "stand") { // 굽은 자세로 잘못 수행하면, 소리 나도록 68 if (status == "squart" || status == "stand") { // 굽은 자세로 잘못 수행하면, 소리 나도록
64 - var audio = new Audio('bad.mp3'); 69 + var audio = new Audio('./sound/bad.mp3');
65 audio.play(); 70 audio.play();
66 } 71 }
67 status = "bent" 72 status = "bent"
......