캔버스가 비어 있는 것처럼 보입니까?

Question

Blaze Pose에서 얻을 수 있는 키를 캔버스에 렌더링하려고 하는데 키를 캔버스에 그리도록 할 수 없는 것 같습니다. 각 키포인트의 x와 y가 검색된다는 것을 알고 있지만 캔버스에 표시할 수는 없습니다. 스타일을 변경해 보았지만 지금까지 성공하지 못했습니다. 당신의 도움을 주셔서 감사합니다.

으아악 으아악

const video = document.getElementById('webcam');
const canvas = document.getElementById('output')
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');
const ctx = canvas.getContext("2d"); 
let poses; 

function getUserMediaSupported() {
    return !!(navigator.mediaDevices &&
      navigator.mediaDevices.getUserMedia);
} 
if (getUserMediaSupported()) {
    enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}
  
// Enable the live webcam view and start classification.
function enableCam(event) {
  if (!model) {
    return;
  }
  // Hide the button once clicked.
  event.target.classList.add('removed');  
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: true
  };
  document.getElementById('output').style.zIndex = "6";
  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

async function predictWebcam() {
  
  const videoHeight = video.videoHeight;
  const videoWidth = video.videoWidth;

  video.width = videoWidth;
  video.height = videoHeight;
  canvas.width = videoWidth;
  canvas.height = videoHeight;

  poses = await detector.estimatePoses(video)  
  //ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

  if(poses && poses.length > 0){
    for(const pose of poses){
      if(pose.keypoints != null){
        drawKeypoints(pose.keypoints);
      }
    }
  }
  window.requestAnimationFrame(predictWebcam);
}

function drawKeypoints(keypoints){
 
  for(let i = 0; i < keypoints.length; i++){
    drawKeypoint(keypoints[i]);
  }

}

function drawKeypoint(keypoint){
  ctx.fillStyle = 'Orange';
  ctx.strokeStyle = 'Green';
  ctx.lineWidth = 2;
  const radius = 4; 
  const circle = new Path2D();
  circle.arc(keypoint.x, keypoint.y, radius, 0, 2 * Math.PI)
  ctx.fill(circle)
  ctx.stroke(circle)
}

// Store the resulting model in the global scope of our app.
let model = undefined;
let detector = undefined; 
// Before we can use BlazePose class we must wait for it to finish
async function loadModel(){
  model = poseDetection.SupportedModels.BlazePose;
  const detectorConfig = {
    runtime: 'tfjs',
    enableSmoothing: true,
    modelType: 'full'
  };
  detector = await poseDetection.createDetector(model, detectorConfig);
  demosSection.classList.remove('invisible');
}

loadModel();

Answer 1

이 문제를 해결해야 합니다:

1. 동영상의 크기가 고정된 경우 캔버스에도 이 크기를 적어주세요.

으아악

2. predictCam 함수에서 캔버스 크기를 설정하는 줄을 제거하세요:

으아악

3. drawKeypoints 시작 부분에 다음 줄을 추가하세요:

으아악

실제로 완전히 작동하도록 하기 위해 loadModel 함수 시작 부분에 이 줄을 추가하기도 했습니다.

으아악