공태현 / 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 @@
button {
margin: 10px;
margin-bottom: 40px;
}
.w-btn {
......@@ -47,6 +48,19 @@ button {
font-size : 60px;
font-family: fantasy;
color : aliceblue;
margin: 20px;
margin-top: 60px;
margin-bottom: 20px;
text-align: center;
}
.label-container {
visibility: hidden;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
\ No newline at end of file
......
......@@ -9,12 +9,22 @@
</head>
<body bgcolor= "#353535">
<div class="Title">Squat Page</div>
<center><button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button></center>
<div><canvas id="canvas"></canvas></div>
<div id="label-container"></div>
<center>
<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>
<button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button>
<div>
<canvas id="canvas"></canvas>
<iframe
id="youtube"
class="hidden"
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>
</div>
</center>
<div id="label-container" class="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
<script src="./squat.js"></script>
......
......@@ -4,10 +4,15 @@
const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
let model, webcam, ctx, labelContainer, maxPredictions;
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
var target = document.getElementById("youtube");
target.className = "visible";
// load the model and metadata
// Refer to tmImage.loadFromFiles() in the API to support files from a file picker
// Note: the pose library adds a tmPose object to your window (window.tmPose)
......@@ -52,7 +57,7 @@ async function predict() {
if (prediction[0].probability.toFixed(2) > 0.9) { // 서있는 상태
if (status == "squat"){ // 전에 스쿼트 상태였다면, 일어날 때 카운트를 하나 올려줘야 함.
count++;
var audio = new Audio(count%10 + '.wav');
var audio = new Audio('./sound/' + count%10 + '.wav');
audio.play();
console.log(count);
}
......@@ -61,7 +66,7 @@ async function predict() {
status = "squat"
} else if (prediction[2].probability.toFixed(2) == 1.00) { // 굽은 자세(잘못된 케이스)
if (status == "squart" || status == "stand") { // 굽은 자세로 잘못 수행하면, 소리 나도록
var audio = new Audio('bad.mp3');
var audio = new Audio('./sound/bad.mp3');
audio.play();
}
status = "bent"
......