Using Google MediaPipe/holistic to Combine right_hand, left_hand, pose, and face

Japanese

This demo uses Google MediaPipe/holistic.js to process right hand, left hand, pose, and face segmentation together from WebCam images on a website.

After granting camera access, the video feed will appear shortly

Please position a person, face, or hands within the camera view. The system will segment and display them.

Source code



<!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);

      // Face landmarks
      drawConnectors(ctx, results.faceLandmarks, FACEMESH_TESSELATION, {
        color: '#EEE',
        lineWidth: 1
      });

      // Pose landmarks
      drawConnectors(ctx, results.poseLandmarks, POSE_CONNECTIONS, {
        color: '#0F0',
        lineWidth: 3
      });
      drawLandmarks(ctx, results.poseLandmarks, {
        color: '#F00',
        lineWidth: 0,
        fillColor: '#F00',
        radius: 3
      });

      // Left-hand landmarks
      drawConnectors(ctx, results.leftHandLandmarks, HAND_CONNECTIONS, {
        color: '#00F',
        lineWidth: 3
      });
      drawLandmarks(ctx, results.leftHandLandmarks, {
        color: '#800',
        lineWidth: 0,
        fillColor: '#800',
        radius: 3
      });

      // Right-hand landmarks
      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>