face-detection-web-sdk
Version:
웹 기반 얼굴 인식을 통해 실시간으로 심박수, 스트레스, 혈압 등의 건강 정보를 측정하는 SDK
168 lines (149 loc) • 4.31 kB
HTML
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FaceDetection Web SDK - 기본 데모</title>
<meta
name="description"
content="FaceDetection Web SDK를 사용한 기본 얼굴 감지 및 건강 측정 데모"
/>
<!-- MathJS 라이브러리 -->
<script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
<style>
/* 기본 리셋 스타일 */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
line-height: 1;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
canvas,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* 메인 페이지 스타일 */
#MeasurePage {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #000;
}
#MeasurePage #Content {
width: 100vw;
height: 100vh;
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#MeasurePage #Content video {
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1); /* 셀카 모드: 좌우 반전 */
}
#MeasurePage #Content .output_canvas {
width: 100%;
height: 100%;
display: none;
object-fit: cover;
}
/* 측정 가이드 원형 프레임 */
#MeasurePage #Content .progress-bar {
width: 80vw;
height: 80vw;
max-width: 240px;
max-height: 240px;
border: 8px solid #ffffff;
border-radius: 50%;
position: absolute;
top: 9.745127436281859vh;
left: 50%;
transform: translateX(-50%);
z-index: 50;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: opacity 0.3s ease;
box-shadow: 0 0 100vw 100vh rgba(26, 26, 26, 0.6);
}
/* 안내 텍스트 */
.guide-text {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: white;
text-align: center;
z-index: 100;
font-size: 14px;
background: rgba(0, 0, 0, 0.7);
padding: 10px 20px;
border-radius: 20px;
}
/* 반응형 디자인 (태블릿 - 웹) */
@media all and (min-width: 768px) {
#MeasurePage #Content {
width: 56.22188905547227vh;
min-width: 375px;
}
#MeasurePage #Content .progress-bar {
width: 35.98200899550225vh;
height: 35.98200899550225vh;
max-width: none;
max-height: none;
}
}
</style>
</head>
<body>
<div id="MeasurePage">
<section id="Content">
<!-- 웹캠 비디오 스트림 -->
<video
id="input_video"
class="input_video"
muted="true"
width="640px"
height="480px"
autoplay
playsinline
></video>
<!-- 얼굴 감지 결과를 그리는 캔버스 -->
<canvas class="output_canvas" width="320px" height="240px"></canvas>
<!-- 측정 가이드 프레임 -->
<div class="progress-bar"></div>
<!-- 사용자 안내 텍스트 -->
<div class="guide-text">원 안에 얼굴을 위치시켜 주세요</div>
</section>
</div>
<!-- SDK 사용 스크립트 -->
<script type="module" src="./demo.js"></script>
</body>
</html>