Sử dụng TensorFlow.js tính khoảng cách giữa hai điểm ảnh

Các bài cùng serial: Sử dụng camera đo khoảng cách 2 vật thể hoặc 2 điểm

Thuật toán để đo khoảng cách 2 vật thể hoặc 2 điểm bằng camera
Đo khoảng cách giữa hai điểm bằng camera điện thoại
Áp dụng OpenCV trong JavaScript và tính toán khoảng cách giữa hai điểm trong ảnh
Sử dụng TensorFlow.js tính khoảng cách giữa hai điểm ảnh(bạn đang xem)
Công thức tính toán Real World Distance và tính các tham số từ JavaScript
JavaScript và HTML5 đo khoảng cách từ điện thoại đến một điểm

Để sử dụng TensorFlow.js nhằm ước tính khoảng cách giữa hai điểm hoặc đo kích thước của vật thể trong ảnh/video, bạn có thể áp dụng các bước sau. TensorFlow.js cung cấp mô hình học sâu sẵn có, chẳng hạn như Object Detection (nhận diện vật thể) hoặc Pose Detection (nhận diện tư thế), để phân tích khung hình và trích xuất thông tin về tọa độ điểm.

Quy trình tổng quát

Cài đặt TensorFlow.js:
- Dùng CDN hoặc npm/yarn để tích hợp TensorFlow.js vào dự án của bạn.
Chọn mô hình phù hợp:
- Coco-SSD: Nhận diện các vật thể phổ biến và cung cấp vị trí bounding box (hộp bao quanh vật thể).
- MoveNet (hoặc PoseNet): Phát hiện các điểm cơ thể (keypoints) để tính toán khoảng cách giữa chúng.
Tích hợp TensorFlow.js:
- Sử dụng camera để nhận video trực tiếp.
- Áp dụng mô hình để phát hiện tọa độ các điểm/vật thể.
- Tính khoảng cách giữa hai điểm dựa trên tọa độ trả về.

Ví dụ 1: Sử dụng Coco-SSD để đo khoảng cách giữa hai vật thể

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TensorFlow.js Object Detection</title>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
  <style>
    video, canvas { width: 100%; height: auto; }
    canvas { position: absolute; top: 0; left: 0; pointer-events: none; }
  </style>
</head>
<body>
  <video id="camera" autoplay></video>
  <canvas id="overlay"></canvas>

  <script>
    const video = document.getElementById('camera');
    const canvas = document.getElementById('overlay');
    const ctx = canvas.getContext('2d');

    async function setupCamera() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      video.srcObject = stream;

      return new Promise((resolve) => {
        video.onloadedmetadata = () => resolve(video);
      });
    }

    async function runDetection() {
      const model = await cocoSsd.load(); // Load the Coco-SSD model
      console.log("Coco-SSD model loaded!");

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

      const detectObjects = async () => {
        const predictions = await model.detect(video);

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        predictions.forEach((prediction) => {
          const [x, y, width, height] = prediction.bbox;
          const label = prediction.class;

          // Vẽ bounding box và tên vật thể
          ctx.strokeStyle = 'red';
          ctx.lineWidth = 2;
          ctx.strokeRect(x, y, width, height);
          ctx.fillStyle = 'red';
          ctx.font = '16px Arial';
          ctx.fillText(`${label}`, x, y - 10);
        });

        // (Tùy chọn) Tính khoảng cách giữa 2 vật thể dựa trên bbox
        if (predictions.length >= 2) {
          const point1 = { x: predictions[0].bbox[0], y: predictions[0].bbox[1] };
          const point2 = { x: predictions[1].bbox[0], y: predictions[1].bbox[1] };

          const distance = calculatePixelDistance(point1, point2);
          console.log(`Khoảng cách giữa hai vật thể: ${distance.toFixed(2)} pixels`);
        }

        requestAnimationFrame(detectObjects);
      };

      detectObjects();
    }

    function calculatePixelDistance(p1, p2) {
      const dx = p2.x - p1.x;
      const dy = p2.y - p1.y;
      return Math.sqrt(dx * dx + dy * dy);
    }

    setupCamera().then(runDetection);
  </script>
</body>
</html>

Ví dụ 2: Sử dụng MoveNet để đo khoảng cách giữa hai keypoints (điểm cơ thể)

MoveNet có thể phát hiện các điểm chính trên cơ thể người, như vai, đầu gối, bàn tay, v.v. Dựa trên tọa độ các điểm, bạn có thể tính khoảng cách giữa hai điểm bất kỳ.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MoveNet Pose Detection</title>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
  <style>
    video, canvas { width: 100%; height: auto; }
    canvas { position: absolute; top: 0; left: 0; pointer-events: none; }
  </style>
</head>
<body>
  <video id="camera" autoplay></video>
  <canvas id="overlay"></canvas>

  <script>
    const video = document.getElementById('camera');
    const canvas = document.getElementById('overlay');
    const ctx = canvas.getContext('2d');

    async function setupCamera() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      video.srcObject = stream;

      return new Promise((resolve) => {
        video.onloadedmetadata = () => resolve(video);
      });
    }

    async function runPoseDetection() {
      const detector = await poseDetection.createDetector(poseDetection.SupportedModels.MoveNet);
      console.log("MoveNet model loaded!");

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

      const detectPoses = async () => {
        const poses = await detector.estimatePoses(video);

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        poses.forEach((pose) => {
          pose.keypoints.forEach((keypoint) => {
            if (keypoint.score > 0.5) {
              const { x, y } = keypoint;
              ctx.fillStyle = 'blue';
              ctx.beginPath();
              ctx.arc(x, y, 5, 0, 2 * Math.PI);
              ctx.fill();
            }
          });

          // Tính khoảng cách giữa 2 điểm bất kỳ (ví dụ: vai trái và vai phải)
          const leftShoulder = pose.keypoints.find(k => k.name === 'left_shoulder');
          const rightShoulder = pose.keypoints.find(k => k.name === 'right_shoulder');
          if (leftShoulder && rightShoulder) {
            const distance = calculatePixelDistance(leftShoulder, rightShoulder);
            console.log(`Khoảng cách giữa hai vai: ${distance.toFixed(2)} pixels`);
          }
        });

        requestAnimationFrame(detectPoses);
      };

      detectPoses();
    }

    function calculatePixelDistance(p1, p2) {
      const dx = p2.x - p1.x;
      const dy = p2.y - p1.y;
      return Math.sqrt(dx * dx + dy * dy);
    }

    setupCamera().then(runPoseDetection);
  </script>
</body>
</html>

So sánh các phương pháp:

Phương pháp	Độ chính xác	Phạm vi ứng dụng
Coco-SSD	Tốt cho vật thể lớn	Phát hiện vật thể thông dụng
MoveNet/PoseNet	Tốt cho cơ thể người	Phân tích chuyển động, thể thao

Bạn có thể chọn mô hình phù hợp tùy thuộc vào nhu cầu của ứng dụng. Nếu bạn cần hỗ trợ thêm, mình sẵn sàng giải thích chi tiết! 😊

On 22/01/2025 By admin

Latest Post

Sử dụng TensorFlow.js tính khoảng cách giữa hai điểm ảnh

Các bài cùng serial: Sử dụng camera đo khoảng cách 2 vật thể hoặc 2 điểm

Quy trình tổng quát

Ví dụ 1: Sử dụng Coco-SSD để đo khoảng cách giữa hai vật thể

Code:

Ví dụ 2: Sử dụng MoveNet để đo khoảng cách giữa hai keypoints (điểm cơ thể)

Code:

So sánh các phương pháp:

Để lại một bình luận Hủy

Latest Post

Các bài cùng serial: Sử dụng camera đo khoảng cách 2 vật thể hoặc 2 điểm

Quy trình tổng quát

Ví dụ 1: Sử dụng Coco-SSD để đo khoảng cách giữa hai vật thể

Code:

Ví dụ 2: Sử dụng MoveNet để đo khoảng cách giữa hai keypoints (điểm cơ thể)

Code:

So sánh các phương pháp:

Để lại một bình luận Hủy

Related Post

Android là gì? – Tổng quan về hệ điều hành di động phổ biến nhất

Kiến thức cần biết để học lập trình ứng dụng Android

Tìm hiểu về lập trình game và 5+ yếu tố cần có để trở thành Game Developer