live-detect-pose

Running

App Files Files Community

openfree commited on Jan 25

Commit

9b7a196

verified ·

1 Parent(s): 9b3ad98

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -273

index.html DELETED Viewed

@@ -1,273 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <title>MediaPipe Holistic Demo + Recording</title>
-  <!-- MediaPipe 필요한 라이브러리 CDN 불러오기 -->
-  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/camera_utils.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/control_utils.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/drawing_utils.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/holistic.js"></script>
-  <style>
-    body { margin: 0; padding: 0; }
-    .container {
-      display: flex;
-    }
-    .control-panel {
-      margin: 10px;
-      width: 300px;
-    }
-    .video-area {
-      position: relative;
-    }
-    .output_canvas {
-      display: block;
-    }
-    .video-controls {
-      position: fixed;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 1000;
-      display: flex;
-      gap: 10px;
-    }
-    .control-button {
-      padding: 10px 20px;
-      background-color: rgba(0, 0, 0, 0.7);
-      color: white;
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-      font-size: 14px;
-    }
-    .control-button:hover {
-      background-color: rgba(0, 0, 0, 0.9);
-    }
-  </style>
-</head>
-<body>
-<div class="container">
-  <div class="control-panel"></div>
-  <div class="video-area">
-    <video class="input_video" style="display:none;"></video>
-    <canvas class="output_canvas"></canvas>
-  </div>
-</div>
-<div class="video-controls" id="video-controls">
-  <!-- 녹화 버튼을 자바스크립트에서 동적으로 생성해 붙일 예정 -->
-</div>
-<script type="module">
-const controls = window;
-const mpHolistic = window;
-const drawingUtils = window;
-// HTML 엘리먼트 참조
-const videoElement = document.querySelector('.input_video');
-const canvasElement = document.querySelector('.output_canvas');
-const controlsElement = document.querySelector('.control-panel');
-const canvasCtx = canvasElement.getContext('2d');
-const controlsContainer = document.getElementById('video-controls');
-// MediaPipe의 FPS 유틸(선택적)
-const fpsControl = new controls.FPS();
-///////////////////////////////////////////////////////
-// 1. MediaPipe Holistic 초기화
-///////////////////////////////////////////////////////
-const holistic = new mpHolistic.Holistic({
-  locateFile: (file) => {
-    return `https://cdn.jsdelivr.net/npm/@mediapipe/holistic@${mpHolistic.VERSION}/${file}`;
-  }
-});
-holistic.setOptions({
-  modelComplexity: 1,
-  smoothLandmarks: true,
-  enableSegmentation: false,
-  smoothSegmentation: true,
-  refineFaceLandmarks: false,
-  minDetectionConfidence: 0.5,
-  minTrackingConfidence: 0.5,
-});
-// 결과 처리 콜백
-holistic.onResults((results) => {
-  // FPS 업데이트
-  fpsControl.tick();
-  // 캔버스 초기화
-  canvasCtx.save();
-  canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
-  // 원본 영상
-  canvasCtx.drawImage(
-    results.image,
-    0, 0,
-    canvasElement.width,
-    canvasElement.height
-  );
-  // Pose 랜드마크(연결선 + 점)
-  if (results.poseLandmarks && mpHolistic.POSE_CONNECTIONS) {
-    drawingUtils.drawConnectors(
-      canvasCtx,
-      results.poseLandmarks,
-      mpHolistic.POSE_CONNECTIONS,
-      { color: 'white', lineWidth: 2 }
-    );
-    drawingUtils.drawLandmarks(
-      canvasCtx,
-      results.poseLandmarks,
-      { color: '#FF0000', lineWidth: 1 }
-    );
-  }
-  // (필요하면) 손, 얼굴 랜드마크도 그리기 가능
-  canvasCtx.restore();
-});
-///////////////////////////////////////////////////////
-// 2. Control Panel(메뉴) 생성 (공식 예제 UI)
-///////////////////////////////////////////////////////
-new controls
-  .ControlPanel(controlsElement, {
-    selfieMode: true,
-    modelComplexity: 1,
-    smoothLandmarks: true,
-    enableSegmentation: false,
-    smoothSegmentation: true,
-    minDetectionConfidence: 0.5,
-    minTrackingConfidence: 0.5,
-    // 여기서 추가 옵션이나 UI 요소를 더 넣을 수 있음
-  })
-  .add([
-    new controls.StaticText({ title: 'MediaPipe Holistic + Recording' }),
-    fpsControl,
-    new controls.Toggle({ title: '셀피 모드', field: 'selfieMode' }),
-    new controls.Slider({
-      title: '모델 복잡도',
-      field: 'modelComplexity',
-      discrete: ['경량', '일반', '고급'],
-    }),
-    new controls.Toggle({ title: '랜드마크 평활화', field: 'smoothLandmarks' }),
-    new controls.Toggle({ title: '세그먼테이션', field: 'enableSegmentation' }),
-    new controls.Toggle({ title: '세그먼테이션 평활화', field: 'smoothSegmentation' }),
-    new controls.Slider({
-      title: '최소 감지 신뢰도',
-      field: 'minDetectionConfidence',
-      range: [0, 1],
-      step: 0.01
-    }),
-    new controls.Slider({
-      title: '최소 추적 신뢰도',
-      field: 'minTrackingConfidence',
-      range: [0, 1],
-      step: 0.01
-    }),
-  ])
-  .on((options) => {
-    // ControlPanel에서 변경된 옵션을 Holistic에 반영
-    videoElement.classList.toggle('selfie', options.selfieMode);
-    holistic.setOptions(options);
-  });
-///////////////////////////////////////////////////////
-// 3. 웹캠 열기 & 매 프레임 Holistic 처리
-///////////////////////////////////////////////////////
-async function initCamera() {
-  const stream = await navigator.mediaDevices.getUserMedia({
-    video: true,
-    audio: false
-  });
-  videoElement.srcObject = stream;
-  await videoElement.play();
-  // 비디오가 로드되면 캔버스 크기 설정 후, 프레임 반복
-  videoElement.onloadedmetadata = () => {
-    canvasElement.width = videoElement.videoWidth;
-    canvasElement.height = videoElement.videoHeight;
-    requestAnimationFrame(predictFrame);
-  };
-}
-async function predictFrame() {
-  await holistic.send({ image: videoElement });
-  requestAnimationFrame(predictFrame);
-}
-// 페이지 로드시 카메라 초기화
-initCamera().catch((err) => {
-  console.error('웹캠을 열 수 없습니다:', err);
-});
-///////////////////////////////////////////////////////
-// 4. 녹화 시작/중지 버튼 & MediaRecorder
-///////////////////////////////////////////////////////
-let mediaRecorder = null;
-let recordedChunks = [];
-let isRecording = false;
-function startRecording() {
-  // 캔버스 스트림 추출 (FPS 30)
-  const canvasStream = canvasElement.captureStream(30);
-  mediaRecorder = new MediaRecorder(canvasStream, {
-    mimeType: 'video/webm; codecs=vp9'
-  });
-  mediaRecorder.ondataavailable = (e) => {
-    if (e.data && e.data.size > 0) {
-      recordedChunks.push(e.data);
-    }
-  };
-  mediaRecorder.onstop = () => {
-    const blob = new Blob(recordedChunks, { type: 'video/webm' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.style.display = 'none';
-    a.href = url;
-    a.download = 'pose_recording.webm';
-    document.body.appendChild(a);
-    a.click();
-    setTimeout(() => {
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    }, 100);
-    recordedChunks = [];
-  };
-  mediaRecorder.start();
-  console.log('녹화 시작!');
-}
-function stopRecording() {
-  if (mediaRecorder) {
-    mediaRecorder.stop();
-    console.log('녹화 중지!');
-  }
-}
-const recordBtn = document.createElement('button');
-recordBtn.textContent = '녹화 시작';
-recordBtn.className = 'control-button';
-recordBtn.onclick = () => {
-  if (!isRecording) {
-    startRecording();
-    recordBtn.textContent = '녹화 중지';
-  } else {
-    stopRecording();
-    recordBtn.textContent = '녹화 시작';
-  }
-  isRecording = !isRecording;
-};
-controlsContainer.appendChild(recordBtn);
-</script>
-</body>
-</html>