WEBサイトでカメラ(WebCam)画像から手のランドマークを検出して表示する～Google MediaPipe/hands

WEBサイトでカメラ(WebCam)画像から「Google MediaPipe/hands.js」を使用して両手のランドマークを検出して表示します

カメラ使用を許可してしばらくすると、カメラ映像が表示されます

カメラに両手を映してください。ランドマークを推定表示します。

ソースコード



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0,user-scalable=yes">
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.1/hands.js" crossorigin="anonymous"></script>

  <script type="module">
    let video,can,ctx;
    window.addEventListener('load', async function(event){
      video = document.querySelector('.video');
      can = document.querySelector('.can');
      ctx = can.getContext('2d');

      const hands = new Hands({locateFile: function(file){
        return `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.1/${file}`;
      }}); 
      hands.setOptions({
              baseOptions: {
                modelAssetPath: "./hand_landmarker.task", //.taskファイルを指定する
                //delegate: "GPU" //CPU or GPUで処理するかを指定する
              },
        maxNumHands: 2,
        minDetectionConfidence: 0.5,
        minTrackingConfidence: 0.5,
      });
      hands.onResults(onResults);

      const camera = new Camera(video, {
        onFrame: async function(){
          await hands.send({image: video});
        },
        width: 640,
        height: 480
      });
      camera.start();
    });

    function onResults(results) {
      ctx.save();
      ctx.clearRect(0, 0, can.width, can.height);
      ctx.drawImage(
          results.image, 0, 0, can.width, can.height);
      if (results.multiHandLandmarks) {
        for (let landmarks of results.multiHandLandmarks) {
          drawConnectors(ctx, landmarks, HAND_CONNECTIONS, {color:'#0F0', lineWidth:5});
          drawLandmarks(ctx, landmarks, {color:'#F00', lineWidth:0, fillColor:'#800', radius:3});
        }
      }
      ctx.restore();
    }
  </script>
</head>
<body>
  <div class="container">
    <video class="video" style="display:none;"></video>
    <canvas class="can" width="640" height="480" style="transform:scale(-1,1);width:90%;max-width:640px;height:auto;"></canvas>
  </div>
</body>
</html>