Google MediaPipe/holisticでright_hand,left_hand,pose,faceをまとめて使用する～Google MediaPipe/holistic

WEBサイトでカメラ(WebCam)画像から「Google MediaPipe/holistic.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/holistic@0.1/holistic.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 holistic = new Holistic({locateFile: function(file){
        return `https://cdn.jsdelivr.net/npm/@mediapipe/holistic@0.1/${file}`;
      }});

      holistic.setOptions({
        upperBodyOnly: false,
        smoothLandmarks: true,
        minDetectionConfidence: 0.5,
        minTrackingConfidence: 0.5
      });
      holistic.onResults(onResults);
      const camera = new Camera(video, {
        onFrame: async function(){
          await holistic.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);
      //顔ランドマーク
      drawConnectors(ctx, results.faceLandmarks, FACEMESH_TESSELATION, {color:'#EEE', lineWidth:1});
      //姿勢ランドマーク
      drawConnectors(ctx, results.poseLandmarks, POSE_CONNECTIONS, {color:'#0F0', lineWidth:3});
      drawLandmarks(ctx, results.poseLandmarks, {color:'#F00', lineWidth: 0, fillColor:'#F00', radius:3});
      //左手ランドマーク
      drawConnectors(ctx, results.leftHandLandmarks, HAND_CONNECTIONS, {color:'#00F', lineWidth:3});
      drawLandmarks(ctx, results.leftHandLandmarks, {color:'#800', lineWidth:0, fillColor:'#800', radius:3});
      //右手ランドマーク
      drawConnectors(ctx, results.rightHandLandmarks, HAND_CONNECTIONS, {color: '#00F', lineWidth: 3});
      drawLandmarks(ctx, results.rightHandLandmarks, {color:'#800', 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>