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>