123 lines
5.1 KiB
HTML
123 lines
5.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="select">
|
|
<div>
|
|
<h3>Camera</h3>
|
|
<label for="videoSource">Camera:</label
|
|
><select id="videoSource">
|
|
<option value="">None</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="fname">W x H</label>
|
|
<select id="cameraResolution">
|
|
<option value="0" width="640" height="480">640 x 480 (4:3)</option>
|
|
<option value="1" width="1920" height="1080">1920 x 1080 (16:9)</option>
|
|
<option value="2" width="1280" height="720">1280 x 720 (16:9)</option>
|
|
<option value="3" width="320" height="240">320 x 240 (4:3)</option>
|
|
</select>
|
|
<label for="fname">FPS</label>
|
|
<select id="cameraFPS">
|
|
<option value="30">30</option>
|
|
<option value="60">60</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<button id="cameraRunning">Start camera</button>
|
|
<button id="cameraVisible">Hide Camera</button>
|
|
</div>
|
|
<div>
|
|
<h3>Face</h3>
|
|
<label>Face Inference delegate</label>
|
|
<select id="faceDetectionDelegate">
|
|
<option value="GPU">GPU</option>
|
|
<option value="CPU">CPU</option>
|
|
</select>
|
|
<div class="slidecontainer">
|
|
<label>Minimum face detection confidence</label>
|
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="slider" id="minFaceDetectionConfidence" />
|
|
<span id="minFaceDetectionConfidenceValue"></span>
|
|
</div>
|
|
<div class="slidecontainer">
|
|
<label>Minimum face presence confidence</label>
|
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="slider" id="minFacePresenceConfidence" />
|
|
<span id="minFacePresenceConfidenceValue"></span>
|
|
</div>
|
|
<div class="slidecontainer">
|
|
<label>Minimum face tracking confidence</label>
|
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="slider" id="minFaceTrackingConfidence" />
|
|
<span id="minFaceTrackingConfidenceValue"></span>
|
|
</div>
|
|
<button id="face">Enable face detection</button>
|
|
<button id="hideFace">Hide face detection</button>
|
|
</div>
|
|
<div>
|
|
<h3>Hands</h3>
|
|
<label>Hands Inference delegate</label>
|
|
<select id="handDetectionDelegate">
|
|
<option value="GPU">GPU</option>
|
|
<option value="CPU">CPU</option>
|
|
</select>
|
|
<div class="slidecontainer">
|
|
<label>Minimum hand detection confidence</label>
|
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="slider" id="minHandDetectionConfidence" />
|
|
<span id="minHandDetectionConfidenceValue"></span>
|
|
</div>
|
|
<div class="slidecontainer">
|
|
<label>Minimum hand presence confidence</label>
|
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="slider" id="minHandPresenceConfidence" />
|
|
<span id="minHandPresenceConfidenceValue"></span>
|
|
</div>
|
|
<div class="slidecontainer">
|
|
<label>Minimum hand tracking confidence</label>
|
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="slider" id="minHandTrackingConfidence" />
|
|
<span id="minHandTrackingConfidenceValue"></span>
|
|
</div>
|
|
<button id="hand">Enable hand detection</button>
|
|
<button id="hideHand">Hide hand detection</button>
|
|
</div>
|
|
<div>
|
|
<h3>Pose</h3>
|
|
<label>Pose Inference delegate</label>
|
|
<select id="poseDetectionDelegate">
|
|
<option value="GPU">GPU</option>
|
|
<option value="CPU">CPU</option>
|
|
</select>
|
|
<div class="slidecontainer">
|
|
<label>Minimum pose detection confidence</label>
|
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="slider" id="minPoseDetectionConfidence" />
|
|
<span id="minPoseDetectionConfidenceValue"></span>
|
|
</div>
|
|
<div class="slidecontainer">
|
|
<label>Minimum pose presence confidence</label>
|
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="slider" id="minPosePresenceConfidence" />
|
|
<span id="minPosePresenceConfidenceValue"></span>
|
|
</div>
|
|
<div class="slidecontainer">
|
|
<label>Minimum pose tracking confidence</label>
|
|
<input type="range" min="0" max="1" step="0.1" value="0.5" class="slider" id="minPoseTrackingConfidence" />
|
|
<span id="minPoseTrackingConfidenceValue"></span>
|
|
</div>
|
|
<button id="pose">Enable pose detection</button>
|
|
<button id="hidePose">Hide pose detection</button>
|
|
</div>
|
|
</div>
|
|
<div class="canvas-container">
|
|
<video class="camera" id="video" autoplay muted playsinline></video>
|
|
<canvas class="output_canvas"></canvas>
|
|
<main></main>
|
|
</div>
|
|
<div class="blend-shapes">
|
|
<ul class="blend-shapes-list" id="video-blend-shapes"></ul>
|
|
</div>
|
|
</body>
|
|
<!-- <script defer language="javascript" type="text/javascript" src="sketch.js"></script> -->
|
|
<script src="detection.js"></script>
|
|
</html>
|